फ्रेमवर्क 7 - सर्च बार
विवरण
फ्रेमवर्क 7 खोजकर्ता वर्ग का उपयोग करके तत्वों को खोजने की अनुमति देता है ।
बार पैरामीटर्स खोजें
| S.No | पैरामीटर और विवरण | प्रकार | चूक |
|---|---|---|---|
| 1 | searchList यह सूची के CSS चयनकर्ता या HTML तत्व को खोजता है। |
स्ट्रिंग या HTML तत्व | - |
| 2 | searchIn आप CSS चयनकर्ताओं के सूची दृश्य तत्वों को खोज सकते हैं, .item-title , .item-text कक्षाओं को पास करके तत्वों को भी खोज सकते हैं। |
तार | '।मद शीर्षक' |
| 3 | found यह "पाया" तत्व का उपयोग करके सीएसएस चयनकर्ता या HTML तत्व को खोजता है। इसके अलावा, अगर कोई तत्व निर्दिष्ट नहीं है तो यह .searchbar-पाया तत्व का उपयोग करता है। |
स्ट्रिंग या HTML तत्व | - |
| 4 | notfound यह CSS चयनकर्ता या HTML तत्व को "नहीं-पाया" तत्व का उपयोग करके खोजता है। इसके अलावा, यदि कोई तत्व निर्दिष्ट नहीं है तो यह .searchbar-not-found तत्व का उपयोग करता है । |
स्ट्रिंग या HTML तत्व | - |
| 5 | overlay यह "खोज पट्टी ओवरले" तत्व का उपयोग करके सीएसएस चयनकर्ता या एचटीएमएल तत्व को खोजता है और यदि कोई तत्व निर्दिष्ट नहीं है तो .searchbar-overlay तत्व का उपयोग करता है। |
स्ट्रिंग या HTML तत्व | - |
| 6 | ignore आप खोजकर्ता का उपयोग करके आइटम के लिए सीएसएस चयनकर्ता को अनदेखा कर सकते हैं। |
तार | '.Searchbar-उपेक्षा' |
| 7 | customSearch जब इसे सक्षम किया जाता है, तो खोजकर्ता किसी भी सूची ब्लॉक के माध्यम से खोज नहीं करेगा जो कि सर्चलिस्ट द्वारा निर्दिष्ट किया गया है और आपको अन्य खोज कार्यक्षमता का उपयोग करने की अनुमति होगी। |
बूलियन | असत्य |
| 8 | removeDiacritics एक तत्व की खोज करते समय, इस पैरामीटर को सक्षम करके विकृति विज्ञान को हटा दें। |
बूलियन | असत्य |
| 9 | hideDividers यह पैरामीटर आइटम डिवाइडर और समूह शीर्षक छिपाएगा, अगर कोई आइटम नहीं हैं। |
बूलियन | सच |
| 10 | hideGroups यह पैरामीटर समूहों को छिपा देगा, यदि सूची दृश्य समूहों में कोई आइटम नहीं मिले हैं। |
बूलियन | सच |
बार कॉलबैक खोजें
| S.No | कॉलबैक और विवरण | प्रकार | चूक |
|---|---|---|---|
| 1 | onSearch यह विधि खोज करते समय कॉलबैक फ़ंक्शन को आग लगा देगी। |
कार्य | - |
| 2 | onEnable जब खोज बार सक्रिय हो जाएगा, तो यह विधि कॉलबैक फ़ंक्शन को आग लगा देगी। |
कार्य | - |
| 3 | onDisable जब खोज बार निष्क्रिय हो जाएगा तो यह विधि कॉलबैक फ़ंक्शन को आग लगा देगी। |
कार्य | - |
| 4 | onClear जब आप "स्पष्ट" तत्व पर क्लिक करते हैं तो यह विधि कॉलबैक फ़ंक्शन को आग लगा देगी। |
कार्य | - |
बार गुण खोजें
| S.No | गुण और विवरण |
|---|---|
| 1 | mySearchbar.params ऑब्जेक्ट के साथ उत्तीर्ण प्रारंभिक पैरामीटर का प्रतिनिधित्व करता है। |
| 2 | mySearchbar.query वर्तमान क्वेरी खोजता है। |
| 3 | mySearchbar.searchList खोज सूची ब्लॉक को परिभाषित करता है। |
| 4 | mySearchbar.container HTML तत्व के साथ खोज बार कंटेनर को परिभाषित करता है। |
| 5 | mySearchbar.input HTML तत्व के साथ खोज बार इनपुट को परिभाषित करता है। |
| 6 | mySearchbar.active यह परिभाषित करता है कि खोज पट्टी सक्षम या अक्षम है या नहीं। |
बार तरीके खोजें
| S.No | तरीके और विवरण |
|---|---|
| 1 | mySearchbar.search(query); यह विधि पारित क्वेरी को खोजती है। |
| 2 | mySearchbar.enable(); यह खोज बार को सक्षम करता है। |
| 3 | mySearchbar.disable(); यह खोज बार को निष्क्रिय करता है। |
| 4 | mySearchbar.clear(); आप क्वेरी और खोज परिणाम साफ़ कर सकते हैं। |
| 5 | mySearchbar.destroy(); यह खोज बार उदाहरण को नष्ट कर देता है। |
बार जावास्क्रिप्ट ईवेंट खोजें
| S.No | घटना विवरण | लक्ष्य |
|---|---|---|
| 1 | search आप तत्वों को खोजते हुए इस घटना को आग लगा सकते हैं। |
<div class = "list-block"> |
| 2 | clearSearch उपयोगकर्ता द्वारा क्लियर सर्च तत्व पर क्लिक करने पर यह ईवेंट फ़ायर हो जाएगा। |
<div class = "list-block"> |
| 3 | enableSearch जब खोज बार सक्षम हो जाएगा, तो यह ईवेंट फ़ायर हो जाएगा। |
<div class = "list-block"> |
| 4 | disableSearch जब खोज बार अक्षम हो जाता है, और उपयोगकर्ता रद्द करें बटन, या "खोज बार-ओवरले" तत्व पर क्लिक करता है, तो यह घटना निकाल दी जाएगी। |
<div class = "list-block"> |
उदाहरण
निम्नलिखित उदाहरण फ्रेमवर्क 7 में स्क्रॉल पर खोज बार के उपयोग को दर्शाता है -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Search Bar Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages navbar-fixed">
<div data-page = "home" class = "page">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Search Bar Layout</div>
</div>
</div>
<form data-search-list = ".list-block-search" data-search-in = ".item-title"
class = "searchbar searchbar-init">
<div class = "searchbar-input">
<input type = "search" placeholder = "Search"><a href = "#"
class = "searchbar-clear"></a>
</div>
<a href = "#" class = "searchbar-cancel">Cancel</a>
</form>
<div class = "searchbar-overlay"></div>
<div class = "page-content">
<div class = "content-block searchbar-not-found">
<div class = "content-block-inner">No element found...</div>
</div>
<div class = "list-block list-block-search searchbar-found">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">India</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Argentina</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Belgium</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Brazil</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Canada</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Colombia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Denmark</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ecuador</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">France</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Germany</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Greece</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Haiti</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Hong Kong</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Iceland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ireland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Jamaica</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Japan</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kenya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kuwait</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Libya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Liberia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Malaysia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mauritius</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mexico</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Namibia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">New Zealand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Oman</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Paraguay</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Philippines</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Russia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Singapore</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">South Africa</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Thailand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">United Kingdom</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Vatican City</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Zimbabwe</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>उत्पादन
ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -
ऊपर दिए गए HTML कोड को सेव करें search_bar.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/search_bar.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
यदि सूची में शामिल तत्व को खोज बार में दर्ज किया गया है, तो यह सूची से उस विशेष तत्व को प्रदर्शित करता है।
यदि सूची में शामिल तत्वों के अलावा अन्य तत्व दर्ज किया गया है, तो यह कोई तत्व नहीं मिला है।