2012-01-06 6 views
9

हमारे पास एक एम्बेडेड सिस्टम के लिए एक ऐप है, और हम एचटीएमएल 5, CSS3 और कुछ जेएस पुस्तकालयों पर आधारित कई ऐप्स विकसित कर रहे हैं, जो वेबकिट ब्राउज़र पर चलते हैं। मैं सोच रहा था कि क्या कोई पुस्तकालय है जो कुंजीपटल के अनुकूलन ग्राफिक्स के साथ स्क्रीन कीबोर्ड पर लागू किया गया है। इसे अंतर्राष्ट्रीय बनाना भी आसान होना चाहिए।ब्राउज़र के लिए जेएस आधारित ऑन-स्क्रीन कीबोर्ड, जैसे सेलफोन और टैबलेट

एचटीएमएल 5 कैनवास पर आधारित कुछ भी हो सकता है?

मैं किसी भी इनपुट की सराहना करता हूं। धन्यवाद!

उत्तर

8

ऐसा कुछ?

http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/

साथ ही, यहाँ एक (भिन्न) प्लगइन एक ट्यूटोरियल के बजाय है:

http://www.sitepoint.com/jquery-on-screen-keyboard/

+1

मुझे nettuts एक पसंद है। मैंने jquery4u देखा, लेकिन मुझे यह पसंद नहीं आया क्योंकि यह jquery ui पर आधारित था। क्या आप एचटीएमएल 5 कैनवास पर आधारित किसी को जानते हैं? – Sherzod

+0

यह काम कर सकता है: http://stickmanventures.com/labs/demo/onscreen-keyboard-html5-canvas-multitouch/ - यहां इसके बारे में अधिक जानकारी: http://blog.stickmanventures.com/2011/10/22/onscreen -किबोर्ड-कार्यान्वित-इन-एचटीएमएल 5-कैनवास-साथ-मल्टीटाउच-सपोर्ट-थ्रू-इवेंट-एपीआई-एंड-मैग्िक्चच-जेएस/ –

+0

@ ग्रिल्ज़ दिलचस्प डेमो, हालांकि मोबाइल फ़ायरफ़ॉक्स के तहत मेरे फोन पर यह दावा करता है कि "आप डॉन" प्रतीत होता है कि डेस्कटॉप पर कोई मल्टीटाउच समर्थन नहीं है। आपको कुछ टीयूआईओ की आवश्यकता है "... जो कि अजीब है क्योंकि मैं डेस्कटॉप डिवाइस पर नहीं हूं, मैं मल्टी-टच स्क्रीन डिवाइस पर हूं। – Michael

6

आप Virtual Keyboard जो features, language layouts का एक बहुत है और बहुत well documented है की कोशिश कर सकते।
तुम भी आसानी से बूटस्ट्रैप के साथ एकीकृत कर सकते हैं:

$('#keyboard').keyboard({ 
    layout: 'qwerty', 
    css: { 
     // input & preview 
     input: 'form-control input-sm', 
     // keyboard container 
     container: 'center-block dropdown-menu', // jumbotron 
     // default state 
     buttonDefault: 'btn btn-default', 
     // hovered button 
     buttonHover: 'btn-primary', 
     // Action keys (e.g. Accept, Cancel, Tab, etc); 
     // this replaces "actionClass" option 
     buttonAction: 'active', 
     // used when disabling the decimal button {dec} 
     // when a decimal exists in the input area 
     buttonDisabled: 'disabled' 
    } 
}) 

पूर्ण उदाहरण here का पता लगाएं।

आप On Screen Keyboard भी कोशिश कर सकते हैं जो कि बहुत ही सरल और कम समृद्ध है।

संबंधित मुद्दे