How to design datalists for mobiles using jQuery EasyUI Mobile ?
EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.
In this article, we will learn to design datalists for mobile interface. Datalists are dropdown lists with pre-defined input options.
Downloads for EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
Please take care of proper file paths while implementing your mobile application codes.
Example 1: The following code demonstrates the simple datalist using jQuery EasyUI.
html
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- EasyUI specific stylesheets--> <link rel="stylesheet" type="text/css" href="themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/mobile.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <!--jQuery library --> <script type="text/javascript" src="jquery.min.js"> </script> <!--jQuery libraries of EasyUI and EasyUI Mobile --> <script type="text/javascript" src="jquery.easyui.min.js"> </script> <script type="text/javascript" src="jquery.easyui.mobile.js"> </script></head><body> <div class="easyui-navpanel"> <header> <!--EasyUI m-toolbar class is used --> <div class="m-toolbar"> <span class="m-title"> Basic DataList </span> </div> </header> <!--EasyUI easyui-datalist class is used --> <ul class="easyui-datalist" data-options=" fit: true, lines: true, border: false "> <li>BMW</li> <li>Mercedes</li> <li>Bentley</li> <li><a href="javascript:void(0)" class="datalist-link"> Audi </a></li> <li><a href="javascript:void(0)" class="datalist-link"> Volkswagen </a> </li> <li>Tesla</li> <li>Brio</li> </ul> </div></body></html> |
Output:
Example 2: The following code demonstrates grouped datalist using jQuery EasyUI. On click of each item of the datalist, it displays the respective item content with a “Back” link.
html
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- EasyUI specific stylesheets--> <link rel="stylesheet" type="text/css" href="themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/mobile.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <!--jQuery library --> <script type="text/javascript" src="jquery.min.js"> </script> <!--jQuery libraries of EasyUI --> <script type="text/javascript" src="jquery.easyui.min.js"> </script> <!--jQuery library EasyUI Mobile --> <script type="text/javascript" src="jquery.easyui.mobile.js"> </script></head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title"> DataList group </span> </div> </header> <div id="datalistID" data-options=" fit: true, border: false, lines: true"> </div> </div> <div id="divID" class="easyui-navpanel"> <header> <!--EasyUI 'm-toolbar' class is used--> <div class="m-toolbar"> <span id="divID-title" class="m-title"> Car Details </span> <!--EasyUI 'easyui-linkbutton' class is used for link and 'm-back' class is used for backtrack --> <div class="m-left"> <a href="javascript:void(0)" class="easyui-linkbutton m-back" plain="true" outline="true" onclick="$.mobile.back()"> Back </a> </div> </div> </header> </div> <script> // The listitems can be grouped var data = [ { "group": "Group1", "item": "Audi" }, { "group": "Group1", "item": "Mercedes" }, { "group": "Group2", "item": "Bentley" }, { "group": "Group2", "item": "BMW" }, { "group": "Group3", "item": "Sedan" }, { "group": "Group3", "item": "SUV" } ]; // jQuery function for datalist $(function () { $('#datalistID').datalist({ data: data, textField: 'item', groupField: 'group', textFormatter: function (value) { return'<a href="javascript:void(0)" class="datalist-link">' + value + '</a>'; }, /* On click of one row,it takes to the #divID-title with respective item */ onClickRow: function (index, row) { $('#divID-title').html(row.item); $.mobile.go('#divID'); } }) }) </script></body></html> |
Output:
Example 3: The following example demonstrates checkbox for datalist.
html
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- EasyUI specific stylesheets--> <link rel="stylesheet" type="text/css" href="themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/mobile.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <!--jQuery library --> <script type="text/javascript" src="jquery.min.js"> </script> <!--jQuery libraries of EasyUI --> <script type="text/javascript" src="jquery.easyui.min.js"> </script> <!--jQuery library EasyUI Mobile --> <script type="text/javascript" src="jquery.easyui.mobile.js"> </script></head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title"> DataList selection </span> </div> </header> <div id="datalistID" data-options=" fit: true, border: false, lines: true, checkbox: true, singleSelect: false "> </div> </div> <script> // The listitems can be grouped var data = [ { "group": "Group1", "item": "Audi" }, { "group": "Group1", "item": "Mercedes" }, { "group": "Group2", "item": "Bentley" }, { "group": "Group2", "item": "BMW" }, { "group": "Group3", "item": "Sedan" }, { "group": "Group3", "item": "SUV" } ]; // jQuery function for datalist $(function () { $('#datalistID').datalist({ data: data, textField: 'item', groupField: 'group' }) }) </script></body></html> |
Output:
Please Login to comment...