फ्रेमवर्क 7 - पिकर

विवरण

पिकर आईओएस देशी पिकर की तरह दिखता है और यह एक शक्तिशाली घटक है जो आपको सूची से किसी भी मूल्य को चुनने की अनुमति देता है और कस्टम ओवर पिकर बनाने के लिए भी उपयोग किया जाता है। आप इनलाइन घटक के रूप में या ओवरले के रूप में पिकर का उपयोग कर सकते हैं। ओवरले पिकर को टेबलेट (iPad) पर स्वचालित रूप से पॉपओवर में बदल दिया जाएगा।

निम्नलिखित ऐप की विधि का उपयोग करके, आप जावास्क्रिप्ट विधि बना और शुरू कर सकते हैं -

myApp.picker(parameters)

जहां मापदंडों की आवश्यकता होती है, पिकर उदाहरण को इनिशियलाइज़ करने के लिए उपयोग किया जाता है और यह एक आवश्यक विधि है।

पिकर पैरामीटर

निम्न तालिका पिकर में उपलब्ध मापदंडों को निर्दिष्ट करती है -

S.No	पैरामीटर और विवरण	प्रकार	चूक
1	container इनलाइन पिकर के लिए पिकर HTML उत्पन्न करने के लिए CSS चयनकर्ता या HTMLElement के साथ स्ट्रिंग का उपयोग किया जाता है।	स्ट्रिंग या HTMLElement	-
2	input संबंधित इनपुट तत्व स्ट्रिंग के साथ सीएसएस चयनकर्ता या HTMLElement के साथ रखा गया है।	स्ट्रिंग या HTMLElement	-
3	scrollToInput जब भी पिकर खोला जाता है, तब इनपुट के व्यूपोर्ट (पेज-कंटेंट) को स्क्रॉल करने के लिए इसका उपयोग किया जाता है।	बूलियन	सच
4	inputReadOnly निर्दिष्ट इनपुट पर "आसानी से" विशेषता सेट करने के लिए उपयोग किया जाता है।	बूलियन	सच
5	convertToPopover इसका उपयोग आईपैड जैसी बड़ी स्क्रीन पर पिकर मोडल को पॉपओवर में बदलने के लिए किया जाता है।	बूलियन	सच
6	onlyOnPopover आप इसे सक्षम करके पॉपओवर में पिकर खोल सकते हैं।	बूलियन	सच
7	cssClass मोडल लेने के लिए, आप अतिरिक्त CSS क्लास नाम का उपयोग कर सकते हैं।	तार	-
8	closeByOutsideClick आप पिकर या इनपुट एलिमेंट के बाहर क्लिक करके पिकर को बंद कर सकते हैं।	बूलियन	असत्य
9	toolbar इसका उपयोग पिकर मोडल टूलबार को सक्षम करने के लिए किया जाता है।	बूलियन	सच
10	toolbarCloseText Done / Close टूलबार बटन के लिए उपयोग किया जाता है।	तार	'किया हुआ'
1 1	toolbarTemplate यह टूलबार HTML टेम्पलेट है, डिफ़ॉल्ट रूप से यह निम्न टेम्पलेट के साथ HTML स्ट्रिंग है - `<div class = "toolbar"> <div class = "toolbar-inner"> <div class = "left"></div> <div class = "right"> <a href = "#" class = "link close-picker"> {{closeText}} </a> </div> </div> </div>`	तार	-

विशिष्ट पिकर पैरामीटर

निम्न तालिका उपलब्ध विशिष्ट पिकर मापदंडों को सूचीबद्ध करती है -

