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: