framework7 Archives - Page 5 of 5 - Donotsad where can learn any thing work project and make money

Aug 10

Framework7 – Search Bar

Framework7 – Search Bar ”; Previous Next Description Framework 7 allows searching the elements by using the searchbar class. Search Bar Parameters S.No Parameters & Description Type Default 1 searchList It searches the CSS selector or HTML element of the list. string or HTML Element – 2 searchIn You can search the list view elements of CSS selectors, also searches the elements by passing .item-title, .item-text classes. string ”.item-title” 3 found It searches the CSS selector or HTML element using “found” element. Further, it uses .searchbar-found element if there is no element specified. string or HTML Element – 4 notfound It searches the CSS selector or HTML element using “not-found” element. Further, it uses .searchbar-not-found element if there is no element specified. string or HTML Element – 5 overlay It searches the CSS selector or HTML element using “searchbar overlay” element and uses .searchbar-overlay element, if there is no element specified. string or HTML Element – 6 ignore You can ignore the CSS selector for items by using the searchbar. string ”.searchbar-ignore” 7 customSearch When it is enabled, the searchbar will not search through any of list blocks which is specified by searchList and you will be allowed to use custom search functionality. boolean false 8 removeDiacritics When searching for an element, remove the diacritics by enabling this parameter. boolean false 9 hideDividers This parameter will hide item dividers and group title, if there are no items. boolean true 10 hideGroups This parameter will hide the groups, if there are no items found in the list view groups. boolean true Search Bar Callbacks S.No Callbacks & Description Type Default 1 onSearch This method will fire callback function while doing search. function (s) – 2 onEnable This method will fire callback function when Search Bar becomes active. function (s) – 3 onDisable This method will fire callback function when Search Bar becomes inactive. function (s) – 4 onClear This method will fire callback function when you click on the “clear” element. function (s) – Search Bar Properties S.No Properties & Description 1 mySearchbar.params Represents the initialized parameters passed with object. 2 mySearchbar.query Searches the current query. 3 mySearchbar.searchList Defines the search list block. 4 mySearchbar.container Defines the search bar container with HTML element. 5 mySearchbar.input Defines the search bar input with HTML element. 6 mySearchbar.active It defines whether search bar is enabled or disabled. Search Bar Methods S.No Methods & Description 1 mySearchbar.search(query); This method searches the passed query. 2 mySearchbar.enable(); It enables the search bar. 3 mySearchbar.disable(); It disables the search bar. 4 mySearchbar.clear(); You can clear the query and search results. 5 mySearchbar.destroy(); It destroys the search bar instance. Search Bar JavaScript Events S.No Event & Description Target 1 search You can fire this event while searching elements. <div class=”list-block”> 2 clearSearch This event will get fired when user clicks on the clearSearch element. <div class=”list-block”> 3 enableSearch When Search Bar becomes enable, this event will get fired. <div class=”list-block”> 4 disableSearch When Search Bar gets disabled, and user clicks on cancel button, or “search bar-overlay” element, this event will get fired. <div class=”list-block”> Example The following example demonstrates the use of search bar on scroll in the Framework7 − <!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”>

Aug 10

Framework7 – Home

Framework7 Tutorial PDF Version Quick Guide Resources Job Search Discussion Framework7 is a free and open source framework for mobile HTML. It is used for developing hybrid mobile apps or web apps for iOS and Android devices. This tutorial will teach you basic Framework7 and will also take you through some detailed concepts. Audience This tutorial has been prepared for the beginners to help them understand basic Framework7. After completing this tutorial, you will find yourself at a moderate level of expertise in Framework7 from where you can take yourself to next levels. Prerequisites Framework7 is based on HTML5 and JavaScript programming language, so if you have basic understanding on JavaScript programming and HTML5 then it will be a fun to learn. Print Page Previous Next Advertisements ”;

Aug 10

Framework7 – Layouts

Framework7 – Layouts ”; Previous Next Description Framework7 provides different types of layouts for your application. It supports three types of Navbar/Toolbar layouts − S.No Layout Types & Description 1 Static Layout The static layout is most often used layout-type and includes navbar and toolbar, which can be a scrollable page content and each page contains its own navbar and toolbar. 2 Fixed Layout Fixed layout includes its own navbar and toolbar, which can be visible on screen and cannot be scrollable on page. 3 Through Layout In this layout, the navbar and the toolbar appears fixed for all pages within single view. 4 Mixed Layout You can mix the different types of layouts in the single view. No Navbar/Toolbar If you do not want to use navbar and toolbar, then do not include appropriate classes (navbar-fixed, navbar-through, toolbar-fixed, toolbar-through) to page/pages/view. Print Page Previous Next Advertisements ”;

Aug 10

Framework7 – Environment

Framework7 – Environment ”; Previous Next In this chapter, we will discuss about how to install and setup Framework7. You can download the Framework7 in two ways − Download from Framework7 Github repository You can install the Framework7, using Bower as shown below − bower install framework7 After successful installation of Framework7, you need to follow the below given steps to make use of Framework7 in your application − Step 1 − You need to install gulp-cli to build development and dist versions of Framework7 by using the following command. npm install gulp-cli The cli stands for Command Line Utility for Gulp. Step 2 − The Gulp must be installed globally by using the following command. npm install –global gulp Step 3 − Next, install the NodeJS package manager, which installs the node programs that makes it easier to specify and link dependencies. The following command is used to install the npm. npm install Step 4 − The development version of Framework7 can be built by using the following command. npm build Step 5 − Once you build the development version of Framework7, start building the app from dist/ folder by using the following command. npm dist Step 6 − Keep your app folder in the server and run the following command for navigation between pages of your app. gulp server Download Framework7 Library from CDNs A CDN or Content Delivery Network is a network of servers designed to serve files to users. If you use a CDN link in your web page, it moves the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if a visitor to your webpage has already downloaded a copy of Framework7 from the same CDN, it won”t have to be re-downloaded. You can include the following CDN files into the HTML document. The following CDNs are used in an iOS App layout − <link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css” /> It is used to include Framework7 iOS CSS Library to your application. <link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css” /> It is used to include Framework7 iOS related color styles to your application. The following CDNs are used in Android/Material App Layout − <script src = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js”></script> It is used to include Framework7 JS library to your application. <script src = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css”></script> It is used to include Framework7 Material styling to your application. We are using the CDN versions of the library throughout this tutorial. We use AMPPS(AMPPS is a WAMP, MAMP and LAMP stack of Apache, MySQL, MongoDB, PHP, Perl & Python) server to execute all our examples. Example The following example demonstrates the use of simple application in the Framework7, which will display the alert box with the customized message when you click on the navigation bar. <!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> Next, create one more HTML page i.e. envirmnt_about.html as shown below − 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> Output Let us carry out the following steps to see how the above given code works − Save the above HTML code as framework7_environment.html file in your server root folder. Open this HTML file as http://localhost/framework7_environment.html and output is displayed as shown below. When you click on the navigation bar, it will display the alert box with