S.No	पैरामीटर और विवरण	प्रकार	चूक
1	rotateEffect यह पिकर में 3D घुमाव प्रभाव को सक्षम करता है।	बूलियन	असत्य
2	momentumRatio जब आप तेज स्पर्श और चाल के बाद पिकर को छोड़ते हैं, तो यह अधिक गति पैदा करता है।	संख्या	7
3	updateValuesOnMomentum गति के दौरान पिकर और इनपुट मानों को अपडेट करने के लिए उपयोग किया जाता है।	बूलियन	असत्य
4	updateValuesOnTouchmove स्पर्श चाल के दौरान पिकर और इनपुट मानों को अपडेट करने के लिए उपयोग किया जाता है।	बूलियन	सच
5	value सरणी के अपने प्रारंभिक मूल्य हैं और प्रत्येक सरणी आइटम संबंधित स्तंभ के मूल्य का प्रतिनिधित्व करता है।	सरणी	-
6	formatValue फ़ंक्शन का उपयोग इनपुट मान को प्रारूपित करने के लिए किया जाता है, और इसे नया / स्वरूपित स्ट्रिंग मान वापस करना चाहिए। मूल्यों और displayValues संबंधित स्तंभ की सरणी है।	समारोह (पी, मान, प्रदर्शन)	-
7	cols प्रत्येक सरणी आइटम स्तंभ पैरामीटर के साथ किसी ऑब्जेक्ट का प्रतिनिधित्व करता है।	सरणी	-

पिकर पैरामीटर कॉलबैक

निम्न तालिका पिकर में उपलब्ध कॉलबैक कार्यों की सूची दिखाती है -

S.No	कॉलबैक और विवरण	प्रकार	चूक
1	onChange जब भी पिकर वैल्यू बदली जाएगी तब कॉलबैक फ़ंक्शन को निष्पादित किया जाएगा और वैल्यू और डिस्प्लेवैल्यू संबंधित कॉलम के एरेज़ हैं।	समारोह (पी, मान, प्रदर्शन)	-
2	onOpen जब भी पिकर खोला जाएगा तो कॉलबैक फ़ंक्शन निष्पादित किया जाएगा।	फ़ंक्शन (पी)	-
3	onClose जब भी पिकर बंद होगा कॉलबैक फ़ंक्शन निष्पादित किया जाएगा।	फ़ंक्शन (पी)	-

स्तंभ पैरामीटर

पिकर के कॉन्फ़िगरेशन के क्षण में, हमें कोल पैरामीटर को पास करना होगा । यह सरणी के रूप में दर्शाया गया है, जहां प्रत्येक आइटम कॉलम पैरामीटर के साथ ऑब्जेक्ट है -

S.No	पैरामीटर और विवरण	प्रकार	चूक
1	values आप एक सरणी के साथ स्ट्रिंग कॉलम मान निर्दिष्ट कर सकते हैं।	सरणी	-
2	displayValues इसमें स्ट्रिंग कॉलम मानों के साथ सरणी है और यह मान पैरामीटर से मान प्रदर्शित करेगा , जब यह निर्दिष्ट नहीं है।	सरणी	-
3	cssClass CSS वर्ग नाम स्तंभ एचटीएमएल कंटेनर पर सेट करने के लिए इस्तेमाल किया।	तार	-
4	textAlign इसका उपयोग स्तंभ मानों के पाठ संरेखण को सेट करने के लिए किया जाता है और यह "बाएं", "केंद्र" या "दाएं" हो सकता है ।	तार	-
5	width चौड़ाई की गणना स्वचालित रूप से की जाती है, डिफ़ॉल्ट रूप से। यदि आपको पिकर में स्तंभ चौड़ाई को ठीक करने की आवश्यकता है तो निर्भर स्तंभों के साथ जो कि px में होना चाहिए ।	संख्या	-
6	divider इसका उपयोग स्तंभ के लिए किया जाता है जो दृश्य विभक्त होना चाहिए, इसमें कोई मान नहीं है।	बूलियन	असत्य
7	content इसका उपयोग कॉलम की सामग्री के साथ निर्दिष्ट विभक्त-स्तंभ (विभक्त: सत्य) के लिए किया जाता है।	तार	-

कॉलम कॉलबैक पैरामीटर

S.No	कॉलबैक और विवरण	प्रकार	चूक
1	onChange जब भी उस समय स्तंभ मान परिवर्तित होगा, कॉलबैक फ़ंक्शन निष्पादित होगा। मूल्य और displayValue वर्तमान स्तंभ का प्रतिनिधित्व मूल्य और displayValue ।	समारोह (पी, मूल्य, प्रदर्शन)	-

पिकर गुण

पिकर चर में कई गुण होते हैं जो निम्नलिखित तालिका में दिए गए हैं -

