How to design navigation panel with ajax loading using jQuery EasyUI Mobile ?
In this article, we will learn how to design navigation panel with ajax loading using jQuery EasyUI Mobile plugin.
EasyUI is a 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.
Downloads for EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
Please take care of proper file paths for the pre-compiled library files while code implementation.
Example 1: The following code demonstrates the design of two navigation panel with the ‘Go Back’ option to another panel using jQuery EasyUI Mobile plugin.
<!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 libraries of EasyUI Mobile--> <script type="text/javascript" src="jquery.easyui.mobile.js"> </script> </head> <body> <!--'easyui-navpanel' class of EasyUI Mobile for navigation panel--> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <div class="m-title"> Handling navigation panel </div> </div> </header> <div style="margin:50px 0 0;text-align:center"> <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100px;height:30px" onclick="$.mobile.go('#divID2')"> Goto Panel 2 </a> </div> </div> <div id="divID2" class="easyui-navpanel"> <header> <div class="m-toolbar"> <div class="m-title"> Navigation panel 2 </div> <div class="m-left"> <!--'m-back' class is used--> <a href="#" class="easyui-linkbutton m-back" data-options= "plain:true,outline:true,back:true"> <!--data option back is set to 'true' --> Back </a> </div> </div> </header> <div style="margin:50px 0 0;text-align:center"> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$.mobile.back()"> Go Back </a> </div> <footer> <div class="m-toolbar"> <div class="m-title">Footer Content</div> </div> </footer> </div> </body> </html> |
Output:
Example 2: The following code demonstrates the Ajax loading of webpage content using jQuery EasyUI Mobile plugin.
<!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 libraries of EasyUI Mobile--> <script type="text/javascript" src="jquery.easyui.mobile.js"> </script> </head> <body> <!--'easyui-navpanel' class of EasyUI Mobile for navigation panel--> <div class="easyui-navpanel" data-options="href:'displayContent.html'" style="padding:10px"> <!--For Ajax loading of any page, just set the data-options attribute with file name--> <header> <div class="m-toolbar"> <div class="m-title"> Ajax Content </div> </div> </header> <footer> <div class="m-toolbar"> <div class="m-title"> Footer Content </div> </div> </footer> </div> </body> </html> |
displayContent.html The following is the code content for the file “displayContent.html” which is used in the above example code.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p style="font-size:14px"> Ajax content loaded from file </p> <p> Ajax is an acronym for Asynchronous Javascript and XML. It is used to communicate with the server without refreshing the web page and thus increasing the user experience and better. Facebook, Instagram, Twitter etc are considered the situation when check news feed and if like someone post simply click the like button and the like count is added without refreshing the page. Now imagine the situation if there would be the case, click the like button and the complete page would be loaded again which will make such processes. </p> </body> </html> |
Output:
Please Login to comment...