फ्रेमवर्क 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 इनलाइन पिकर / दिनांक-समय

आप इनलाइन पिकर के मानों की संख्या का चयन कर सकते हैं। माइक की तारीख, माह, वर्ष और समय में घंटे, मिनट, सेकंड हैं।