S.No	गुण और विवरण
1	myPicker.params आप ऑब्जेक्ट के साथ पारित मापदंडों को इनिशियलाइज़ कर सकते हैं।
2	myPicker.value प्रत्येक स्तंभ के लिए चयनित मान को आइटम की एक सरणी द्वारा दर्शाया गया है।
3	myPicker.displayValue प्रत्येक स्तंभ के लिए चयनित प्रदर्शन मान को आइटम की एक सरणी द्वारा दर्शाया गया है।
4	myPicker.opened जब पिकर खोला जाता है, तो यह सही मूल्य पर सेट होता है ।
5	myPicker.inline जब पिकर इनलाइन होता है, तो यह सही मूल्य पर सेट होता है ।
6	myPicker.cols पिकर कॉलम के अपने तरीके और गुण हैं।
7	myPicker.container DOM7 उदाहरण का उपयोग HTML कंटेनर के लिए किया जाता है।

बीनने की विधियाँ

पिकर चर में सहायक विधियाँ हैं, जो निम्न तालिका में दी गई हैं -

S.No	तरीके और विवरण
1	myPicker.setValue(values, duration) नया पिकर मान सेट करने के लिए उपयोग करें। मान उस सरणी में होते हैं जहां प्रत्येक आइटम प्रत्येक स्तंभ के लिए मान का प्रतिनिधित्व करता है । अवधि - यह एमएस में संक्रमण की अवधि है।
2	myPicker.open() पिकर खोलने के लिए उपयोग करें।
3	myPicker.close() पिकर को बंद करने के लिए उपयोग करें।
4	myPicker.destroy() पिकर उदाहरण को नष्ट करने और सभी घटनाओं को हटाने के लिए उपयोग करें।

स्तंभ के गुण

MyPicker.cols सरणी के प्रत्येक कॉलम के अपने उपयोगी गुण भी हैं, जो निम्न तालिका में दिए गए हैं -

//Get first column
var col = myPicker.cols[0];

S.No	गुण और विवरण
1	col.container आप कॉलम HTML कंटेनर के साथ एक इंस्टेंस बना सकते हैं।
2	col.items आप स्तंभ आइटम HTML तत्वों के साथ एक उदाहरण बना सकते हैं।
3	col.value वर्तमान स्तंभ मान का चयन करने के लिए उपयोग किया जाता है।
4	col.displayValue प्रदर्शन के वर्तमान स्तंभ मान का चयन करने के लिए उपयोग किया जाता है।
5	col.activeIndex वर्तमान इंडेक्स नंबर दें, जो चयनित / सक्रिय आइटम है।

कॉलम के तरीके

निम्न तालिका में उपयोगी स्तंभ विधियाँ दी गई हैं -

S.No	तरीके और विवरण
1	col.setValue(value, duration) वर्तमान कॉलम के लिए एक नया मान सेट करने के लिए उपयोग किया जाता है। मूल्य एक नया मान होना चाहिए, और अवधि संक्रमण एमएस में दी गई अवधि है।
2	col.replaceValues(values, displayValues) स्तंभ मानों और प्रदर्शनों को नए के साथ बदलने के लिए उपयोग किया जाता है।

जब भी आप पिकर को इनलाइन पिकर के रूप में इनिशियलाइज़ करते हैं, तो इसका उपयोग इसके HTML कंटेनर से पिकर की आवृत्ति तक पहुँचने के लिए किया जाता है।

var myPicker = $$('.picker-inline')[0].f7Picker;

निम्न तालिका में निर्दिष्ट के अनुसार विभिन्न प्रकार के पिकर हैं -

S.No	टैब प्रकार और विवरण
1	एकल मूल्य के साथ पिकर यह एक शक्तिशाली घटक है जो आपको सूची से किसी भी मूल्य को चुनने की अनुमति देता है।
2	दो मूल्य और 3 डी घुमाएँ प्रभाव पिकर में आप 3D रोटेट प्रभाव के लिए उपयोग कर सकते हैं।
3	आश्रित मान मान निर्दिष्ट तत्व के लिए एक दूसरे पर निर्भर हैं।
4	कस्टम टूलबार आप अनुकूलित के लिए एकल पृष्ठ पर एक या अधिक पिकर का उपयोग कर सकते हैं।
5	इनलाइन पिकर / दिनांक-समय आप इनलाइन पिकर के मानों की संख्या का चयन कर सकते हैं। माइक की तारीख, माह, वर्ष और समय में घंटे, मिनट, सेकंड हैं।