फ्रेमवर्क 7 - त्वरित गाइड
फ्रेमवर्क 7 मोबाइल HTML के लिए एक स्वतंत्र और खुला स्रोत ढांचा है। इसका उपयोग iOS और Android उपकरणों के लिए हाइब्रिड मोबाइल ऐप या वेब ऐप विकसित करने के लिए किया जाता है।
फ्रेमवर्क 7 को वर्ष 2014 में पेश किया गया था। नवीनतम संस्करण 1.4.2 को फरवरी 2016 में एमआईटी के तहत लाइसेंस जारी किया गया था।
क्यों फ्रेमवर्क 7 का उपयोग करें?
- IOS और Android के लिए ऐप्स विकसित करना आसान है।
- फ्रेमवर्क 7 के लिए सीखने की अवस्था बहुत आसान है।
- इसमें कई पूर्व-शैली वाले विजेट / घटक हैं।
- इसमें बिल्ट-इन हेल्पर लाइब्रेरी हैं।
विशेषताएं
फ्रेमवर्क 7 एक खुला स्रोत है और फ्रेमवर्क का उपयोग करने के लिए स्वतंत्र है।
फ्रेमवर्क 7 में बिना किसी देरी के शुरू करने के लिए आसान और परिचित jQuery वाक्यविन्यास है।
टच यूआई के लिए क्लिक देरी को नियंत्रित करने के लिए, फ्रेमवर्क 7 में निर्मित फास्टक्लिक लाइब्रेरी है।
फ्रेमवर्क 7 में आपके तत्वों को जिम्मेदारी से व्यवस्थित करने के लिए अंतर्निहित ग्रिड सिस्टम लेआउट है।
फ्रेमवर्क 7 गतिशील राउटर एपीआई के माध्यम से टेम्पलेट्स से पृष्ठों को गतिशील रूप से लोड करता है ।
लाभ
DOM7 हेरफेर के लिए भी फ्रेमवर्क 7 किसी तीसरे पक्ष के पुस्तकालय पर निर्भर नहीं है। इसके बजाय, इसका अपना कस्टम DOM7 है।
Framework7 भी साथ इस्तेमाल किया जा सकता कोणीय और प्रतिक्रिया चौखटे।
एचटीएमएल, सीएसएस और कुछ बुनियादी जावास्क्रिप्ट जानने के बाद आप ऐप बनाना शुरू कर सकते हैं।
यह बोवर के माध्यम से तेजी से विकास का समर्थन करता है ।
इसे सीखे बिना iOS और Android के लिए ऐप विकसित करना आसान है।
नुकसान
फ्रेमवर्क 7 केवल आईओएस और एंड्रॉइड जैसे प्लेटफार्मों का समर्थन करता है।
आईओएस और एंड्रियोड की तुलना में फ्रेमवर्क 7 ढांचे के लिए ऑनलाइन सामुदायिक समर्थन कम है।
इस अध्याय में, हम फ्रेमवर्क 7 को कैसे स्थापित करें और सेटअप करें, इस बारे में चर्चा करेंगे।
आप दो तरीकों से फ्रेमवर्क 7 डाउनलोड कर सकते हैं -
फ्रेमवर्क 7 जीथब रिपॉजिटरी से डाउनलोड करें
आप फ्रेमवर्क 7 को स्थापित कर सकते हैं, बावर का उपयोग करके जैसा कि नीचे दिखाया गया है -
bower install framework7फ्रेमवर्क 7 की सफल स्थापना के बाद, आपको अपने आवेदन में फ्रेमवर्क 7 का उपयोग करने के लिए नीचे दिए गए चरणों का पालन करना होगा -
Step 1 - आपको इंस्टॉल करने की आवश्यकता है gulp-cli निम्नलिखित कमांड का उपयोग करके फ्रेमवर्क 7 के विकास और डिस्टर्ब संस्करणों के निर्माण के लिए।
npm install gulp-cliCLI Gulp के लिए कमांड लाइन उपयोगिता के लिए खड़ा है।
Step 2 - निम्न आदेश का उपयोग करके विश्व स्तर पर Gulp स्थापित किया जाना चाहिए।
npm install --global gulpStep 3- इसके बाद, NodeJS पैकेज मैनेजर स्थापित करें, जो नोड प्रोग्राम स्थापित करता है जो निर्भरता को निर्दिष्ट और लिंक करना आसान बनाता है। Npm को स्थापित करने के लिए निम्न कमांड का उपयोग किया जाता है।
npm installStep 4 - फ्रेमवर्क 7 का विकास संस्करण निम्न कमांड का उपयोग करके बनाया जा सकता है।
npm buildStep 5- जब आप फ्रेमवर्क 7 के विकास संस्करण का निर्माण करते हैं, तो निम्न कमांड का उपयोग करके ऐप को डिस्ट / फोल्डर से बनाना शुरू करें ।
npm distStep 6 - सर्वर में अपना ऐप फ़ोल्डर रखें और अपने ऐप के पृष्ठों के बीच नेविगेशन के लिए निम्न कमांड चलाएं।
gulp serverCDN से फ्रेमवर्क 7 लाइब्रेरी डाउनलोड करें
एक सीडीएन या कंटेंट डिलीवरी नेटवर्क उपयोगकर्ताओं को फाइल परोसने के लिए डिज़ाइन किया गया सर्वर का एक नेटवर्क है। यदि आप अपने वेब पेज में एक CDN लिंक का उपयोग करते हैं, तो यह आपके अपने सर्वर से फ़ाइलों को होस्ट करने की जिम्मेदारी बाहरी लोगों की एक श्रृंखला पर ले जाता है। इससे एक फायदा यह भी होता है कि यदि आपके वेबपेज पर कोई विज़िटर पहले से ही सीडीएन से फ्रेमवर्क 7 की कॉपी डाउनलोड कर चुका है, तो उसे दोबारा डाउनलोड नहीं करना पड़ेगा। आप HTML दस्तावेज़ में निम्न CDN फ़ाइलों को शामिल कर सकते हैं।
निम्नलिखित CDN एक में उपयोग किए जाते हैं iOS App layout -
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />इसका उपयोग आपके आवेदन में फ्रेमवर्क 7 आईओएस सीएसएस लाइब्रेरी को शामिल करने के लिए किया जाता है।
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />इसका उपयोग आपके आवेदन में फ्रेमवर्क 7 आईओएस संबंधित रंग शैलियों को शामिल करने के लिए किया जाता है।
निम्नलिखित CDN का उपयोग किया जाता है Android/Material App Layout -
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>इसका उपयोग आपके आवेदन में फ्रेमवर्क 7 जेएस लाइब्रेरी को शामिल करने के लिए किया जाता है।
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>इसका उपयोग आपके आवेदन में फ्रेमवर्क 7 मैटीरियल स्टाइलिंग को शामिल करने के लिए किया जाता है।
हम इस ट्यूटोरियल में लाइब्रेरी के CDN संस्करणों का उपयोग कर रहे हैं। हम अपने सभी उदाहरणों को निष्पादित करने के लिए AMPPS (AMPPS एक WAMP, MAMP और Apache, MySQL, MongoDB, PHP, Perl & Python) सर्वर का उपयोग करते हैं।
उदाहरण
निम्न उदाहरण फ्रेमवर्क 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>My App</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>
//you can control the background color of the Status bar
<div class = "statusbar-overlay"></div>
<div class = "panel-overlay"></div>
<div class = "panel panel-right panel-reveal">
<div class = "content-block">
<p>Contents goes here...</p>
</div>
</div>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">My App</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel">
<i class = "icon icon-bars"></i>
</a>
</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<p>This is simple application...</p>
<div class = "list-block">
<ul>
<li>
<a href = "envirmnt_about.html" class = "">
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Blog</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">First Link</a>
<a href = "#" class = "link">Second Link</a>
</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>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
//use the 'pageInit' event handler for all pages
$$(document).on('pageInit', function (e) {
//get page data from event data
var page = e.detail.page;
if (page.name === 'blog') {
// you will get below message in alert box when page with data-page attribute is equal to "about"
myApp.alert('Here its your About page');
}
})
</script>
</body>
</html>इसके बाद, एक और HTML पेज बनाएं envirmnt_about.html जैसा कि नीचे दिखाया गया है -
envirmnt_about.html
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left">
<a href = "#" class = "back link">
<i class = "icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class = "center sliding">My Blog</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel">
<i class = "icon icon-bars"></i>
</a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "blog" class = "page">
<div class = "page-content">
<div class = "content-block">
<h2>My Blog</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</div>उत्पादन
ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -
ऊपर दिए गए HTML कोड को इस तरह सेव करें framework7_environment.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/framework7_environment.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
जब आप नेविगेशन बार पर क्लिक करते हैं, तो यह अनुकूलित संदेश के साथ अलर्ट बॉक्स प्रदर्शित करेगा।
विवरण
फ्रेमवर्क 7 आपके आवेदन के लिए विभिन्न प्रकार के लेआउट प्रदान करता है। यह तीन प्रकार के नवबार / टूलबार लेआउट का समर्थन करता है -
| S.No | लेआउट प्रकार और विवरण |
|---|---|
| 1 | स्टेटिक लेआउट स्टेटिक लेआउट सबसे अधिक बार लेआउट-प्रकार का उपयोग किया जाता है और इसमें नावबार और टूलबार शामिल होते हैं, जो एक स्क्रॉल करने योग्य पृष्ठ सामग्री हो सकती है और प्रत्येक पृष्ठ में अपना स्वयं का नावबार और टूलबार होता है। |
| 2 | फिक्स्ड लेआउट फिक्स्ड लेआउट में अपना स्वयं का नावबार और टूलबार शामिल है, जो स्क्रीन पर दिखाई दे सकता है और पेज पर स्क्रॉल नहीं किया जा सकता है। |
| 3 | लेआउट के माध्यम से इस लेआउट में, नावबार और टूलबार एकल दृश्य के भीतर सभी पृष्ठों के लिए निश्चित दिखाई देता है। |
| 4 | मिश्रित लेआउट आप एकल दृश्य में विभिन्न प्रकार के लेआउट को मिला सकते हैं। |
नो नवबार / टूलबार
यदि आप नावबार और टूलबार का उपयोग नहीं करना चाहते हैं, तो पृष्ठ / पृष्ठ / दृश्य के लिए उपयुक्त कक्षाएं ( नावबार-फिक्स्ड , नावबार-थ्रू , टूलबार-फिक्स्ड , टूलबार-थ्रू ) शामिल न करें।
विवरण
इस अध्याय में, हम नौबत के बारे में अध्ययन करते हैं । यह आमतौर पर एक स्क्रीन के शीर्ष पर रखा जाता है जिसमें पृष्ठ और नेविगेशन तत्वों का शीर्षक होता है।
नवबार में तीन भाग होते हैं जिनमें से प्रत्येक में कोई HTML सामग्री हो सकती है, लेकिन यह सुझाव दिया जाता है कि आप नीचे दिए गए तरीके से इनका उपयोग करें -
Left- इसे बैक लिंक आइकन या सिंगल टेक्स्ट लिंक लगाने के लिए डिज़ाइन किया गया है ।
Center - इसका उपयोग पेज या टैब लिंक का शीर्षक प्रदर्शित करने के लिए किया जाता है।
Right- यह हिस्सा बाएं हिस्से के समान है ।
निम्नलिखित तालिका में विस्तार से नावबार के उपयोग को प्रदर्शित किया गया है -
| S.No | नवबार प्रकार और विवरण |
|---|---|
| 1 | बेसिक नावबार नौसर , नेवबर-इनर , लेफ्ट , सेंटर और राइट क्लासेस का उपयोग करके एक बेसिक नेवबार बनाया जा सकता है । |
| 2 | लिंक के साथ नवबार अपने नावबार के बाएं और दाएं हिस्से में लिंक का उपयोग करने के लिए , बस कक्षा लिंक के साथ <a> टैग जोड़ें । |
| 3 | कई लिंक एकाधिक लिंक का उपयोग करने के लिए, बस कुछ और <a class = "link"> अपनी पसंद के हिस्से में जोड़ें। |
| 4 | टेक्स्ट और आइकन के साथ लिंक लिंक आइकन और ग्रंथों के साथ प्रदान किए जा सकते हैं आइकन के लिए कक्षाएं जोड़कर और लिंक पाठ को <span> तत्व के साथ लपेटकर । |
| 5 | केवल आइकन के साथ लिंक केवल लिंक के लिए आइकन-ओनली क्लास को जोड़कर केवल आइकन के साथ नवबार लिंक दिए जा सकते हैं । |
| 6 | संबंधित ऐप और देखने के तरीके व्यू को इनिशियलाइज़ करने पर , फ्रेमवर्क 7 आपको नेवबार के लिए उपलब्ध तरीकों का उपयोग करने की अनुमति देता है। |
| 7 | नावबार को अपने आप छिपाएं कुछ अजाक्स लोड किए गए पृष्ठों के लिए नावबार को छिपाया / दिखाया जा सकता है, जहाँ नावबार की आवश्यकता नहीं होती है। |
विवरण
टूलबार स्क्रीन के नीचे नेविगेशन तत्वों का उपयोग करके अन्य पृष्ठों तक आसान पहुँच प्रदान करता है।
आप टूलबार का उपयोग तालिका में निर्दिष्ट दो तरीकों से कर सकते हैं -
| S.No | टूलबार प्रकार और विवरण |
|---|---|
| 1 | उपकरण पट्टी छिपाओ जब आप पृष्ठों को लोड करके अपने आप टूलबार को छिपा सकते हैं no-toolbar लोड पेज पर कक्षा। |
| 2 | नीचे टूलबार टूलबार को पृष्ठ के निचले भाग में स्थित करके रखें toolbar-bottom कक्षा। |
टूलबार के तरीके
निम्न उपलब्ध विधियों का उपयोग टूलबार के साथ किया जा सकता है -
| S.No | टूलबार के तरीके और विवरण |
|---|---|
| 1 | myApp.hideToolbar(toolbar) यह निर्दिष्ट टूलबार को छुपाता है। |
| 2 | myApp.showToolbar(toolbar) यह निर्दिष्ट टूलबार दिखाता है। |
| 3 | view.hideToolbar() यह दृश्य में निर्दिष्ट टूलबार को छुपाता है। |
| 4 | view.showToolbar() यह दृश्य में निर्दिष्ट टूलबार दिखाता है। |
उदाहरण
निम्न उदाहरण फ्रेमवर्क 7 में टूलबार लेआउट के उपयोग को दर्शाता है।
सबसे पहले, हम एक HTML पेज बनाएंगे, जिसका नाम है toolbar.html जैसा कि नीचे दिखाया गया है -
<!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>Toolbar 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 = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Toolbar Layout</div>
</div>
</div>
<div class = "pages navbar-through">
<div data-page = "index" class = "page with-subnavbar">
<div class = "page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean
sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur.
Sed posuere a orci id imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean
sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur.
Sed posuere a orci id imperdiet.</p>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">Link 1</a>
<a href = "#" class = "link">Link 2</a>
<a href = "#" class = "link">Link 3</a>
</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>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view
dynamicNavbar: true
});
</script>
</body>
</html>अब, कस्टम जेएस फ़ाइल में अपने ऐप और विचारों को इनिशियलाइज़ करें toolbar.js।
उत्पादन
ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -
ऊपर दिए गए HTML कोड को इस प्रकार सेव करें toolbar.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/toolbar.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
विवरण
फ़्रेमवर्क 7 खोजकर्ता वर्ग का उपयोग करके तत्वों को खोजने की अनुमति देता है ।
बार पैरामीटर्स खोजें
| S.No | पैरामीटर और विवरण | प्रकार | चूक |
|---|---|---|---|
| 1 | searchList यह सूची के CSS चयनकर्ता या HTML तत्व को खोजता है। |
स्ट्रिंग या HTML तत्व | - |
| 2 | searchIn आप सीएसएस चयनकर्ताओं के सूची दृश्य तत्वों को खोज सकते हैं, .item-title , .item-text कक्षाओं को पास करके भी तत्वों को खोजते हैं। |
तार | '।मद शीर्षक' |
| 3 | found यह "पाया" तत्व का उपयोग करके सीएसएस चयनकर्ता या HTML तत्व को खोजता है। यदि कोई तत्व निर्दिष्ट नहीं है , तो आगे, यह .searchbar-पाया तत्व का उपयोग करता है। |
स्ट्रिंग या HTML तत्व | - |
| 4 | notfound यह सीएसएस चयनकर्ता या 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 के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
यदि सूची में शामिल तत्व को खोज बार में दर्ज किया गया है, तो यह सूची से उस विशेष तत्व को प्रदर्शित करता है।
यदि सूची में शामिल तत्वों के अलावा अन्य तत्व दर्ज किया गया है, तो यह कोई तत्व नहीं मिला है।
विवरण
IOS 7+ आपको पूर्ण स्क्रीन ऐप बनाने की अनुमति देता है जो आपकी स्थिति बार आपके ऐप को ओवरलैप करने पर समस्या पैदा कर सकता है। फ्रेमवर्क 7 इस समस्या का पता लगाकर बताता है कि आपका ऐप फुल स्क्रीन मोड में है या नहीं। यदि आपका ऐप पूर्ण स्क्रीन मोड में है, तो फ्रेमवर्क 7 स्वचालित रूप से < -html-overlay- class के साथ <html> जोड़ देगा (या हटाता है यदि ऐप पूर्ण स्क्रीन मोड में नहीं है) और आपको <body> में statusbar-overlay class जोड़ने की आवश्यकता है जैसा कि निम्नलिखित कोड में दिखाया गया है -
<html class = "with-statusbar-overlay">
...
<body>
<div class = "statusbar-overlay"></div>
...डिफ़ॉल्ट रूप से, <div> आपकी स्क्रीन के शीर्ष पर हमेशा छिपा और तय किया जाएगा। यह तभी दिखाई देगा जब ऐप फुल स्क्रीन मोड में हो और <-html> में स्टेटसबार-ओवरले क्लास जुड़ जाए ।
उदाहरण
निम्न उदाहरण फ्रेमवर्क 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>My App</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 = "statusbar-overlay"></div>
<div class = "panel-overlay"></div>
<div class = "panel panel-right panel-reveal">
<div class = "content-block">
<p>Contents goes here...</p>
</div>
</div>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">My App</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"><i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<p>This is simple application...</p>
<p>page contents goes here!!!</p>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">First Link</a>
<a href = "#" class = "link">Second Link</a>
</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>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
//use the 'pageInit' event handler for all pages
$$(document).on('pageInit', function (e) {
//get page data from event data
var page = e.detail.page;
})
</script>
</body>
</html>उत्पादन
ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -
ऊपर दिए गए HTML कोड को इस प्रकार सेव करें status_bar.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/status_bar.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
उदाहरण के उपयोग को दर्शाता है statusbar-overlay, जो आपकी स्थिति पट्टी ओवरलैप होने पर आपको पूर्ण स्क्रीन ऐप बनाने की अनुमति देता है।
विवरण
साइड पैनल स्क्रीन के बाईं या दाईं ओर करने के लिए ले जाता है सामग्री प्रदर्शित करने के। फ्रेमवर्क 7 आपको अपने ऐप में 2 पैनल (राइट साइड पैनल और लेफ्ट साइड पैनल) तक शामिल करने की अनुमति देता है। आपको <body> की शुरुआत में पैनल जोड़ने की जरूरत है और फिर निम्न सूचीबद्ध कक्षाओं को लागू करके प्रारंभिक प्रभाव का चयन करें -
panel-reveal - इससे पूरे ऐप का कंटेंट हट जाएगा।
panel-cover - इससे ऐप के कंटेंट पर पैनल ओवरले हो जाएगा।
उदाहरण के लिए, निम्न कोड दिखाता है कि उपरोक्त वर्गों का उपयोग कैसे किया जाता है -
<body>
<!-- First add Panel's overlay which will overlays app while panel is opened -->
<div class = "panel-overlay"></div>
<!-- Left panel -->
<div class = "panel panel-left panel-cover">
panel's content
</div>
<!-- Right panel -->
<div class = "panel panel-right panel-reveal">
panel's content
</div>
</body>निम्न तालिका फ्रेमवर्क77 द्वारा समर्थित पैनल प्रकारों को दिखाती है -
| S.No | टाइप और विवरण |
|---|---|
| 1 | पैनलों को खोलें और बंद करें एक बार जब आप पैनल और प्रभाव जोड़ते हैं, तो हमें पैनलों को खोलने और बंद करने के लिए कार्यक्षमता जोड़ने की आवश्यकता होती है । |
| 2 | पैनल इवेंट यह पता लगाने के लिए कि उपयोगकर्ता पैनल के साथ कैसे इंटरैक्ट करता है, आप पैनल इवेंट का उपयोग कर सकते हैं। |
| 3 | स्वाइप के साथ पैनल्स खोलें फ्रेमवर्क 7 आपको स्वाइप जेस्चर के साथ पैनल खोलने की सुविधा प्रदान करता है । |
| 4 | पैनल खोला है? हम यह निर्धारित कर सकते हैं कि पैनल का उपयोग करके खोला गया है या नहीं with-panel[position]-[effect] राज करते हैं। |
विवरण
कंटेंट ब्लॉक का उपयोग विभिन्न प्रारूप के साथ अतिरिक्त सामग्री जोड़ने के लिए किया जा सकता है।
उदाहरण
निम्न उदाहरण फ्रेमवर्क 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>Content Block</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">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Content Block</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<p>This is out side of content block!!!</p>
<div class = "content-block">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class = "content-block">
<div class = "content-block-inner">This is another text block wrapped with "content-block-inner"</div>
</div>
<div class = "content-block-title">Content Block Title</div>
<div class = "content-block">
<p>Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur
magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales.
Integer blandit varius nisi quis consectetur.</p>
</div>
<div class = "content-block-title">This is another long content block title</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class = "content-block-title">Content Block Inset</div>
<div class = "content-block inset">
<div class = "content-block-inner">
<p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,
vulputate turpis vel, sagittis felis. </p>
</div>
</div>
<div class = "content-block-title">Content Block Tablet Inset</div>
<div class = "content-block tablet-inset">
<div class = "content-block-inner">
<p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,
vulputate turpis vel, sagittis felis. </p>
</div>
</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 कोड को इस प्रकार सेव करें content_block.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/content_block.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
कोड पाठ सामग्री के लिए अतिरिक्त स्वरूपण और आवश्यक रिक्ति जोड़ता है।
विवरण
फ़्रेमवर्क 7 सामग्री को उपयोगकर्ता की आवश्यकता के अनुसार रखने के लिए विभिन्न प्रकार के ग्रिड प्रकार प्रदान करता है।
निम्न तालिका में वर्णित लेआउट ग्रिड विभिन्न प्रकार के कॉलम आकार प्रदान करता है -
| S.No | कक्षा | टेबल क्लास | चौड़ाई |
|---|---|---|---|
| 1 | col-5 | गोली-5 | 5% |
| 2 | col-10 | गोली-10 | 10% |
| 3 | col-15 | गोली-15 | 15% |
| 4 | कॉल-20 | गोली-20 | 20% |
| 5 | कॉल-25 | गोली-25 | 25% |
| 6 | col-30 | गोली-30 | 30% |
| 7 | col-33 | गोली-33 | 33.3% |
| 8 | col-35 | गोली-35 | 35% |
| 9 | col-40 | गोली-40 | 40% |
| 10 | col-45 | गोली-45 | 45% |
| 1 1 | col-50 | गोली-50 | 50% |
| 12 | col-55 | गोली-55 | 55% |
| 13 | कॉल-60 | गोली-60 | 60% |
| 14 | col-65 | गोली-65 | 65% |
| 15 | col-66 | गोली-66 | 66.6% |
| 16 | col-70 | गोली-70 | 70% |
| 17 | col-75 | गोली-75 | 75% |
| 18 | col-80 | गोली-80 | 80% |
| 19 | कॉल-85 | गोली -85 | 85% |
| 20 | col-90 | गोली-90 | 90% |
| 21 | col-95 | गोली-95 | 95% |
| 21 | col-100 | गोली-100 | 100% |
| 22 | कॉल-ऑटो | गोली-ऑटो | समान चौड़ाई |
उदाहरण
निम्न उदाहरण अपनी सामग्री को रखने के लिए ग्रिड लेआउट प्रदान करता है जैसा कि आपको फ्रेमवर्क 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>Layout Grid</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" />
<style>
div[class* = "col-"] {
background: #fff;
text-align: center;
color: #000;
border: 1px solid #D8D8D8;
}
.row {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Layout Grid</div>
</div>
</div>
<div class = "pages">
<div data-page = "index" class = "page navbar-fixed">
<div class = "page-content">
<div class = "content-block-title">Columns with gutter</div>
<div class = "content-block">
<div class = "row">
<div class = "col-50">col 1</div>
<div class = "col-50">col 2</div>
</div>
<div class = "row">
<div class = "col-25">col 1</div>
<div class = "col-25">col 2</div>
<div class = "col-25">col 3</div>
<div class = "col-25">col 4</div>
</div>
<div class = "row">
<div class = "col-33">col 1</div>
<div class = "col-33">col 2</div>
<div class = "col-33">col 3</div>
</div>
<div class = "content-block-title">Columns without gutter</div>
<div class = "content-block">
<div class = "row no-gutter">
<div class = "col-50">col 1</div>
<div class = "col-50">col 2</div>
</div>
<div class = "row no-gutter">
<div class = "col-25">col 1</div>
<div class = "col-25">col 2</div>
<div class = "col-25">col 3</div>
<div class = "col-25">col 4</div>
</div>
<div class = "row no-gutter">
<div class = "col-33">col 1</div>
<div class = "col-33">col 2</div>
<div class = "col-33">col 3</div>
</div>
</div>
<div class = "content-block-title">Nested Columns</div>
<div class = "content-block">
<div class = "row">
<div class = "col-50">
col 1
<div class = "row">
<div class = "col-40">col 2</div>
<div class = "col-60">col 3</div>
</div>
</div>
<div class = "col-50">
col 1
<div class = "row">
<div class = "col-75">col 2</div>
<div class = "col-25">col 3</div>
</div>
</div>
</div>
</div>
<div class = "content-block-title">Columns With Different Equal Width</div>
<div class = "content-block">
<div class = "row">
<div class = "col-100 tablet-50">col 1</div>
<div class = "col-100 tablet-50">col 2</div>
</div>
<div class = "row">
<div class = "col-50 tablet-25">col 1</div>
<div class = "col-50 tablet-25">col 2</div>
<div class = "col-50 tablet-25">col 3</div>
<div class = "col-50 tablet-25">col 4</div>
</div>
<div class = "row">
<div class = "col-100 tablet-40">col 1</div>
<div class = "col-50 tablet-60">col 2</div>
<div class = "col-50 tablet-60">col 3</div>
<div class = "col-100 tablet-40">col 4</div>
</div>
</div>
<div class = "content-block-title">Columns With Equal Width</div>
<div class = "content-block">
<div class = "row">
<div class = "col-auto">col-1</div>
<div class = "col-auto">col-2</div>
<div class = "col-auto">col-3</div>
<div class = "col-auto">col-4</div>
</div>
<div class = "row no-gutter">
<div class = "col-auto">col-1</div>
<div class = "col-auto">col-2</div>
<div class = "col-auto">col-3</div>
<div class = "col-auto">col-4</div>
</div>
</div>
</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 कोड को इस प्रकार सेव करें layout_grid.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/layout_grid.html के रूप में खोलें। आउटपुट नीचे दिखाए गए अनुसार प्रदर्शित किया गया है।
यह कोड सामग्री को उपयोगकर्ता की आवश्यकता के अनुसार रखने के लिए विभिन्न प्रकार के ग्रिड प्रकार प्रदान करता है।
विवरण
फ्रेमवर्क 7 अनुप्रयोगों को सुचारू रूप से काम करने के लिए विभिन्न प्रकार के ओवरले प्रदान करता है। निम्न तालिका के कुछ फ्रेमवर्क 7 को सूचीबद्ध करता है -
| S.No | ओवरले प्रकार और विवरण |
|---|---|
| 1 | मॉडल मोडल एक छोटी सी खिड़की होती है, जो अलग-अलग स्रोतों से सामग्री को मूल विंडो को छोड़े बिना प्रदर्शित करती है। |
| 2 | पॉप अप पॉपअप एक पॉपअप बॉक्स है जो उस तत्व को प्रदर्शित करता है जब उपयोगकर्ता तत्व पर क्लिक करता है। |
| 3 | पॉप खत्म अस्थायी सामग्री की प्रस्तुति का प्रबंधन करने के लिए, पॉपओवर घटक का उपयोग किया जा सकता है। |
| 4 | एक्शन शीट कार्रवाई शीट कैसे दिए गए कार्य को संभालने के लिए के लिए संभावनाओं का एक सेट के साथ उपयोगकर्ता पेश करने के लिए प्रयोग किया जाता है। |
| 5 | प्रवेश पट ओवरले लॉगिन स्क्रीन का उपयोग लॉगिन स्क्रीन प्रारूप प्रदर्शित करने के लिए किया जाता है जिसका उपयोग पृष्ठ या पॉपअप में या स्टैंडअलोन ओवरले के रूप में किया जा सकता है। |
| 6 | पिकर मोडल पिकर मोडल का उपयोग कुछ कस्टम सामग्री को चुनने के लिए किया जाता है जो कैलंडर पिकर के समान होती है। |
विवरण
फ्रेमवर्क 7 में प्रीलोडर स्केलेबल वेक्टर ग्राफिक (एसवीजी) के साथ बनाया गया है और सीएसएस के साथ एनिमेटेड है, जो इसे आसानी से बदलने योग्य बनाता है। प्रीलोडर दो रंगों में उपलब्ध है -
- डिफ़ॉल्ट प्रकाश पृष्ठभूमि है
- एक और एक अंधेरे पृष्ठभूमि है
आप नीचे दिखाए गए अनुसार अपने HTML में प्रीलोडर क्लास का उपयोग कर सकते हैं -
उदाहरण
निम्नलिखित उदाहरण फ्रेमवर्क 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>Panel Events</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">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Framework7 Preloader</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block row">
<div class = "col-25"><span class = "preloader"></span><br>Default Preloader</div>
<div class = "col-25 col-dark"><span class = "preloader preloader-white"></span><br>White Preloader</div>
<div class = "col-25"><span style = "width:42px; height:42px" class = "preloader"></span><br>Big Preloader</div>
<div class = "col-25 col-dark"><span style = "width:42px; height:42px" class = "preloader preloader-white"></span><br>White Preloader</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>.col-25{padding:5px;text-align:center;}.col-dark{background:#222;}</style>
<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();
</script>
</body>
</html>उत्पादन
ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -
ऊपर दिए गए HTML कोड को इस प्रकार सेव करें preloader.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/preloader.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
यह कोड प्रीलोडर संकेतक को प्रदर्शित करता है, जो SVG के साथ और CSS के साथ एनिमेटेड होता है।
विवरण
प्रगति पट्टियों का उपयोग उपयोगकर्ताओं को संपत्ति की लोडिंग या किसी कार्य की प्रगति दिखाने के लिए किया जा सकता है। आप का उपयोग करके प्रगति बार निर्दिष्ट कर सकते हैं प्रगतिबार वर्ग। जब उपयोगकर्ता को यह नहीं पता होता है कि अनुरोध के लिए लोडिंग प्रक्रिया कितने समय तक रहेगी, तो आप प्रगति-अनंत वर्ग का उपयोग कर सकते हैं ।
प्रगति बार जावास्क्रिप्ट एपीआई
निम्नलिखित तरीकों का उपयोग करके शो , छिपाने और प्रगति गुणों को निर्दिष्ट करने के लिए जावास्क्रिप्ट एपीआई के साथ प्रगति पट्टी का उपयोग किया जा सकता है -
| S.No | तरीकों | विवरण और पैरामीटर |
|---|---|---|
| 1 | myApp.setProgressbar (container , progress, speed) | यह किसी कार्य की प्रगति के लिए प्रगति पट्टी सेट करता है।
|
| 2 | myApp.hideProgressbar (contain er) | यह प्रगति पट्टी को छुपाता है।
|
| 3 | myApp.showProgressbar (contai ner, progress, color) | यह प्रगति पट्टी प्रदर्शित करता है।
|
उदाहरण
निम्नलिखित उदाहरण फ्रेमवर्क 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>Progress Bar</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" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">Progress Bar</div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Determinate Progress Bar</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Inline determinate progress bar:</p>
<div class = "progressbar-inline">
<p><span data-progress = "10" class = "progressbar"></span></p>
<p class = "buttons-row">
<a href = "#" data-progress = "25" class = "button button-raised">25%</a>
<a href = "#" data-progress = "50" class = "button button-raised">50%</a>
<a href = "#" data-progress = "75" class = "button button-raised">75%</a>
<a href = "#" data-progress = "100" class = "button button-raised">100%</a>
</p>
</div>
<p>Loads and hides the determinate progress bar:</p>
<div class = "progressbar-load-hide">
<p><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
<p>Displays the determinate progress bar on top:</p>
<p class = "progressbar-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
</div>
<div class = "content-block-title">Infinite Progress Bar</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Inline infinite progress bar:</p>
<p><span class = "progressbar-infinite"></span></p>
<p>Displays the infinite progress bar in multiple colors:</p>
<p><span class = "progressbar-infinite color-multi"></span></p>
<p>Displays the infinite progress bar on top:</p>
<p class = "progressbar-infinite-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
<p>Displays the infinite progress bar in multiple colors on top:</p>
<p class = "progressbar-infinite-multi-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
</div>
<div class = "content-block-title">Different types of colored progress bars:</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "5" class = "progressbar color-red"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "10" class = "progressbar color-pink"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "20" class = "progressbar color-deeppurple"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "30" class = "progressbar color-blue"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "40" class = "progressbar color-cyan"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "50" class = "progressbar color-green"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "60" class = "progressbar color-lime"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "70" class = "progressbar color-amber"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "80" class = "progressbar color-deeporange"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "90" class = "progressbar color-gray"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "100" class = "progressbar color-black"></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({
material: true
});
var $$ = Dom7;
$$('.progressbar-inline .button').on('click', function () {
var progress = $$(this).attr('data-progress');
var progressbar = $$('.progressbar-inline .progressbar');
myApp.setProgressbar(progressbar, progress);
});
$$('.progressbar-load-hide .button').on('click', function () {
var container = $$('.progressbar-load-hide p:first-child');
//it doesn't load if another progresbar is loading
if (container.children('.progressbar').length) return;
myApp.showProgressbar(container, 0);
var progress = 0;
function simulateLoading() {
setTimeout(function () {
var progressBefore = progress;
progress += Math.random() * 20;
myApp.setProgressbar(container, progress);
if (progressBefore < 100) {
simulateLoading();
}
else myApp.hideProgressbar(container);
}, Math.random() * 200 + 200);
}
simulateLoading();
});
$$('.progressbar-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 0, 'orange');
var progress = 0;
function simulateLoading() {
setTimeout(function () {
var progressBefore = progress;
progress += Math.random() * 20;
myApp.setProgressbar(container, progress);
if (progressBefore < 100) {
simulateLoading();
}
//hides the progressbar
else myApp.hideProgressbar(container);
}, Math.random() * 200 + 200);
}
simulateLoading();
});
$$('.progressbar-infinite-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 'yellow');
setTimeout(function () {
myApp.hideProgressbar();
}, 3000);
});
$$('.progressbar-infinite-multi-overlay .button').on('click', function () {
var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 'multi');
setTimeout(function () {
myApp.hideProgressbar();
}, 3000);
});
</script>
</body>
</html>उत्पादन
ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -
ऊपर दिए गए HTML कोड को इस प्रकार सेव करें progress_bar.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/progress_bar.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
उदाहरण प्रगति पट्टी प्रदर्शित करता है, जो इंगित करता है कि प्रक्रिया को पूरा करने में कितना समय लगेगा और गतिविधि को इंगित करने के लिए विभिन्न प्रकार के प्रगति सलाखों को प्रदर्शित करता है।
विवरण
सूची दृश्य शक्तिशाली यूआई घटक हैं जो डेटा को कई पंक्तियों की स्क्रॉल करने योग्य सूची में प्रस्तुत करते हैं। फ्रेमवर्क 7 आपके आवेदन के साथ काम करने के लिए विभिन्न प्रकार की सूची दृश्य प्रदान करता है । निम्न तालिका के कुछ सूची 7 सूची दृश्य -
| S.No | प्रकार और विवरण |
|---|---|
| 1 | सूची दृश्य सूची दृश्य शक्तिशाली उपयोगकर्ता इंटरफ़ेस घटक हैं, जो स्क्रॉल करने योग्य सूची में डेटा को कई पंक्तियों में प्रस्तुत करते हैं। |
| 2 | संपर्क सूची संपर्क सूची एक प्रकार का सूची दृश्य है, जिसका उपयोग लोगों के संपर्कों की सूची प्रदर्शित करने के लिए किया जा सकता है। |
| 3 | मीडिया सूची देखें मीडिया सूची दृश्य का उपयोग उत्पादों, सेवाओं, उपयोगकर्ताओं की जानकारी जैसी जटिल डेटा संरचनाओं को प्रदर्शित करने के लिए किया जाता है। |
| 4 | Swipeout Swipeout आप सूची तत्वों के ऊपर की ओर स्वाइप करके छिपा मेनू कार्यों प्रकट करने के लिए अनुमति देता है। |
| 5 | क्रमबद्ध सूची सॉर्ट करने योग्य सूची एक प्रकार का सूची दृश्य है, जो सूची दृश्य तत्वों को क्रमबद्ध करता है। |
| 6 | आभासी सूची वर्चुअल सूची एक प्रकार का सूची दृश्य है, जिसमें बड़ी संख्या में डेटा तत्वों की सूची शामिल होती है, जिसमें उनके प्रदर्शन को गिराए बिना। |
विवरण
अकॉर्डियन एक ग्राफिकल कंट्रोल एलिमेंट है जो आइटम की स्टैक्ड लिस्ट के रूप में प्रदर्शित होता है। प्रत्येक समझौते को उस समझौते से जुड़ी सामग्री को प्रकट करने के लिए विस्तारित या बढ़ाया जा सकता है ।
बंधनेवाला लेआउट
जब आप एकल पृथक बंधनेवाला तत्व का उपयोग कर रहे हैं, तो आपको समझौते-सूची आवरण तत्व को छोड़ना होगा ।
निम्नलिखित संक्षिप्त लेआउट की एक संरचना है -
<!-- Single collapsible element ------>
<div class = "accordion-item">
<div class = "accordion-item-toggle"></div>
<div class = "accordion-item-content"></div>
</div>
<!-- Separate collapsible element -->
<div class = "accordion-item">
<div class = "accordion-item-toggle"></div>
<div class = "accordion-item-content"></div>
</div>निम्न वर्गों को फ्रेमवर्क 7 में समझौते के लिए उपयोग किया जाता है -
| S.No | कक्षाएं और विवरण |
|---|---|
| 1 | accordion-list यह एक वैकल्पिक वर्ग है, जिसमें अकॉर्डियन आइटम सूची का एक समूह होता है। |
| 2 | accordion-item एकल एकल आइटम के लिए यह एक आवश्यक वर्ग है। |
| 3 | accordion-item-toggle यह एक आवश्यक वर्ग है जिसका उपयोग समझौते की सामग्री का विस्तार करने के लिए किया जाता है। |
| 4 | accordion-item-content यह एक आवश्यक वर्ग है जिसका उपयोग छिपी हुई मद सामग्री के लिए किया जाता है। |
| 5 | accordion-item-expanded यह एकल विस्तारित समझौता आइटम है। |
अकॉर्डियन जावास्क्रिप्ट एपीआई
जावास्क्रिप्ट एपीआई तरीकों का उपयोग प्रोग्राम को प्रोग्रामेटिक रूप से खोलने और बंद करने के लिए किया जाता है।
इसमें निम्नलिखित जावास्क्रिप्ट एपीआई विधियाँ शामिल हैं -
myApp.accordionOpen(item) - अकॉर्डिंग खोलने के लिए इस्तेमाल किया जाता है।
myApp.accordionClose(item) - बंद करने के लिए इस्तेमाल किया।
myApp.accordionToggle(item) - अकॉर्डिंग टॉगल करते थे।
सभी विधियों में पैरामीटर नामक आइटम होता है जो कि HTML या स्ट्रिंग एलिमेंट-आइटम है।
अकॉर्डियन इवेंट्स
निम्नलिखित तालिका में सूचीबद्ध के रूप में चार घटनाएँ शामिल हैं -
| S.No | प्रतिस्पर्धा | लक्ष्य और विवरण |
|---|---|---|
| 1 | खुला हुआ | Accordion item जब आप एक एनीमेशन खोलते हैं, तो यह घटना निकाल दी जाएगी। |
| 2 | खुल गया | Accordion item जब एक एनीमेशन का उद्घाटन पूरा हो जाता है, तो यह घटना निकाल दी जाएगी। |
| 3 | बंद करे | Accordion item जब आप किसी एनीमेशन को बंद करते हैं, तो यह ईवेंट फ़ायर हो जाएगा। |
| 4 | बन्द है | Accordion item जब एक एनीमेशन का समापन पूरा हो जाता है, तो यह घटना निकाल दी जाएगी। |
अकॉर्डियन सूची दृश्य
Accordion सूची दृश्य में, आप accordion-toggle के बजाय आइटम-लिंक तत्व का उपयोग कर सकते हैं ।
<div class = "list-block accordion-list">
<ul>
<li class = "accordion-item">
<a href = "" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title">1st Item</div>
</div>
</a>
<div class = "accordion-item-content">Content for 1st Item...</div>
</li>
<li class = "accordion-item">
<a href = "" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title">2nd Item</div>
</div>
</a>
<div class = "accordion-item-content">Content for 2nd Item...</div>
</li>
</ul>
</div>उदाहरण
निम्नलिखित उदाहरण फ्रेमवर्क 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>Accordion</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">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"> </div>
<div class="center">Accordion</div>
<div class="right"> </div>
</div>
</div>
<div class="page-content">
<div class="content-block-title">List of Programming Lagauges</div>
<div class="list-block accordion-list">
<ul>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C++</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Java</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block-title">Separate Collapsibles</div>
<div class="list-block">
<ul>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p >C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C++</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Java</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block-title">Custom Accordion</div>
<div class="content-block accordion-list custom-accordion">
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C</span></div>
<div class="accordion-item-content">
<p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C++</span></div>
<div class="accordion-item-content">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>Java</span></div>
<div class="accordion-item-content">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</div>
</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>
<style>.custom-accordion{padding-left:0;padding-right:0;}.custom-accordion .accordion-item-toggle{padding:0px 15px;height:44px;line-height:44px;font-size:17px;color:#000;border-bottom:1px solid rgba(0,0,0,0.15);cursor:pointer;}.custom-accordion .accordion-item-toggle:active{background:rgba(0,0,0,0.15);}.custom-accordion .accordion-item-toggle span{display:inline-block;margin-left:15px;}.custom-accordion .accordion-item:last-child .accordion-item-toggle{border-bottom:none;}.custom-accordion .icon-plus,.custom-accordion .icon-minus{display:inline-block;width:22px;height:22px;border:1px solid #000;border-radius:100%;line-height:20px;text-align:center;}.custom-accordion .icon-minus{display:none;}.custom-accordion .accordion-item-expanded .icon-minus{display:inline-block;}.custom-accordion .accordion-item-expanded .icon-plus{display:none;}.custom-accordion .accordion-item-content{padding:0px 15px;}</style>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
</script>
</body>
</html>उत्पादन
ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -
ऊपर दिए गए HTML कोड को इस प्रकार सेव करें accordion.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/accordion.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
उदाहरण, बंधनेवाला लेआउट प्रदान करता है, जिसे समझौते से जुड़ी सामग्री को प्रदर्शित करने के लिए विस्तारित किया जा सकता है।
विवरण
कार्ड में एक ही विषय जैसे फोटो, लिंक और टेक्स्ट से संबंधित संगठित जानकारी होती है। निम्न तालिका फ्रेमवर्क 7 कार्ड प्रकारों को दिखाती है -
| S.No | प्रकार और विवरण |
|---|---|
| 1 | कार्ड HTML लेआउट मूल कार्ड एचटीएमएल लेआउट अपने आइटम को व्यवस्थित करने के लिए कार्ड कक्षाओं का उपयोग करता है। |
| 2 | कार्ड के साथ सूची देखें आप उपयोग कर सकते हैं कार्ड जोड़कर सूची दृश्य तत्व के रूप में कार्ड की सूची के लिए कक्षा <div class = "सूची ब्लॉक"> । |
विवरण
चिप इकाई का एक छोटा सा ब्लॉक है, जिसमें एक फोटो, शीर्षक की छोटी स्ट्रिंग और छोटी जानकारी हो सकती है।
चिप्स HTML लेआउट
निम्न कोड फ्रेमवर्क 7 में प्रयुक्त मूल चिप HTML लेआउट को दर्शाता है -
<div class = "chip">
<div class = "chip-media">
<img src = "http://lorempixel.com/100/100/people/9/">
</div>
<div class = "chip-label">Jane Doe</div>
<a href = "#" class = "chip-delete"></a>
</div>उपरोक्त HTML लेआउट में नीचे सूचीबद्ध कई वर्ग हैं -
chips - यह चिप कंटेनर है।
chip-media- यह चिप मीडिया तत्व है जिसमें चित्र, अवतार या आइकन हो सकते हैं। यह वैकल्पिक है।
card-label - यह चिप टेक्स्ट लेबल है।
card-delete - यह एक चिप का वैकल्पिक डिलीट आइकन लिंक है।
उदाहरण
निम्नलिखित उदाहरण एक फोटो और संक्षिप्त जानकारी के साथ संस्थाओं जैसे एल्बम, कार्ड तत्वों आदि का प्रतिनिधित्व करता है -
<!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>Chips HTML 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" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">Chips HTML Layout</div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Chips With Text</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-label">Chip one</div>
</div>
<div class = "chip">
<div class = "chip-label">Chip two</div>
</div>
</div>
<div class = "content-block-title">Chips with icons</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-media bg-blue"><i class = "icon icon-form-calendar"></i></div>
<div class = "chip-label">Set Date</div>
</div>
<div class = "chip">
<div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>
<div class = "chip-label">Sent Mail</div>
</div>
</div>
<div class = "content-block-title">Contact Chips</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>
<div class = "chip-label">James Willsmith</div>
</div>
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic2.jpg"></div>
<div class = "chip-label">Sunil Narayan</div>
</div>
<div class = "chip">
<div class = "chip-media bg-pink">R</div>
<div class = "chip-label">Raghav</div>
</div>
<div class = "chip">
<div class = "chip-media bg-teal">S</div>
<div class = "chip-label">Sharma</div>
</div>
<div class = "chip">
<div class = "chip-media bg-red">Z</div>
<div class = "chip-label">Zien</div>
</div>
</div>
<div class = "content-block-title">Deletable Chips</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-label">Chip one</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-teal">S</div>
<div class = "chip-label">Sharma</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>
<div class = "chip-label">Sent</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>
<div class = "chip-label">James Willsmith</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-label">Chip two</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-green">R</div>
<div class = "chip-label">Raghav</div>
<a href = "#" class = "chip-delete"></a>
</div>
</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>
<style>
</style>
<script>
var myApp = new Framework7 ({
material: true
});
var $$ = Dom7;
$$('.chip-delete').on('click', function (e) {
e.preventDefault();
var chip = $$(this).parents('.chip');
myApp.confirm('Do you want to delete this Chip?', function () {
chip.remove();
});
});
</script>
</body>
</html>उत्पादन
ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -
ऊपर दिए गए HTML कोड को इस प्रकार सेव करें cards_html_layout.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/cards_html_layout.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
उदाहरण छोटे ब्लॉकों जैसे एल्बम, कार्ड तत्वों, पोस्ट की गई छवि में जटिल संस्थाओं का प्रतिनिधित्व करता है, जिसमें फोटो, शीर्षक स्ट्रिंग और संक्षिप्त जानकारी होती है।
विवरण
फ्रेमवर्क 7 लिंक या इनपुट बटन के लिए उपयुक्त कक्षाओं को जोड़कर बटन का उपयोग करने के लिए तैयार समूह प्रदान करता है।
| S.No | प्रकार और विवरण |
|---|---|
| 1 | आईओएस थीम बटन फ्रेमवर्क 7 कई आईओएस थीम बटन प्रदान करता है, जिसका उपयोग उचित कक्षाएं लगाकर किया जा सकता है। |
| 2 | सामग्री थीम बटन सामग्री विषय उपयुक्त कक्षाओं का उपयोग करके आपके आवेदन में उपयोग करने के लिए कई बटन प्रदान करता है। |
विवरण
फ्रेमवर्क 7 एक प्रचारित कार्रवाई के लिए फ्लोटिंग एक्शन बटन प्रदान करता है। वे UI पर एक फ्लोटिंग सर्किल आइकन के रूप में दिखाई देते हैं। इसमें मोशन बिहेवियर होते हैं जिनमें एंकर पॉइंट को मॉर्फ करना , लॉन्च करना और ट्रांसफर करना शामिल होता है ।
फ्लोटिंग एक्शन बटन केवल मैटेरियल थीम में समर्थित है।
निम्न तालिका फ्रेमवर्क 7 में प्रयुक्त एक्शन बटन प्रकारों को सूचीबद्ध करती है -
| S.No | प्रकार और विवरण |
|---|---|
| 1 | फ़्लोटिंग एक्शन बटन लेआउट यह बहुत ही सरल है; आपको बस इसे पृष्ठ या दृश्य के बच्चे के रूप में रखने की आवश्यकता है । |
| 2 | पॉप अप करने के लिए मॉर्फ यदि आप फ्लोटिंग एक्शन बटन पर क्लिक करके पॉपओवर खोलना चाहते हैं तो फ़्लोटिंग-बटन-टू-पॉपओवर क्लास का उपयोग कर सकते हैं । |
| 3 | स्पीड डायल आप स्पीड डायल का उपयोग करके फ्लोटिंग एक्शन बटन पर क्लिक करके संबंधित क्रियाओं को शुरू कर सकते हैं । |
विवरण
प्रपत्र उपयोगकर्ताओं के साथ बातचीत के लिए उपयोग किए जाते हैं और पाठ फ़ील्ड, चेकबॉक्स, रेडियो बटन आदि का उपयोग करके वेब उपयोगकर्ताओं से डेटा एकत्र करते हैं।
फ्रेमवर्क 7 नीचे दिए गए तालिका में निर्दिष्ट अनुसार सुचारू रूप से अनुप्रयोगों के साथ काम करने के लिए विभिन्न प्रकार के फार्म तत्व प्रदान करता है -
| S.No | ओवरले प्रकार और विवरण |
|---|---|
| 1 | फार्म तत्व अच्छे दिखने वाले फॉर्म लेआउट बनाने के लिए फॉर्म एलिमेंट्स का उपयोग किया जाता है। |
| 2 | चेकबॉक्स और रेडियो सूची दृश्य विस्तार आप Framework7 में चेकबॉक्स और रेडियो आदानों बनाने के लिए अनुमति देता है। |
| 3 | स्मार्ट का चयन करें स्मार्ट सेलेक्ट चेकबॉक्स और रेडियो इनपुट के समूहों का उपयोग करके डायनामिक पेजों में बदलने का आसान तरीका है। |
| 4 | विकलांग तत्व तत्वों को अक्षम वर्ग को तत्व में लागू करने या फार्म तत्व के लिए अक्षम विशेषताओं को जोड़कर अक्षम किया जा सकता है। |
| 5 | प्रपत्र डेटा फ्रेमवर्क 7 में बहुत कम उपयोगी तरीके हैं, जो रूपों के साथ काम करना आसान बनाता है। |
| 6 | फॉर्म स्टोरेज यह फॉर्म स्टोरेज के साथ आसान है और फॉर्म को डेटा को अजाक्स लोड किए गए पेजों पर संग्रहीत करता है। |
| 7 | अजाक्स फॉर्म जमा करें फ्रेमवर्क 7 आपको अजाक्स का उपयोग करके स्वचालित रूप से डेटा भेजने की अनुमति देता है। |
विवरण
टैब तार्किक रूप से समूहीकृत सामग्री के सेट होते हैं जो हमें उनके बीच जल्दी से फ़्लिप करने की अनुमति देते हैं और स्थान की तरह बचाता है।
टैब लेआउट
निम्न कोड टैब के लिए लेआउट को परिभाषित करता है -
<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
<!-- The tab, should have "tab" class and unique id attribute -->
<!-- The tab is active by default - "active" class -->
<div class = "tab active" id = "tab1">
... The content for Tab 1 goes here ...
</div>
<!-- The second tab, should have "tab" class and unique id attribute -->
<div class = "tab" id = "tab2">
... The content for Tab 2 goes here ...
</div>
</div>कहाँ -
<div class = "tabs">- यह सभी टैब के लिए एक आवश्यक आवरण है। यदि हम इसे याद करते हैं, तो टैब बिल्कुल काम नहीं करेंगे।
-
<div class = "tab"> - यह एक एकल टैब है, जो होना चाहिए unique id विशेषता।
-
<div class = "tab active">- यह एक एकल सक्रिय टैब है, जो टैब को दृश्यमान (सक्रिय) बनाने के लिए अतिरिक्त सक्रिय वर्ग का उपयोग करता है ।
टैब के बीच स्विच करना
आप टैब लेआउट में कुछ नियंत्रक का उपयोग कर सकते हैं, ताकि उपयोगकर्ता उनके बीच स्विच कर सके।
इस के लिए, आप के साथ लिंक (<a> टैग) बनाने की जरूरत टैब-लिंक वर्ग और href विशेषता के बराबर आईडी लक्ष्य टैब की विशेषता -
<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1) -->
<a href = "#tab1" class = "tab-link active">Tab 1</a>
<!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2) -->
<a href = "#tab2" class = "tab-link">Tab 2</a>
<a href = "#tab3" class = "tab-link">Tab 3</a>एकाधिक टैब स्विच करें
यदि आप कई टैब के बीच स्विच करने के लिए सिंगल टैब लिंक का उपयोग कर रहे हैं, तो आप आईडी और डेटा-टैब विशेषता का उपयोग करने के बजाय कक्षाओं का उपयोग कर सकते हैं ।
<!-- For Top Tabs -->
<div class = "tabs tabs-top">
<div class = "tab tab1 active">...</div>
<div class = "tab tab2">...</div>
<div class = "tab tab3">...</div>
</div>
<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
<div class = "tab tab1 active">...</div>
<div class = "tab tab2">...</div>
<div class = "tab tab3">...</div>
</div>
<!-- For Tabs links -->
<div class = "tab-links">
<!-- Links are switch top and bottom tabs to .tab1 -->
<a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
<!-- Links are switch top and bottom tabs to .tab2 -->
<a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
<!-- Links are switch top and bottom tabs to .tab3 -->
<a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>टैब-लिंक की डेटा-टैब विशेषता में लक्ष्य टैब / टैब का सीएसएस चयनकर्ता शामिल है।
हम टैब के विभिन्न तरीकों का उपयोग कर सकते हैं, ये निम्नलिखित तालिका में निर्दिष्ट हैं -
| S.No | टैब प्रकार और विवरण |
|---|---|
| 1 | इनलाइन टैब इनलाइन टैब इनलाइन में समूहीकृत के सेट होते हैं जो आपको उनके बीच जल्दी से फ्लिप करने की अनुमति देते हैं। |
| 2 | नब्बर से स्विच टैब हम नेविगेशन बार में टैब रख सकते हैं जो आपको उनके बीच फ्लिप करने की अनुमति देता है। |
| 3 | टैब बार से दृश्य स्विच करें सिंगल टैब का उपयोग अपने स्वयं के नेविगेशन और लेआउट के साथ विचारों के बीच स्विच करने के लिए किया जा सकता है। |
| 4 | एनिमेटेड टैब टैब स्विच करने के लिए आप सरल ट्रांज़िशन (एनीमेशन) का उपयोग कर सकते हैं। |
| 5 | स्वाइप करने योग्य टैब आप टैब के लिए टैब-स्वाइप करने योग्य-रैप क्लास का उपयोग करके सरल संक्रमण के साथ स्वाइप करने योग्य टैब बना सकते हैं । |
| 6 | टैब्स जावास्क्रिप्ट इवेंट्स जब आप टैब के लिए जावास्क्रिप्ट कोड के साथ काम कर रहे हों तो जावास्क्रिप्ट घटनाओं का उपयोग किया जा सकता है। |
| 7 | जावास्क्रिप्ट का उपयोग करके टैब दिखाएं आप जावास्क्रिप्ट विधियों का उपयोग करके टैब को स्विच या दिखा सकते हैं। |
विवरण
Swiper स्लाइडर सबसे शक्तिशाली और आधुनिक टच स्लाइडर है और बहुत सारी विशेषताओं के साथ फ्रेमवर्क 7 में आता है।
निम्नलिखित एचटीएमएल लेआउट में स्विपर स्लाइडर दिखाया गया है -
<!-- Container class for slider -->
<div class = "swiper-container">
<!-- Wrapper class for slider -->
<div class = "swiper-wrapper">
<!-- Slides -->
<div class = "swiper-slide">Slide 1</div>
<div class = "swiper-slide">Slide 2</div>
<div class = "swiper-slide">Slide 3</div>
... other slides ...
</div>
<!-- Define pagination, if it is required -->
<div class = "swiper-pagination"></div>
</div>निम्न वर्ग का उपयोग स्विपर स्लाइडर के लिए किया जाता है -
swiper-container - यह मुख्य स्लाइडर कंटेनर के लिए एक आवश्यक तत्व है और इसका उपयोग स्लाइड और पृष्ठांकन के लिए किया जाता है।
Swiper-wrapper - यह अतिरिक्त आवरण स्लाइड के लिए एक आवश्यक तत्व है।
swiper-slide - यह एक एकल स्लाइड तत्व है और इसमें कोई भी HTML शामिल हो सकता है।
swiper-pagination - यह पैगमेंट की गोलियों के लिए वैकल्पिक है और ये अपने आप बन जाते हैं।
आप अपने संबंधित तरीकों का उपयोग करके जावास्क्रिप्ट के साथ स्वीपर को इनिशियलाइज़ कर सकते हैं -
myApp.swiper(swiperContainer,parameters)या
new Swiper(swiperContainer, parameters)दोनों विधियों का उपयोग स्लाइडर को विकल्पों के साथ आरंभ करने के लिए किया जाता है।
ऊपर दिए गए तरीकों में निम्नलिखित पैरामीटर हैं -
swiperContainer- यह एक स्विपर कंटेनर का HTMLElement या स्ट्रिंग है और इसकी आवश्यकता है।
parameters - ये वैकल्पिक तत्व होते हैं जिनमें स्विपर पैरामीटर के साथ ऑब्जेक्ट होता है।
उदाहरण के लिए -
var mySwiper = app.swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});स्विपर के इंस्टेंस तक पहुंचना संभव है और स्लाइडर के कंटेनर की स्वीपर प्रॉपर्टी में निम्नलिखित HTML तत्व हैं -
var mySwiper = $$('.swiper-container')[0].swiper;
// Here you can use all slider methods like:
mySwiper.slideNext();आप निम्न तालिका में अलग-अलग तरीकों और प्रकारों को देख सकते हैं -
| S.No | Swiper प्रकार और विवरण |
|---|---|
| 1 | पृष्ठन के साथ डिफ़ॉल्ट स्विपर यह एक आधुनिक टच स्लाइडर है और डिफ़ॉल्ट रूप से स्विपर क्षैतिज रूप से स्वाइप करता है। |
| 2 | ऊर्ध्वाधर स्विपर यह एक डिफ़ॉल्ट स्वीपर के रूप में भी काम करता है लेकिन यह लंबवत रूप से स्वाइप करता है। |
| 3 | स्लाइड्स के बीच अंतरिक्ष के साथ इस स्विपर का उपयोग दो स्लाइड के बीच स्थान देने के लिए किया जाता है। |
| 4 | एकाधिक स्वाइपर्स यह स्वीपर एक पृष्ठ पर एक से अधिक स्वाइपर्स का उपयोग करता है। |
| 5 | नेस्टेड स्वीपर यह ऊर्ध्वाधर और क्षैतिज स्लाइड का संयोजन है। |
| 6 | कस्टम नियंत्रण यह किसी भी स्लाइड को चुनने या स्वाइप करने के लिए कस्टम नियंत्रण के लिए उपयोग किया जाता है। |
| 7 | धीरे लोड हो रहा है इसका उपयोग मल्टीमीडिया फ़ाइल के लिए किया जा सकता है, जिसे लोड होने में समय लगता है। |
विवरण
फोटो ब्राउज़र छवियों के समूह को प्रदर्शित करने के लिए आईओएस फोटो ब्राउज़र घटक के समान है, जिसे ज़ूम और पैंड किया जा सकता है। छवियों के बीच स्लाइड करने के लिए, फोटो ब्राउज़र स्विपर स्लाइडर का उपयोग करता है ।
निम्न तालिका चौखटे में प्रयुक्त फोटो ब्राउज़र प्रकारों को दिखाती है -
| S.No | फोटो ब्राउज़र प्रकार और विवरण |
|---|---|
| 1 | फोटो ब्राउजर इंस्टेंस बनाएं केवल जावास्क्रिप्ट का उपयोग करके फोटो ब्राउज़र बनाया और शुरू किया जा सकता है। |
| 2 | फोटो ब्राउज़र पैरामीटर्स फ्रेमवर्क 7 मापदंडों की एक सूची प्रदान करता है, जिनका उपयोग फोटो ब्राउज़र के साथ किया जाता है। |
| 3 | फोटो ब्राउज़र के तरीके और गुण फोटो ब्राउजर को इनिशियलाइज करने के बाद आपको फोटो ब्राउजर मेथड्स और प्रॉपर्टीज का उपयोग करने के लिए इनिशियलाइज्ड इंस्टेंस वेरिएबल मिलेगा। |
| 4 | तस्वीरें ऐरे फोटो ब्राउज़र को शुरू करने के दौरान, आपको फ़ोटो पैरामीटर में फ़ोटो / वीडियो के साथ सरणी पास करने की आवश्यकता होती है । |
| 5 | फोटो ब्राउज़र टेम्पलेट्स फ्रेमवर्क 7 आपको कई फोटो ब्राउज़र टेम्प्लेट प्रदान करता है, जिन्हें आप फोटो ब्राउज़र इनिशियलाइज़ेशन पर पास कर सकते हैं। |
विवरण
स्वतः पूर्ण एक फ्रेमवर्क 7 का मोबाइल अनुकूल और स्पर्श अनुकूलित घटक है, जो ड्रॉपडाउन या स्टैंडअलोन तरीके से हो सकता है। आप जावास्क्रिप्ट विधि का उपयोग करके स्वत: पूर्ण उदाहरण बना और आरंभ कर सकते हैं -
myApp.autocomplete(parameters)जहाँ मापदंडों की आवश्यकता होती है वस्तुओं का उपयोग स्वतः पूर्ण उदाहरण को शुरू करने के लिए किया जाता है।
स्वत: पूर्ण पैरामीटर
निम्न तालिका फ्रेमवर्क 7 में उपलब्ध स्वत: पूर्ण मापदंडों को सूचीबद्ध करती है -
| S.No | पैरामीटर और विवरण | प्रकार | चूक |
|---|---|---|---|
| 1 | openIn यह परिभाषित करता है कि ऑटोकॉम्पट को कैसे खोला जाए जिसे ड्रॉपडाउन, पॉपअप या पेज के रूप में इस्तेमाल किया जा सकता है। |
तार | पृष्ठ |
| 2 | source यह स्वतः पूर्ण उदाहरण, खोज क्वेरी और सरणी के साथ मिलान किए गए आइटमों को पास करने के लिए फ़ंक्शन का उपयोग करता है। |
फ़ंक्शन (स्वत: पूर्ण, क्वेरी, रेंडर) | - |
| 3 | valueProperty यह मिलान किए गए आइटम ऑब्जेक्ट की कुंजी के आइटम मूल्य को निर्दिष्ट करता है। |
तार | ईद |
| 4 | limit यह स्वचालित रूप से प्रति क्वेरी में सीमित संख्या में आइटम प्रदर्शित करता है। |
संख्या | - |
| 5 | preloader प्रीलोडर को सही पर सेट करके स्वतः पूर्ण लेआउट निर्दिष्ट करने के लिए उपयोग किया जा सकता है। |
बूलियन | असत्य |
| 6 | preloaderColor यह प्रीलोडर रंग को निर्दिष्ट करता है। डिफ़ॉल्ट रूप से, रंग "काला" है। |
तार | - |
| 7 | value डिफ़ॉल्ट चयनित मानों के साथ सरणी को परिभाषित करता है। |
सरणी | - |
| 8 | textProperty यह मिलान किए गए आइटम ऑब्जेक्ट की कुंजी के आइटम मूल्य को निर्दिष्ट करता है, जिसका उपयोग प्रदर्शित विकल्पों के शीर्षक के रूप में किया जा सकता है। |
तार | टेक्स्ट |
स्टैंडअलोन स्व-पूर्ण पैरामीटर
निम्न तालिका फ्रेमवर्क 7 में उपलब्ध स्टैंडअलोन स्वतः पूर्ण मापदंडों को सूचीबद्ध करती है -
| S.No | पैरामीटर और विवरण | प्रकार | चूक |
|---|---|---|---|
| 1 | opener यह स्ट्रिंग या HTML एलिमेंट पैरामीटर है, जो स्टैंडअलोन स्वतः पूर्ण पृष्ठ को खोलेगा। |
स्ट्रिंग या HTMLElement | - |
| 2 | popupCloseText इसका उपयोग स्वतः पूर्ण पॉपअप को बंद करने के लिए किया जाता है। |
तार | 'बंद करे' |
| 3 | backText जब पृष्ठ के रूप में स्वत: पूर्ण खोला जाता है तो यह बैक लिंक प्रदान करता है। |
तार | 'वापस' |
| 4 | pageTitle यह स्वतः पूर्ण पृष्ठ शीर्षक निर्दिष्ट करता है। |
तार | - |
| 5 | searchbarPlaceholderText यह खोज बार प्लेसहोल्डर टेक्स्ट को निर्दिष्ट करता है। |
तार | 'खोज' |
| 6 | searchbarCancelText यह खोज बार रद्द बटन पाठ को परिभाषित करता है। |
तार | 'रद्द करना' |
| 7 | notFoundText जब कोई मिलान तत्व नहीं मिला, तो यह पाठ प्रदर्शित करता है। |
तार | 'कुछ नहीं मिला' |
| 8 | multiple यह सही पर सेट करके कई चयन का चयन करने की अनुमति देता है। |
बूलियन | असत्य |
| 9 | navbarTheme यह नावबार के लिए रंग विषय को निर्दिष्ट करता है। |
तार | - |
| 10 | backOnSelect जब उपयोगकर्ता मूल्य लेता है, तो स्वतः पूर्ण को सही पर सेट करके बंद कर दिया जाएगा। |
बूलियन | असत्य |
| 1 1 | formTheme यह प्रपत्र के लिए रंग विषय निर्दिष्ट करता है। |
तार | - |
ड्रॉपडाउन स्वतः पूर्ण पैरामीटर
निम्न तालिका फ्रेमवर्क 7 में उपलब्ध ड्रॉपडाउन स्वत: पूर्ण मापदंडों को सूचीबद्ध करती है -
| S.No | पैरामीटर और विवरण | प्रकार | चूक |
|---|---|---|---|
| 1 | input यह टेक्स्ट इनपुट के लिए उपयोग किया जाने वाला स्ट्रिंग या HTML तत्व है। |
स्ट्रिंग या HTMLElement | - |
| 2 | dropdownPlaceholderText यह ड्रॉपडाउन प्लेसहोल्डर टेक्स्ट को निर्दिष्ट करता है। |
तार | - |
| 3 | updateInputValueOnSelect आप इनपुट मान को सही पर सेट करके अपडेट कर सकते हैं। |
बूलियन | सच |
| 4 | expandInput आप आइटम-इनपुट को सही पर सेट करके ड्रॉपडाउन के दौरान पूर्ण स्क्रीन को चौड़ा करने के लिए सूची दृश्य में पाठ इनपुट का विस्तार कर सकते हैं । |
बूलियन | असत्य |
स्वतः पूर्ण कॉलबैक कार्य
नीचे दी गई सारणी फ्रेमवर्क 7 में ड्रापडाउन स्वतः पूर्ण मापदंडों को उपलब्ध करती है -
| S.No | पैरामीटर और विवरण | प्रकार | चूक |
|---|---|---|---|
| 1 | onChange जब भी स्वत: पूर्ण मान परिवर्तित किया जाता है, तो यह कॉलबैक फ़ंक्शन निष्पादित किया जाएगा। |
कार्य (स्वतः पूर्ण, मूल्य) | - |
| 2 | onOpen जब भी स्वत: पूर्ण खोला जाता है, इस कॉलबैक फ़ंक्शन को निष्पादित किया जाएगा। |
कार्य (स्वतः पूर्ण) | - |
| 3 | onClose जब भी स्वतः पूर्ण बंद किया जाता है, तो यह कॉलबैक फ़ंक्शन निष्पादित किया जाएगा। |
कार्य (स्वतः पूर्ण) | - |
स्वत: पूर्ण टेम्पलेट
निम्न तालिका फ्रेमवर्क 7 में उपलब्ध ड्रॉपडाउन स्वत: पूर्ण मापदंडों को सूचीबद्ध करती है -
| S.No | पैरामीटर और विवरण | प्रकार | चूक |
|---|---|---|---|
| 1 | navbarTemplate यह स्वसंपूर्ण स्वैच्छिक नौबार टेम्पलेट है। |
तार | - |
| 2 | itemTemplate यह स्टैंडअलोन टेम्पलेट 7 फॉर्म आइटम है। |
तार | - |
| 3 | dropdownTemplate यह टेम्पलेट 7 ड्रॉपडाउन टेम्पलेट है। |
तार | - |
| 4 | dropdownItemTemplate यह टेम्पलेट 7 ड्रॉपडाउन सूची आइटम है। |
तार | - |
| 5 | dropdownPlaceholderTemplate यह टेम्पलेट 7 ड्रॉपडाउन प्लेसहोल्डर आइटम है। |
तार | - |
डिफ़ॉल्ट टेम्पलेट
उपरोक्त निर्धारित टेम्प्लेट मापदंडों के लिए डिफ़ॉल्ट टेम्प्लेट कोड स्निपेट निम्नलिखित हैं -
navbarTemplate
<div class = "navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}">
<div class = "navbar-inner">
<div class = "left sliding">
{{#if material}}
<a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}} icon-only">
<i class = "icon icon-back"></i>
</a>
{{else}}
<a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}}">
<i class = "icon icon-back"></i>
{{#if inPopup}}
<span>{{popupCloseText}}</span>
{{else}}
<span>{{backText}}</span>
{{/if}}
</a>
{{/if}}
</div>
<div class = "center sliding">{{pageTitle}}</div>
{{#if preloader}}
<div class = "right">
<div class = "autocomplete-preloader preloader
{{#if preloaderColor}}
preloader-{{preloaderColor}}
{{/if}}">
</div>
</div>
{{/if}}
</div>
</div>ItemTemplate
<li>
<label class = "label-{{inputType}} item-content">
<input type = "{{inputType}}" name = "{{inputName}}" value = "{{value}}" {{#if selected}}checked{{/if}}>
{{#if material}}
<div class = "item-media">
<i class = "icon icon-form-{{inputType}}"></i>
</div>
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
{{else}}
{{#if checkbox}}
<div class = "item-media">
<i class = "icon icon-form-checkbox"></i>
</div>
{{/if}}
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
{{/if}}
</label>
</li>dropdownTemplate
<div class = "autocomplete-dropdown">
<div class = "autocomplete-dropdown-inner">
<div class = "list-block">
<ul></ul>
</div>
</div>
{{#if preloader}}
<div class = "autocomplete-preloader preloader
{{#if preloaderColor}}
preloader-{{preloaderColor}}
{{/if}}">
{{#if material}}
{{materialPreloaderHtml}}
{{/if}}
</div>
{{/if}}
</div>dropdownItemTemplate
<li>
<label class = "{{#unless placeholder}}label-radio{{/unless}} item-content" data-value = "{{value}}">
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
</label>
</li>dropdownPlaceholderTemplate
<li class = "autocomplete-dropdown-placeholder">
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
</label>
</li>स्वतः पूर्ण विधि
निम्न तालिका फ्रेमवर्क 7 में उपलब्ध स्वतः पूर्ण विधियों को निर्दिष्ट करती है -
| S.No | तरीके और विवरण |
|---|---|
| 1 | myAutocomplete.params ऑब्जेक्ट के साथ गुजरने वाले आरंभीकरण मापदंडों को परिभाषित करता है। |
| 2 | myAutocomplete.value यह चयनित मानों के साथ सरणी को परिभाषित करता है। |
| 3 | myAutocomplete.opened यदि यह सही पर सेट है तो यह स्वतः पूर्ण को खोलता है। |
| 4 | myAutocomplete.dropdown यह स्वतः पूर्ण ड्रॉपडाउन का उदाहरण देता है। |
| 5 | myAutocomplete.popup यह स्वतः पूर्ण पॉपअप का उदाहरण देता है। |
| 6 | myAutocomplete.page यह स्वतः पूर्ण पृष्ठ का उदाहरण निर्दिष्ट करता है। |
| 7 | myAutocomplete.pageData यह स्वतः पूर्ण पृष्ठ डेटा को परिभाषित करता है। |
| 8 | myAutocomplete.searchbar यह स्वतः पूर्ण खोज उदाहरण को परिभाषित करता है। |
स्वतः पूर्ण गुण
निम्न तालिका फ्रेमवर्क 7 में उपलब्ध स्वतः पूर्ण विधियों को निर्दिष्ट करती है -
| S.No | गुण और विवरण |
|---|---|
| 1 | myAutocomplete.open() यह स्वतः पूर्ण को खोलता है, जिसका उपयोग ड्रॉपडाउन, पॉपअप या पेज के रूप में किया जा सकता है। |
| 2 | myAutocomplete.close() यह स्वतः पूर्ण को बंद कर देता है। |
| 3 | myAutocomplete.showPreloader() यह स्वत: पूर्ण लोडर दिखाता है। |
| 4 | myAutocomplete.hidePreloader() यह स्वतः पूर्ण लोडर को छुपाता है। |
| 5 | myAutocomplete.destroy() यह स्वत: पूर्ण प्री-लोडर आवृत्ति को बर्बाद करता है और सभी घटनाओं को हटा देता है। |
उदाहरण
निम्न उदाहरण फ्रेमवर्क 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>Autocomplete</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">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Autcomplete</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Simple Dropdown Autocomplete</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Input Expand</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-expand">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With All Values</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-all">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Placeholder</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-placeholder">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Simple Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Popup Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-popup" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Multiple Values Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-multiple" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Countries</div>
<div class = "item-after"></div>
</div>
</a>
</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 $$ = Dom7;
var mainView = myApp.addView('.view-main');
// Countries data array
var countries = ('India Africa Australia NewZealand England WestIndies Scotland Zimbabwe Srilanka Bangladesh').split(' ');
// Simple Dropdown
var autocompleteDropdownSimple = myApp.autocomplete ({
input: '#autocomplete-dropdown',
openIn: 'dropdown',
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Dropdown with input expand
var autocompleteDropdownExpand = myApp.autocomplete ({
input: '#autocomplete-dropdown-expand',
openIn: 'dropdown',
expandInput: true, // expandInput used as item-input in List View will be expanded to full screen wide
//during dropdown
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// Find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Dropdown with all values
var autocompleteDropdownAll = myApp.autocomplete ({
input: '#autocomplete-dropdown-all',
openIn: 'dropdown',
source: function (autocomplete, query, render) {
var results = [];
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Dropdown with placeholder
var autocompleteDropdownPlaceholder = myApp.autocomplete ({
input: '#autocomplete-dropdown-placeholder',
openIn: 'dropdown',
dropdownPlaceholderText: 'Type as "India"',
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
}
});
// Simple Standalone
var autocompleteStandaloneSimple = myApp.autocomplete ({
openIn: 'page', //open in page
opener: $$('#autocomplete-standalone'), //link that opens autocomplete
backOnSelect: true, //go back after we select something
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone').find('.item-after').text(value[0]);
// You can add item value to input value
$$('#autocomplete-standalone').find('input').val(value[0]);
}
});
// Standalone Popup
var autocompleteStandalonePopup = myApp.autocomplete ({
openIn: 'popup', // Opens the Autocomplete in page
opener: $$('#autocomplete-standalone-popup'), // It will open standalone autocomplete popup
backOnSelect: true, //After selecting item, then go back to page
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
// You can add item value to input value
$$('#autocomplete-standalone-popup').find('input').val(value[0]);
}
});
// Multiple Standalone
var autocompleteStandaloneMultiple = myApp.autocomplete ({
openIn: 'page', //Opens the Autocomplete in page
opener: $$('#autocomplete-standalone-multiple'), //link that opens autocomplete
multiple: true, //Allow multiple values
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', '));
// You can add item value to input value
$$('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
}
});
</script>
</body>
</html>उत्पादन
ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -
ऊपर दिए गए HTML कोड को इस प्रकार सेव करें autocomplete.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/autocomplete.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
उदाहरण सरल ड्रॉपडाउन में मूल्यों के स्वत: पूर्णता प्रदान करता है, सभी मूल्यों के साथ ड्रॉपडाउन, प्लेसहोल्डर के साथ ड्रॉपडाउन, स्टैंडअलोन ऑटोमैक्वल आदि।
विवरण
पिकर आईओएस देशी पिकर की तरह दिखता है और यह एक शक्तिशाली घटक है जो आपको सूची से किसी भी मूल्य को चुनने की अनुमति देता है और कस्टम ओवर पिकर बनाने के लिए भी उपयोग किया जाता है। आप इनलाइन घटक के रूप में या ओवरले के रूप में पिकर का उपयोग कर सकते हैं। ओवरले पिकर को टेबलेट (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 स्ट्रिंग है - |
तार | - |
विशिष्ट पिकर पैरामीटर
निम्न तालिका उपलब्ध विशिष्ट पिकर मापदंडों को सूचीबद्ध करती है -
| 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 | इनलाइन पिकर / दिनांक-समय आप इनलाइन पिकर के मानों की संख्या का चयन कर सकते हैं। माइक की तारीख, माह, वर्ष और समय में घंटे, मिनट, सेकंड हैं। |
विवरण
कैलेंडर घटक आपको तिथियों को आसानी से संभालने की अनुमति देता है और इनलाइन या ओवरले घटक के रूप में उपयोग किया जा सकता है। ओवरले कैलेंडर स्वचालित रूप से गोलियों पर पॉपओवर में बदल जाएगा।
केवल जावास्क्रिप्ट का उपयोग करके कैलेंडर बनाया और आरंभ किया जा सकता है। आपको नीचे दिखाए गए अनुसार संबंधित ऐप की विधि का उपयोग करने की आवश्यकता है -
myApp.calendar(parameters)- यह तरीका इनिशियलाइज्ड कैलेंडर इंस्टेंस देता है। यह एक वस्तु को पैरामाटर्स के रूप में स्वीकार करता है ।
निम्न तालिका फ्रेमवर्क 7 में कैलेंडर के उपयोग को दर्शाती है -
| S.No | कैलेंडर का उपयोग और विवरण |
|---|---|
| 1 | कैलेंडर पैरामीटर फ्रेमवर्क 7 मापदंडों की एक सूची प्रदान करता है, जिनका उपयोग कैलेंडर के साथ किया जाता है। |
| 2 | कैलेंडर के तरीके और गुण एक बार कैलेंडर को प्रारंभ करने के बाद, कैलेंडर विधियों और गुणों का उपयोग करने के लिए आपको एक प्रारंभिक इंस्टेंस चर मिलेगा। |
| 3 | कैलेंडर के इंस्टेंस पर पहुंच जब आप कैलेंडर को इनलाइन के रूप में प्रारंभ करते हैं तो उसके HTML कंटेनर से कैलेंडर आवृत्ति तक पहुँच संभव है। |
विवरण
यह एक विशेष घटक है जिसका उपयोग पृष्ठ की सामग्री को ताज़ा करने (पुनः लोड करने) के लिए किया जाता है।
निम्नलिखित कोड दिखाता है कि पृष्ठ की सामग्री को कैसे ताज़ा किया जाए -
<div class = "page">
<!-- Page content should have additional "pull-to-refresh-content" class -->
<div class = "page-content pull-to-refresh-content" data-ptr-distance = "55">
<!-- Default pull to refresh layer-->
<div class = "pull-to-refresh-layer">
<div class = "preloader"></div>
<div class = "pull-to-refresh-arrow"></div>
</div>
<!-- usual content below -->
<div class = "list-block">
...
</div>
</div>निम्नलिखित वर्गों को ताज़ा करने में उपयोग किया जाता है -
page-content- इसमें एक अतिरिक्त पुल-टू-रिफ्रेश-कंटेंट क्लास है और इसके लिए पुल को रिफ्रेश करने में सक्षम होना चाहिए।
pull-to-refresh-layer- यह एक छिपी हुई परत है, जिसका उपयोग दृश्य तत्व को ताज़ा करने के लिए किया जाता है और यह सिर्फ एक प्रीलोडर और एक तीर है।
data-ptr-distance = "55" - यह अतिरिक्त विशेषता है जो आपको ट्रिगर दूरी को रिवाइज करने के लिए कस्टम 'पुल' सेट करने की अनुमति देता है और इसका डिफ़ॉल्ट मान 44px है।
घटनाओं को ताज़ा करने के लिए खींचो
'पुल टू रिफ्रेश' में कुछ जावास्क्रिप्ट घटनाएँ हैं, जो निम्न तालिका में दी गई हैं -
| S.No | घटना विवरण | लक्ष्य |
|---|---|---|
| 1 | pullstart जब भी आप सामग्री को ताज़ा करने के लिए खींचना शुरू करेंगे तो यह ट्रिगर हो जाएगा। |
सामग्री को ताज़ा करने के लिए खींचो। |
| 2 | pullmove यह तब ट्रिगर होता है जब आप सामग्री को ताज़ा करने के लिए खींच रहे होते हैं। |
सामग्री को ताज़ा करने के लिए खींचो। |
| 3 | pullend जब भी आप ताज़ा सामग्री के लिए पुल जारी करेंगे तो यह ट्रिगर हो जाएगा। |
सामग्री को ताज़ा करने के लिए खींचो। |
| 4 | refresh जब "ताज़ा" स्थिति में प्रवेश करने के लिए पुल को ताज़ा करने के लिए इस घटना को चालू किया जाएगा । |
सामग्री को ताज़ा करने के लिए खींचो। |
| 5 | refreshdone इसे ताज़ा होने के बाद चालू किया जाएगा और यह प्रारंभिक अवस्था में वापस चला जाएगा। यह पुलटॉर्फरेशडोन विधि को कॉल करने के बाद किया जाएगा । |
सामग्री को ताज़ा करने के लिए खींचो। |
ऐप के ऐसे तरीके हैं जिनका उपयोग पुल टू रिफ्रेश के साथ किया जा सकता है।
| S.No | ऐप के तरीके और विवरण |
|---|---|
| 1 | myApp.pullToRefreshDone(ptrContent) इसका उपयोग पुल-टू-रिफ्रेश कंटेंट को रीसेट करने के लिए किया जाता है। |
| 2 | myApp.pullToRefreshTrigger(ptrContent) इसका उपयोग सामग्री को ताज़ा करने के लिए निर्दिष्ट पुल पर ताज़ा करने के लिए ट्रिगर करने के लिए किया जाता है । |
| 3 | myApp.destroyPullToRefresh(ptrContent) इसका उपयोग सामग्री को ताज़ा करने के लिए निर्दिष्ट पुल पर ताज़ा करने के लिए पुल को नष्ट / अक्षम करने के लिए किया जाता है । |
| 4 | myApp.initPullToRefresh(ptrContent) इसका उपयोग सामग्री को ताज़ा करने के लिए खींचने / सक्षम करने के लिए किया जाता है । |
जहां ptrContent का उपयोग HTMLElement या स्ट्रिंग को रीसेट / ट्रिगर या अक्षम / सक्षम करने के लिए पुल-टू-रिफ्रेश-कंटेंट के लिए किया जाता है।
उदाहरण
निम्नलिखित उदाहरण ताज़ा घटक के उपयोग को दर्शाता है जो पृष्ठ सामग्री को ताज़ा करने की पहल करता है -
<!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>Pull To Refresh</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>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"> </div>
<div class="center">Pull To Refresh</div>
<div class="right"> </div>
</div>
</div>
<div class="page-content pull-to-refresh-content">
<div class="pull-to-refresh-layer">
<div class="preloader"></div>
<div class="pull-to-refresh-arrow"></div>
</div>
<div class="list-block media-list">
<ul>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/apple.png" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">apple</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/froots_img.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">strawberry</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/mango.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Mango</div>
</div>
</div>
</li>
</ul>
<div class="list-block-label">
<p>Just pull page down to let the magic happen.</p>
</div>
</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 $$ = Dom7;
// Dummy Content
var fruits = ['mango', 'orange', 'watermelon', 'banana'];
// Pull to refresh content
var ptrContent = $$('.pull-to-refresh-content');
// Add 'refresh' listener on it
ptrContent.on('refresh', function (e) {
// Emulate 2s loading
setTimeout(function () {
var picURL = 'images/Fruit.jpg' + Math.round(Math.random() * 100);
var fruit = fruits[Math.floor(Math.random() * fruits.length)];
var itemHTML = '<li class="item-content">' +
'<div class="item-media"><img src="/framework7/images/Fruit.jpg" width="44"/></div>' +
'<div class="item-inner">' +
'<div class="item-title-row">' +
'<div class="item-title">' + fruit + '</div>' +
'</div>' + '</div>' + '</li>';
// Prepend new list element
ptrContent.find('ul').prepend(itemHTML);
// When loading done, we need to reset it
myApp.pullToRefreshDone();
}, 2000);
});
</script>
</html>उत्पादन
ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -
ऊपर दिए गए HTML कोड को इस प्रकार सेव करें pull_to_refresh.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/pull_to_refresh.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
जब उपयोगकर्ता नीचे खींचता है, तो पृष्ठ सामग्री से ताज़ा हो जाएगा।
विवरण
अनंत स्क्रॉल आपको अतिरिक्त सामग्री लोड करने की अनुमति देता है और पृष्ठ के नीचे होने पर आवश्यक कार्रवाई करता है।
निम्न HTML लेआउट अनंत स्क्रॉल दिखाता है -
<div class = "page">
<div class = "page-content infinite-scroll" data-distance = "100">
...
</div>
</div>उपरोक्त लेआउट में निम्न वर्ग हैं -
page-content infinite-scroll - इसका उपयोग अनंत स्क्रॉल कंटेनर के लिए किया जाता है।
data-distance - यह विशेषता आपको अनंत स्क्रॉल ईवेंट को ट्रिगर करने के लिए पृष्ठ के निचले भाग (px में) से कॉन्फ़िगर करने की अनुमति देती है और इसका डिफ़ॉल्ट मान है 50पिक्सल।
यदि आप शीर्ष पृष्ठ पर अनंत स्क्रॉल का उपयोग करना चाहते हैं, तो आपको "पृष्ठ-सामग्री" में अतिरिक्त "अनंत-स्क्रॉल-टॉप" वर्ग जोड़ने की आवश्यकता है -
<div class = "page">
<div class = "page-content infinite-scroll infinite-scroll-top">
...
</div>
</div>अनंत स्क्रॉल इवेंट
infinite- इसका उपयोग तब ट्रिगर करने के लिए किया जाता है जब पृष्ठ स्क्रॉल नीचे तक निर्दिष्ट दूरी तक पहुंच जाता है। यह div class = "पेज-कंटेंट अनंत-स्क्रॉल" द्वारा लक्षित होगा ।
ऐप के दो तरीके हैं जिनका उपयोग अनंत स्क्रॉल कंटेनर के साथ किया जा सकता है -
निर्दिष्ट HTML कंटेनर में अनंत स्क्रॉल ईवेंट श्रोता को जोड़ने के लिए, निम्न विधि का उपयोग करें -
myApp.attachInfiniteScroll(container)आप निम्न विधि का उपयोग करके निर्दिष्ट HTML कंटेनर से अनंत स्क्रॉल ईवेंट श्रोता को निकाल सकते हैं -
myApp.detachInfiniteScroll(container)जहां मापदंडों की आवश्यकता होती है , अनंत स्क्रॉल कंटेनर के लिए HTMLElement या स्ट्रिंग के रूप में उपयोग किया जाता है ।
उदाहरण
निम्न उदाहरण अनंत स्क्रॉल को प्रदर्शित करता है जो पेज स्क्रॉल के नीचे होने पर अतिरिक्त सामग्री को लोड करता है -
<!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>infinite_scroll</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 = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center sliding">Infinite Scroll</div>
<div class = "right"> </div>
</div>
</div>
<div class = "pages navbar-through">
<div data-page = "home" class = "page">
<div class = "page-content infinite-scroll">
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 1</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 2</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 3</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 4</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 5</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 6</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 7</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 8</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 9</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 10</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 11</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 12</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 13</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 14</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 15</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 16</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 17</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 18</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 19</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 20</div>
</div>
</li>
</ul>
</div>
<div class = "infinite-scroll-preloader">
<div class = "preloader"></div>
</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>
<style>
.infinite-scroll-preloader {
margin-top:-20px;
margin-bottom:10px;
text-align:center;
}
.infinite-scroll-preloader .preloader {
width:34px;
height:34px;
}
</style>
<script>
var myApp = new Framework7();
var $$ = Dom7;
// Loading flag
var loading = false;
// Last loaded index
var lastIndex = $$('.list-block li').length;
// Max items to load
var maxItems = 60;
// Append items per load
var itemsPerLoad = 20;
// Attach 'infinite' event handler
$$('.infinite-scroll').on('infinite', function () {
// Exit, if loading in progress
if (loading) return;
// Set loading flag
loading = true;
// Emulate 1s loading
setTimeout(function () {
// Reset loading flag
loading = false;
if (lastIndex >= maxItems) {
// Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
myApp.detachInfiniteScroll($$('.infinite-scroll'));
// Remove preloader
$$('.infinite-scroll-preloader').remove();
return;
}
// Generate new items HTML
var html = '';
for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) {
html += '<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">
Item ' + i + '
</div>
</div>
</li>';
}
// Append new items
$$('.list-block ul').append(html);
// Update last loaded index
lastIndex = $$('.list-block li').length;
}, 1000);
});
</script>
</body>
</html>उत्पादन
ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -
ऊपर दिए गए HTML कोड को इस प्रकार सेव करें infinite_scroll.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/infinite_scroll.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
जब आपका पृष्ठ स्क्रॉल नीचे तक निर्दिष्ट दूरी तक पहुँच जाता है तो उदाहरण अतिरिक्त सामग्री को लोड करने की अनुमति देता है।
विवरण
संदेश फ्रेमवर्क 7 के घटक हैं, जो एप्लिकेशन में टिप्पणियों और संदेश प्रणाली का दृश्य देता है।
संदेश लेआउट
Framework7 में निम्न संदेश लेआउट संरचना है -
<div class = "page">
<div class = "page-content messages-content">
<div class = "messages">
<!-- Defines the date stamp -->
<div class = "messages-date">Monday, Apr 26 <span>10:30</span></div>
<!-- Displays the sent message and by default, it will be in green color on right side -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">Hello</div>
</div>
<!-- Displays the another sent message -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">How are you?</div>
</div>
<!-- Displays the received message and by default, it will be in grey color on left side -->
<div class = "message message-with-avatar message-received">
<!-- Provides sender name -->
<div class = "message-name">Smith</div>
<!-- Define the text with bubble type -->
<div class = "message-text">I am fine, thanks</div>
<!-- Defines the another date stamp -->
<div class = "messages-date">Tuesday, April 28 <span>11:16</span></div>
</div>
</div>
</div>लेआउट में विभिन्न क्षेत्रों में निम्न वर्ग हैं -
संदेश पेज लेआउट
निम्न तालिका विवरण के साथ संदेश पृष्ठ लेआउट की कक्षाएं दिखाती है।
| S.No | कक्षाएं और विवरण |
|---|---|
| 1 | messages-content यह एक आवश्यक अतिरिक्त वर्ग है जिसे "पृष्ठ-सामग्री" में जोड़ा जाता है और संदेश आवरण के लिए उपयोग किया जाता है। |
| 2 | messages यह संदेशों के बुलबुले के लिए एक आवश्यक तत्व है। |
| 3 | messages-date यह भेजे गए या प्राप्त संदेश की तारीख और समय प्रदर्शित करने के लिए डेट स्टैंप कंटेनर का उपयोग करता है। |
| 4 | message यह प्रदर्शित किया जाने वाला एक एकल संदेश है। |
सिंगल मैसेज इनर पार्ट्स
निम्न तालिका विवरण के साथ सरल संदेश आंतरिक भागों की कक्षाएं दिखाती है।
| S.No | कक्षाएं और विवरण |
|---|---|
| 1 | message-name यह प्रेषक का नाम प्रदान करता है। |
| 2 | message-text बबल प्रकार के साथ पाठ को परिभाषित करें। |
| 3 | message-avatar यह प्रेषक अवतार को निर्दिष्ट करता है। |
| 4 | message-label यह बुलबुले के नीचे पाठ लेबल को निर्दिष्ट करता है। |
एकल संदेश कंटेनर के लिए अतिरिक्त कक्षाएं
निम्न तालिका एकल संदेश कंटेनर विवरण के लिए अतिरिक्त कक्षाएं दिखाती है।
| S.No | कक्षाएं और विवरण |
|---|---|
| 1 | message-sent यह निर्दिष्ट करता है कि संदेश उपयोगकर्ता द्वारा भेजा गया था और दाईं ओर हरे रंग की पृष्ठभूमि के रंग के साथ प्रदर्शित किया गया है। |
| 2 | message-received इसका उपयोग एकल संदेश को प्रदर्शित करने के लिए किया जाता है, यह दर्शाता है कि संदेश उपयोगकर्ता द्वारा प्राप्त किया गया था और बाईं ओर ग्रे पृष्ठभूमि रंग के साथ रहता है। |
| 3 | message-pic यह एक एकल संदेश के साथ छवि प्रदर्शित करने के लिए एक अतिरिक्त वर्ग है। |
| 4 | message-with-avatar यह अवतार के साथ एक एकल संदेश (प्राप्त या भेजा) प्रदर्शित करने के लिए एक अतिरिक्त वर्ग है। |
| 5 | message-with-tail आप एकल संदेश (प्राप्त या भेजे गए) के लिए एक बुलबुला पूंछ जोड़ सकते हैं। |
एकल संदेश के लिए अतिरिक्त उपलब्ध कक्षाएं
निम्न तालिका वर्णन के साथ एक एकल संदेश के लिए उपलब्ध कक्षाओं को दिखाती है।
| S.No | कक्षाएं और विवरण |
|---|---|
| 1 | message-hide-name यह एक संदेश (प्राप्त या भेजा) के लिए संदेश नाम छिपाने के लिए एक अतिरिक्त वर्ग है। |
| 2 | message-hide-avatar यह एक एकल संदेश (प्राप्त या भेजा) के लिए संदेश अवतार को छिपाने के लिए एक अतिरिक्त वर्ग है। |
| 3 | message-hide-label यह एक एकल संदेश (प्राप्त या भेजा) के लिए संदेश लेबल को छिपाने के लिए एक अतिरिक्त वर्ग है। |
| 4 | message-last आप वर्तमान वार्तालाप में एक संदेश (प्राप्त या भेजे गए) के लिए एक प्रेषक द्वारा अंतिम प्राप्त या भेजे गए संदेश को इंगित करने के लिए इस वर्ग का उपयोग कर सकते हैं। |
| 5 | message-first आप वर्तमान वार्तालाप में किसी एकल संदेश के लिए एक प्रेषक द्वारा प्राप्त या पहले भेजे गए संदेश को इंगित करने के लिए इस कक्षा का उपयोग कर सकते हैं (प्राप्त या भेजा)। |
जावास्क्रिप्ट के साथ प्रारंभिक संदेश
आप निम्न विधि का उपयोग करके जावास्क्रिप्ट के साथ संदेशों को आरंभ कर सकते हैं -
myApp.messages(messagesContainer, parameters)विधि दो विकल्प लेती है -
messagesContainer - यह एक आवश्यक HTML तत्व या स्ट्रिंग है जिसमें संदेश कंटेनर HTML तत्व शामिल हैं।
parameters - यह संदेश पैरामीटर के साथ एक ऑब्जेक्ट निर्दिष्ट करता है।
संदेश पैरामीटर
निम्न तालिका विवरण के साथ संदेशों के मापदंडों को दिखाती है।
| S.No | पैरामीटर और विवरण | प्रकार | चूक |
|---|---|---|---|
| 1 | autoLayout यह सक्षम करके प्रत्येक संदेश में अतिरिक्त आवश्यक कक्षाएं जोड़ता है। |
बूलियन | सच |
| 2 | newMessagesFirst आप इसे सक्षम करके नीचे की ओर प्रदर्शित करने के बजाय शीर्ष पर संदेश प्रदर्शित कर सकते हैं। |
बूलियन | असत्य |
| 3 | messages यह संदेशों की एक सरणी प्रदर्शित करता है जिसमें प्रत्येक संदेश को संदेश मापदंडों के साथ वस्तु के रूप में दर्शाया जाना चाहिए। |
सरणी | - |
| 4 | messageTemplate यह एकल संदेश टेम्पलेट प्रदर्शित करता है। |
तार | - |
संदेश गुण
निम्न तालिका विवरण के साथ संदेशों के गुणों को दिखाती है।
| S.No | संपत्ति विवरण |
|---|---|
| 1 | myMessages.params आप ऑब्जेक्ट के साथ पारित मापदंडों को इनिशियलाइज़ कर सकते हैं। |
| 2 | myMessages.container एक संदेश पट्टी HTML कंटेनर के साथ DOM7 तत्व को परिभाषित करता है। |
संदेश के तरीके
निम्न तालिका विवरण के साथ संदेशों के तरीकों को दिखाती है।
| S.No | विधि और विवरण |
|---|---|
| 1 | myMessages.addMessage(messageParameters, method, animate); विधि पैरामीटर का उपयोग करके संदेश को शुरुआत या अंत में जोड़ा जा सकता है। इसके निम्न पैरामीटर हैं -
|
| 2 | myMessages.appendMessage(messageParameters, animate); यह संदेश कंटेनर के अंत में एक संदेश जोड़ता है। |
| 3 | myMessages.prependMessage(messageParameters, animate); यह संदेश कंटेनर की शुरुआत के लिए एक संदेश जोड़ता है। |
| 4 | myMessages.addMessages(messages, method, animate); आप एक समय में कई संदेश जोड़ सकते हैं। इसके निम्न पैरामीटर हैं -
|
| 5 | myMessages.removeMessage(message); इसका इस्तेमाल मैसेज को हटाने के लिए किया जाता है। इसके निम्न पैरामीटर हैं -
|
| 6 | myMessages.removeMessages(messages); आप कई संदेश निकाल सकते हैं। इसके निम्न पैरामीटर हैं -
|
| 7 | myMessages.scrollMessages(); आप नए संदेश के पहले पैरामीटर के आधार पर ऊपर से नीचे और इसके विपरीत संदेशों को स्क्रॉल कर सकते हैं। |
| 8 | myMessages.layout(); संदेशों में ऑटो लेआउट लागू किया जा सकता है। |
| 9 | myMessages.clean(); इसका उपयोग संदेशों को साफ करने के लिए किया जाता है। |
| 10 | myMessages.destroy(); इसका उपयोग संदेशों को नष्ट करने के लिए किया जाता है। |
एकल संदेश पैरामीटर
निम्न तालिका विवरण के साथ किसी एकल संदेश के मापदंडों को दिखाती है।
| S.No | पैरामीटर और विवरण | प्रकार | चूक |
|---|---|---|---|
| 1 | text यह संदेश पाठ को परिभाषित करता है, जो एक HTML स्ट्रिंग हो सकता है। |
तार | - |
| 2 | name यह प्रेषक का नाम निर्दिष्ट करता है। |
तार | - |
| 3 | avatar यह प्रेषक अवतार URL स्ट्रिंग निर्दिष्ट करता है। |
तार | - |
| 4 | time यह '9:45 AM', '18: 35 'जैसे संदेश के टाइम स्ट्रिंग को निर्दिष्ट करता है। |
तार | - |
| 5 | type यह संदेश का प्रकार प्रदान करता है कि क्या यह संदेश भेजा या प्राप्त किया जा सकता है। |
तार | भेज दिया |
| 6 | label यह संदेश के लेबल को परिभाषित करता है। |
तार | - |
| 7 | day यह संदेश का दिन स्ट्रिंग देता है जैसे 'रविवार', 'सोमवार', 'कल' आदि। |
तार | - |
HTML के साथ प्रारंभिक संदेश
आप अतिरिक्त का उपयोग करके जावास्क्रिप्ट के बिना HTML के साथ संदेशों को प्रारंभ कर सकते हैं संदेशों-init करने के लिए वर्ग संदेशों और प्रयोग डेटा- विशेषताओं के रूप में कोड में दिखाया नीचे दिए गए स्निपेट आवश्यक पैरामीटर पारित करने के लिए -
...
<div class = "page-content messages-content">
<!-- Initialize the messages using additional "messages-init" class-->
<div class = "messages messages-init" data-auto-layout = "true" data-new-messages-first = "false">
...
</div>
</div>
...उदाहरण
निम्न उदाहरण फ्रेमवर्क 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>Messages</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">
<div data-page = "home" class = "page navbar-fixed toolbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Messages</div>
<div class = "right"> </div>
</div>
</div>
<div class = "toolbar messagebar">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea><a href = "#" class = "link">Send</a>
</div>
</div>
<div class = "page-content messages-content">
<div class = "messages">
<div class = "messages-date">Friday, Apr 26 <span>10:30</span></div>
<div class = "message message-sent">
<div class = "message-text">Hello</div>
</div>
<div class = "message message-sent">
<div class = "message-text">Happy Birthday</div>
</div>
<div class = "message message-received">
<div class = "message-name">Smith</div>
<div class = "message-text">Thank you</div>
<div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
</div>
<div class = "messages-date">Saturday, Apr 27 <span>9:30</span></div>
<div class = "message message-sent">
<div class = "message-text">Good Morning...</div>
</div>
<div class = "message message-sent">
<div class = "message-text"><img src = "/framework7/images/gm.jpg"></div>
<div class = "message-label">Delivered</div>
</div>
<div class = "message message-received">
<div class = "message-name">Smith</div>
<div class = "message-text">Very Good Morning...</div>
<div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
</div>
</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 $$ = Dom7;
// It indicates conversation flag
var conversationStarted = false;
// Here initiliaze the messages
var myMessages = myApp.messages('.messages', {
autoLayout:true
});
// Initiliaze the messagebar
var myMessagebar = myApp.messagebar('.messagebar');
// Displays the text after clicking the button
$$('.messagebar .link').on('click', function () {
// specifies the message text
var messageText = myMessagebar.value().trim();
// If there is no message, then exit from there
if (messageText.length === 0) return;
// Specifies the empty messagebar
myMessagebar.clear()
// Defines the random message type
var messageType = (['sent', 'received'])[Math.round(Math.random())];
// Provides the avatar and name for the received message
var avatar, name;
if(messageType === 'received') {
name = 'Smith';
}
// It adds the message
myMessages.addMessage ({
// It provides the message text
text: messageText,
// It displays the random message type
type: messageType,
// Specifies the avatar and name of the sender
avatar: avatar,
name: name,
// Displays the day, date and time of the message
day: !conversationStarted ? 'Today' : false,
time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
})
// Here you can update the conversation flag
conversationStarted = true;
});
</script>
</body>
</html>उत्पादन
ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -
ऊपर दिए गए HTML कोड को इस प्रकार सेव करें messages.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/messages.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
जब आप संदेश बॉक्स में एक संदेश टाइप करते हैं और भेजें बटन पर क्लिक करते हैं, तो यह निर्दिष्ट करता है कि आपका संदेश भेजा गया है और दाईं ओर हरे रंग की पृष्ठभूमि के रंग के साथ प्रदर्शित किया गया है।
संदेश जो आप प्राप्त करते हैं, प्रेषक के नाम के साथ ग्रे पृष्ठभूमि के साथ बाईं ओर दिखाई देता है।
विवरण
फ्रेमवर्क 7 एप्लिकेशन में मैसेजिंग सिस्टम के साथ काम करने के लिए विशेष रेज़िबल टूलबार प्रदान करता है।
निम्न कोड संदेश बार लेआउट दिखाता है -
<div clas = "toolbar messagebar">
<div clas = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" clas = "link">Send</a>
</div>
</div>संदेश पट्टी में, "पेज" के अंदर बहुत महत्वपूर्ण है और "संदेश-सामग्री" के दाईं ओर है -
<div class = "page toolbar-fixed">
<!-- messagebar -->
<div class = "toolbar messagebar">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" class = "link">Send</a>
</div>
</div>
<!-- messages-content -->
<div class = "page-content messages-content">
<div class = "messages">
... messages
</div>
</div>
</div>आप जावास्क्रिप्ट के साथ संदेश पट्टी को आरंभ करने के लिए निम्नलिखित विधि का उपयोग कर सकते हैं -
myApp.messagesbar(messagesbarContainer, parameters)विधि के दो विकल्प हैं -
messagesbarContainer - यह एक आवश्यक एचटीएमएल तत्व या स्ट्रिंग है जिसमें मैसेजबार कंटेनर एचटीएमएल तत्व शामिल है।
parameters - यह मैसेजबार पैरामीटर के साथ एक ऑब्जेक्ट निर्दिष्ट करता है।
उदाहरण के लिए -
var myMessagebar = app.messagebar('.messagebar', {
maxHeight: 200
});मैसेजबार पैरामीटर
maxHeight- इसका उपयोग टेक्स्टारिया की अधिकतम ऊंचाई निर्धारित करने के लिए किया जाता है और इसके पाठ की मात्रा के आधार पर इसे आकार दिया जाएगा। पैरामीटर का प्रकार संख्या है और डिफ़ॉल्ट मान शून्य है ।
मैसेजबार गुण
निम्न तालिका संदेश पट्टी गुण दिखाती है -
| S.No | गुण और विवरण |
|---|---|
| 1 | myMessagebar.params आप ऑब्जेक्ट को प्रारंभिक आरंभीकरण मापदंडों के साथ निर्दिष्ट कर सकते हैं। |
| 2 | myMessagebar.container आप मैसेजबार कंटेनर HTML तत्व के साथ डोम 7 तत्व निर्दिष्ट कर सकते हैं। |
| 3 | myMessagebar.textarea आप messagebar textarea HTML तत्व के साथ डोम 7 तत्व निर्दिष्ट कर सकते हैं। |
मैसेजबार के तरीके
निम्न तालिका संदेश पट्टी के तरीकों को दिखाती है -
| S.No | तरीके और विवरण |
|---|---|
| 1 | myMessagebar.value(newValue); यह संदेश पट्टी textarea मान / पाठ सेट करता है और संदेश पट्टी textarea मान देता है, यदि newValue निर्दिष्ट नहीं है। |
| 2 | myMessagebar.clear(); यह textarea को साफ़ करता है और आकार को अपडेट / रीसेट करता है। |
| 3 | myMessagebar.destroy(); यह संदेश पट्टी उदाहरण को नष्ट कर देता है। |
HTML के साथ Messagebar को इनिशियलाइज़ करें
आप .messagebar में messagebar-init वर्ग को जोड़कर जावास्क्रिप्ट विधियों और गुणों के बिना HTML का उपयोग करके मैसेजबार को इनिशियलाइज़ कर सकते हैं और आप डेटा- एट्रीब्यूट्स का उपयोग करके आवश्यक पैरामीटर पास कर सकते हैं ।
निम्न कोड HTML के साथ मैसेजबार के आरंभ को निर्दिष्ट करता है -
<div class = "toolbar messagebar messagebar-init" data-max-height = "200">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" class = "link">Send</a>
</div>
</div>मैसेजबार के इंस्टेंस तक पहुंच
यदि आप HTML का उपयोग करके इसे आरंभ करते हैं, तो संदेश बार उदाहरण तक पहुँचना संभव है; यह अपने कंटेनर तत्व के f7 संदेश बार गुण का उपयोग करके प्राप्त किया जाता है ।
var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');आप Messagebar का उदाहरण देख सकते हैं, जिसे इस लिंक में समझाया गया है
विवरण
सूचनाओं का उपयोग आवश्यक संदेश दिखाने के लिए किया जाता है, जो पुश (या स्थानीय) iOS सूचनाओं की तरह दिखाई देते हैं।
निम्न तालिका विवरण में सूचनाओं के उपयोग को प्रदर्शित करती है -
| S.No | सूचनाएं उपयोग और विवरण |
|---|---|
| 1 | सूचनाएं जावास्क्रिप्ट एपीआई संबंधित एप्लिकेशन विधियों का उपयोग करके सूचनाओं को जावास्क्रिप्ट के साथ जोड़ा या बंद किया जा सकता है। |
| 2 | सूचनाएं लेआउट जावास्क्रिप्ट का उपयोग करके फ्रेमवर्क 7 सूचनाओं को जोड़ा जाएगा। |
| 3 | उदाहरण iOS फ्रेमवर्क 7 आपको अपने आईओएस लेआउट में विभिन्न प्रकार के नोटिफिकेशन का उपयोग करने की अनुमति देता है। |
| 4 | उदाहरण सामग्री फ़्रेमवर्क 7 सूचनाओं का उपयोग सामग्री लेआउट में भी किया जा सकता है। |
विवरण
आलसी लोडिंग किसी दिए गए पृष्ठ पर आपकी छवि लोड करने की प्रक्रिया में देरी करता है। आलसी लोडिंग स्क्रॉलिंग प्रदर्शन में सुधार करता है, पेज लोड को गति देता है और ट्रैफ़िक बचाता है।
आलसी लोड तत्वों और छवियों को ठीक से काम करने के लिए स्क्रॉल करने योग्य <div class = "page-content"> के अंदर होना चाहिए।
निम्न तालिका आलसी लोड के उपयोग को प्रदर्शित करती है -
| S.No | आलसी लोड उपयोग और विवरण |
|---|---|
| 1 | प्रयोग आलसी लोड को छवियों, पृष्ठभूमि छवियों और फीका-इन प्रभाव के साथ लागू किया जा सकता है। |
| 2 | Init आलसी लोड मैन्युअल रूप से एक पृष्ठ को इनिशियलाइज़ करने के बाद, यदि आप मैन्युअल रूप से आलसी लोड छवियों को जोड़ते हैं, तो आलसी लोड काम नहीं करेगा और आपको इसे आरंभ करने के लिए विधियों का उपयोग करने की आवश्यकता है। |
यह मैन्युअल रूप से का उपयोग करके ट्रिगर छवि लोड करने के लिए संभव है आलसी आलसी छवि / तत्व पर घटना के रूप में नीचे दिखाया गया है -
$$('img.lazy').trigger('lazy');
$$('div.lazy').trigger('lazy');उदाहरण
निम्न उदाहरण फ्रेमवर्क 7 में आलसी लोडिंग के उपयोग को दर्शाता है -
<!DOCTYPE html>
<html class = "with-statusbar-overlay">
<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>Lazy Load</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">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Lazy Load</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block">
<div class = "content-block-inner">
<p> <img data-src = "/framework7/images/pic4.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic5.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p> <img data-src = "/framework7/images/background.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic6.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt.</p>
<p> <img data-src = "/framework7/images/pic7.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic8.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent laoreet nisl eget neque blandit lobortis. Sed sagittis risus
id vestibulum finibus. Cras vestibulum sem et massa hendrerit maximus.
Vestibulum suscipit tristique iaculis. Nam vitae risus non eros auctor
tincidunt quis vel nulla. Sed volutpat, libero ac blandit vehicula, est
sem gravida lectus, sed imperdiet sapien risus ut neque.</p>
<p><b>Using as background image:</b></p>
<div data-background = "/framework7/images/pic7.jpg"
style = "background: #aaa; height:60vw; background-size-cover"
class = "lazy lazy-fadeIn">
</div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt.</p>
</div>
</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();</script>
</body>
</html>उत्पादन
ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -
ऊपर दिए गए HTML कोड को इस प्रकार सेव करें framework7_lazy_load.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/framework7_lazy_load.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
उदाहरण उन छवियों के आलसी लोड को निर्दिष्ट करता है, जहां पृष्ठ को नीचे स्क्रॉल करने पर चित्र लोड हो जाएंगे।
विवरण
फ्रेमवर्क 7 आपके अनुप्रयोगों के लिए अलग-अलग रंग थीम प्रदान करता है।
एक रंग विषय नीचे दिए गए तालिका में निर्दिष्ट अनुसार सुचारू रूप से अनुप्रयोगों के साथ काम करने के लिए उपयोग किए जाने वाले विभिन्न प्रकार के थीम रंग प्रदान करता है -
| S.No | थीम प्रकार और विवरण |
|---|---|
| 1 | iOS थीम रंग आप एप्लिकेशन के लिए 10 अलग-अलग डिफ़ॉल्ट आईओएस रंग विषयों का उपयोग कर सकते हैं। |
| 2 | सामग्री थीम रंग फ्रेमवर्क 7 आवेदन के लिए 22 अलग-अलग डिफ़ॉल्ट सामग्री रंग थीम प्रदान करता है। |
रंग विषयों को लागू करना
फ्रेमवर्क 7 आपको मूल तत्व के विषय- [रंग] वर्ग का उपयोग करके विभिन्न विषयों जैसे पेज, लिस्ट-ब्लॉक, नावबार, बटन-पंक्ति आदि पर रंग थीम लागू करने की अनुमति देता है ।
उदाहरण
...
</body>
<div class = "page theme-gray">
...
</div>
<div class = "list-block theme-blue">
...
</div>
<div class = "navbar theme-green">
...
</div>
<div class = "buttons-row theme-red">
...
</div>लेआउट विषय-वस्तु
आप दो विषयों का उपयोग करके अपने आवेदन के लिए डिफ़ॉल्ट लेआउट विषय का उपयोग कर सकते सफेद और अंधेरा । मूल तत्व के लिए लेआउट- [विषय] वर्ग का उपयोग करके विषयों को लागू किया जा सकता है ।
उदाहरण
...
</body>
<div class = "navbar layout-white">
...
</div>
<div class = "buttons-row layout-dark">
...
</div>हेल्पर क्लासेस
फ्रेमवर्क 7 अतिरिक्त सहायक कक्षाएं प्रदान करता है, जिन्हें नीचे सूचीबद्ध किए बिना थीम के बाहर या बिना उपयोग किया जा सकता है -
color-[color] - इसका इस्तेमाल टेक्स्ट कलर ऑफ ब्लॉक या बटन, लिंक, आइकन आदि के कलर को बदलने के लिए किया जा सकता है।
bg-[color] - यह ब्लॉक या एलिमेंट पर पूर्वनिर्धारित बैकग्राउंड कलर सेट करता है।
border-[color] - यह ब्लॉक या तत्व पर पूर्वनिर्धारित सीमा रंग निर्धारित करता है।
विवरण
हेयरलाइन एक ऐसा वर्ग है जो बॉर्डर क्लास का उपयोग करके छवियों के चारों ओर 1px सीमा जोड़ता है। 1.x के विमोचन के साथ, हाइवा ने सीएसएस सीमाओं का उपयोग करने के बजाय छद्म तत्वों से पहले और बाद में: के साथ काम को संशोधित किया ।
हैवेल्स में निम्नलिखित नियम शामिल हैं -
:after- इस छद्म तत्व का उपयोग नीचे और दाएं केशों के लिए किया जाता है ।
:before- इस छद्म तत्व का उपयोग शीर्ष और बाईं ओर के लिए किया जाता है ।
निम्नलिखित कोड स्निपेट का उपयोग दिखाता है : तत्व के बाद ।
.navbar:after {
background-color: red;
}निम्न कोड स्निपेट नीचे के हेयरलाइन टूलबार को हटा देता है -
.navbar:after {
display:none;
}
.toolbar:before {
display:none;
}"नो-बॉर्डर" क्लास
नो-बॉर्डर क्लास का उपयोग करके हेयरलाइन को हटा दिया जाएगा और यह नवबार, टूलबार, कार्ड और इसके तत्वों पर समर्थित है ।
निम्न कोड का उपयोग नाईबार से हेयरलाइन हटाने के लिए किया जाता है -
<div class = "navbar no-border">
...
</div>विवरण
टेम्प्लेट 7 एक हल्का, मोबाइल-पहला जावास्क्रिप्ट इंजन है, जो अजाक्स और डायनामिक पेजों को निर्दिष्ट संदर्भ के साथ टेम्प्लेट 7 टेम्प्लेट के रूप में दर्शाता है और इसके लिए अतिरिक्त स्क्रिप्ट की आवश्यकता नहीं होती है। Template7 एक डिफ़ॉल्ट, हल्के टेम्पलेट इंजन के रूप में फ्रेमवर्क 7 के साथ जुड़ा हुआ है, जो अनुप्रयोगों के लिए तेजी से काम करता है।
प्रदर्शन
JS फ़ंक्शन को स्ट्रिंग संकलित करने की प्रक्रिया टेम्पलेट 7 का सबसे धीमा खंड है। इसलिए, आपको कई बार टेम्पलेट को संकलित करने की आवश्यकता नहीं है, केवल एक बार पर्याप्त है।
//Here initialize the app
var myApp = new Framework7();
// After initializing compile templates on app
var searchTemplate = $('script#search-template').html();
var compiledSearchTemplate = Template7.compile(searchTemplate);
var listTemplate = $('script#list-template').html();
var compiledListTemplate = Template7.compile(listTemplate);
// Execute the compiled templates with required context using onPageInit() method
myApp.onPageInit('search', function (page) {
// Execute the compiled templates with required content
var html = compiledSearchTemplate({/*...some data...*/});
// Do stuff with html
});टेम्प्लेट 7 एक हल्का टेम्प्लेट इंजन है जिसका उपयोग फ्रेमवर्क 7 के बिना स्टैंडअलोन लाइब्रेरी के रूप में किया जाता है। Template7 फाइलें दो तरीकों का उपयोग करके स्थापित की जा सकती हैं -
आप Template7 github भंडार से डाउनलोड कर सकते हैं ।
आप इसे निम्न आदेश द्वारा Bower के माध्यम से स्थापित कर सकते हैं -
या
bower install template7विवरण
टेम्प्लेट 7 में आप एक <script> टैग में विशेष विशेषताओं को निर्दिष्ट करके अपने टेम्प्लेट को स्वचालित रूप से संकलित कर सकते हैं।
निम्नलिखित कोड ऑटो संकलन लेआउट दिखाता है -
<script type = "text/template7" id = "myTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>ऑटो संकलन को शुरू करने के लिए आप निम्नलिखित विशेषताओं का उपयोग कर सकते हैं -
type = "text/template7" - इसका उपयोग टेम्प्लेट 7 को ऑटो कंपाइल को बताने के लिए किया जाता है और यह एक आवश्यक स्क्रिप्ट प्रकार है।
id = "myTemplate" - टेम्पलेट आईडी के माध्यम से सुलभ है और यह एक आवश्यक टेम्पलेट आईडी है।
स्वचालित संकलन के लिए, आपको निम्नलिखित पैरामीटर पास करके ऐप इनिशियलाइज़ेशन को सक्षम करना होगा -
var myApp = new Framework7 ({
//It is used to compile templates on app init in Framework7
precompileTemplates: true,
});Template7.templates / myApp.templates
स्वचालित रूप से संकलित टेम्पलेट्स को ऐप को इनिशियलाइज़ करने के बाद Template7.templates के गुणों के रूप में एक्सेस किया जा सकता है । इसे myApp.templates के रूप में भी जाना जाता है जहाँ myApp ऐप का एक प्रारंभिक उदाहरण है।
आप हमारी index.html फ़ाइल में निम्नलिखित टेम्प्लेट का उपयोग कर सकते हैं -
<script type = "text/template7" id = "personTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
<p>I work as {{position}} at {{company}}</p>
</script>
<script type = "text/template7" id = "carTemplate">
<p>I have a great car, it is {{vendor}} {{model}}, made in {{year}} year.</p>
<p>It has {{power}} hp engine with {{speed}} km/h maximum speed.</p>
</script>ऐप इनिशियलाइज़ेशन के बाद आप जावास्क्रिप्ट में टेम्प्लेट भी एक्सेस कर सकते हैं -
var myApp = new Framework7 ({
//Tell Framework7 to compile templates on app init
precompileTemplates: true
});
// Render person template to HTML, its template is already compiled and accessible as
//Template7.templates.personTemplate
var personHTML = Template7.templates.personTemplate ({
name: 'King Amit',
age: 27,
position: 'Developer',
company: 'AngularJs'
});
// Compile car template to HTML, its template is already compiled and accessible as
//Template7.templates.carTemplate
var carHTML = Template7.templates.carTemplate({
vendor: 'Honda',
model: 'city',
power: 1200hp,
speed: 300
});विवरण
Template7 एक मोबाइल-प्रथम जावास्क्रिप्ट टेम्पलेट इंजन है जिसमें सिंटैक्स की तरह handlebars.js है। यह फ्रेमवर्क 7 में अल्ट्रा लाइटवेट और ब्लेजिंग-फास्ट डिफॉल्ट टेम्पलेट इंजन है।
सबसे पहले, हमें ऐप इनिशियलाइज़ेशन पर निम्नलिखित पैरामीटर को पास करना होगा जो सभी Ajax और डायनेमिक पेजों को टेम्पलेट 7 टेम्पलेट के रूप में प्रस्तुत करता है -
var myApp = new Framework7 ({
template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});| S.No | टेम्प्लेट 7 पेज उपयोग और विवरण |
|---|---|
| 1 | टेम्प्लेट / पृष्ठ डेटा आप ऐप को इनिशियलाइज़ करने पर भेजे गए टेम्पलेट 7 डेटा पैरामीटर में सभी पेज डेटा निर्दिष्ट करके विशिष्ट पृष्ठों के लिए आवश्यक डेटा / संदर्भ पास कर सकते हैं । |
| 2 | कस्टम संदर्भ पास करें फ्रेमवर्क 7 आपको किसी भी डायनेमिक पेज या किसी लोडेड अजाक्स के लिए कस्टम संदर्भ पास करने की अनुमति देता है। |
| 3 | लोड टेम्पलेट्स सीधे आप डायनामिक पेज के रूप में फ्लाई पर टेम्पलेट्स को रेंडर और लोड कर सकते हैं। |
| 4 | URL क्वेरी यदि आप Ajax पृष्ठों को प्रस्तुत करने के लिए टेम्पलेट 7 का उपयोग कर रहे हैं, तो इसका संदर्भ हमेशा विशेष संपत्ति url_query के साथ बढ़ाया जाएगा । |
उदाहरण
निम्नलिखित उदाहरण लिंक प्रदान करते हैं, जो उपयोगकर्ता जानकारी जैसे उपयोगकर्ता विवरण, उपयोगकर्ता पसंद आदि प्रदर्शित करता है, जब आप उन लिंक पर क्लिक करते हैं।
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<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>Framework7</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 = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Template7 Pages</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<div class = "list-block">
<ul>
<li>
//plain data objects allow to pass custom context to loaded page using 'data-context-name' attribute
<a href = "#" data-template = "about" data-context-name = "about" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'About'
<div class = "item-title">About</div>
</div>
</a>
</li>
<li>
//a context name for this link we pass context path from template7Data root
<a href = "/framework7/src/likes.html" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'Likes'
<div class = "item-title">Likes</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/template7" id = "about">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">About Me</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "about" class = "page">
<div class = "page-content">
<div class = "content-block">
<div class = "content-block-inner">
//displays the details of the user by using the 'my-app.js' file
<p>Hello, i am <b>{{firstname}} {{lastname}}</b>,
<b>{{age}}</b> years old and working as
<b>{{position}}</b> at <b>{{company}}</b>.</p>
</div>
</div>
</div>
</div>
</div>
</script>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script type = "text/javascript"
src = "/framework7/src/js/my-app.js">
</script>
</body>
</html>मेरी-app.js
// Initialize your app
var myApp = new Framework7 ({
animateNavBackIcon: true,
// Enable templates auto precompilation
precompileTemplates: true,
// Enabled rendering pages using Template7
template7Pages: true,
// Specify Template7 data for pages
template7Data: {
//provides the url for different page with data-page = "likes"
'url:likes.html': {
likes: [
{
title: 'Nelson Mandela',
description: 'Champion of Freedom'
},
{
title: 'Srinivasa Ramanujan',
description: 'The Man Who Knew Infinity'
},
{
title: 'James Cameron',
description: 'Famous Filmmaker'
}
]
},
about: {
firstname: 'William ',
lastname: 'Root',
age: 27,
position: 'Developer',
company: 'TechShell',
}
}
});
// Add main View
var mainView = myApp.addView('.view-main', {
// Enable dynamic Navbar
dynamicNavbar: true
});likes.html
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">Likes</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "likes" class = "page">
<div class = "page-content">
<div class = "content-block-title">My Likes</div>
<div class = "list-block media-list">
//iterate through likes
<ul>
{{#each likes}}
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title-row">
//displays the title and description by using the 'my-app.js' file
<div class = "item-title">{{title}}</div>
</div>
<div class = "item-subtitle">{{description}}</div>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>उत्पादन
ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -
ऊपर दिए गए HTML कोड को इस प्रकार सेव करें index.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/index.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
उदाहरण लिंक प्रदान करता है, जो उपयोगकर्ता जानकारी प्रदर्शित करता है जैसे उपयोगकर्ता विवरण, उपयोगकर्ता पसंद करता है जब आप उन लिंक पर क्लिक करते हैं।
विवरण
जब आप लिंक और बटन टैप करते हैं, तो वे हाइलाइट किए जाते हैं। यह फ्रेमवर्क 7 में सक्रिय स्थिति द्वारा किया जाता है ।
- यह एक मूल ऐप की तरह व्यवहार करता है, न कि वेब ऐप की तरह।
- इसमें एक अंतर्निहित फास्ट क्लिक लाइब्रेरी है और इसे सक्षम किया जाना चाहिए।
- सक्रिय राज्य वर्ग सीएसएस रूप में ही है सक्रिय: चयनकर्ता।
- सक्रिय राज्य को <html> तत्व में वॉच-एक्टिव-स्टेट क्लास जोड़कर सक्षम किया गया है ।
निम्नलिखित कोड सीएसएस शैली में सक्रिय स्थिति के लिए उपयोग किया जाता है -
/* Usual state */
.my-button {
color: red;
}
/* Active/tapped state */
.my-button.active-state {
color: blue;
}जब सक्रिय स्थिति या तेज़ क्लिक अक्षम हो जाता है, तो निम्न कोड कमबैक संगतता दिखाता है -
/* Usual state */
.my-button {
color: red;
}
/* Active/tapped state */
.my-button.active-state {
color: blue;
}
/* Fallback, when active state is disabled */
html:not(.watch-active-state) .my-button:active {
color: blue;
}विवरण
टैप होल्ड ईवेंट का उपयोग एक निरंतर के बाद ट्रिगर (सक्षम) करने के लिए किया जाता है और केवल टच इवेंट को पूरा करने के लिए इसे टैप होल्ड इवेंट कहा जाता है । टैब होल्ड एक अंतर्निहित होता हैFast Clicks पुस्तकालय।
निम्न मापदंडों को निष्क्रिय करने या सक्षम करने और डिफ़ॉल्ट रूप से कॉन्फ़िगर करने के लिए उपयोग किया जाता है -
| S.No | पैरामीटर और विवरण | प्रकार | चूक |
|---|---|---|---|
| 1 | tapHold यह सही होने पर सेट होने की घटनाओं को टैप करने के लिए। |
बूलियन | असत्य |
| 2 | tapHoldDelay यह लक्ष्य तत्व पर टैपहोल्ड घटना को ट्रिगर करने से पहले नल को पकड़ने की अवधि को निर्दिष्ट करता है। |
संख्या | 750 |
| 3 | tapHoldPreventClicks ईवेंट पर क्लिक करने के बाद टैप होल्ड इवेंट को निकाल नहीं दिया जाएगा। |
बूलियन | सच |
निम्न कोड का उपयोग सक्षम टैप होल्ड ईवेंट के लिए किया जाता है -
var myApp = new Framework7 ({
tapHold: true //enable tap hold events
});
var $$ = Dom7;
$$('.some-link').on('taphold', function () {
myApp.alert('Tap hold fired!');
});विवरण
टच रिपल एक प्रभाव है जो केवल फ्रेमवर्क 7 सामग्री विषय में समर्थित है। डिफ़ॉल्ट रूप से, इसे सामग्री थीम में सक्षम किया गया है और आप इसे सामग्री के उपयोग से अक्षम कर सकते हैं : गलत पैरामीटर।
तरंग तत्व
आप कुछ सीएसएस चयनकर्ताओं से मिलान करने के लिए रिपल तत्वों को सक्षम कर सकते हैं जैसे -
- ripple
- a.link
- a.item-link
- .button
- .tab-link
- .label-radio
- .लबाब-चेकबॉक्स आदि।
ये MaterialRippleElements पैरामीटर में निर्दिष्ट हैं । आपको स्पर्श तरंग को सक्षम करने की आवश्यकता है , तत्व के चयनकर्ता को रिपल इफ़ेक्ट का उपयोग करने के लिए materialRippleElements पैरामीटर में जोड़ें , या सिर्फ रिपल क्लास का उपयोग करें ।
लहर लहर रंग
रिपल के रंग को तत्व में रिपल- [रंग] वर्ग को जोड़कर तत्व पर बदला जा सकता है ।
उदाहरण के लिए -
<a href = "#" class = "button ripple-orange">Ripple Button</a>या आप नीचे दिखाए अनुसार CSS का उपयोग करके तरंग तरंग रंग को परिभाषित कर सकते हैं -
.button .ripple-wave {
background-color: #FFFF00;
}तरंग तत्वों को अक्षम करें
आप उन तत्वों के लिए रिपल क्लास को जोड़कर कुछ निर्दिष्ट तत्वों के लिए लहर को निष्क्रिय कर सकते हैं । उदाहरण के लिए -
<a href = "#" class = "button no-ripple">Ripple Button</a>