Open In App

How to create lists and links using jQuery EasyUI Mobile ?

Last Updated : 15 Dec, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

In this article we will learn how to design lists, group them and create links for easy navigation using jQuery EasyUI Mobile.

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 file paths of pre-compiled library files while implementation.

Example 1: The following example demonstrates lists and create links via buttons using jQuery EasyUI Mobile.

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 libraries of EasyUI Mobile-->
    <script type="text/javascript" src="jquery.easyui.mobile.js">
    </script>
</head>
  
<body>
  
    <!--'easyui-navpanel' class is used for nav panel-->
    <div class="easyui-navpanel">
        <header>
            <div class="m-toolbar">
                <span class="m-title">List Button</span>
            </div>
        </header>
          
        <!--'m-list' class is used for simple list-->
        <ul class="m-list">
            <li>C
                <div class="m-right">
                    <a href=
"https://www.geeksforgeeks.org/c-programming-language/" 
                        class="easyui-linkbutton">
                        Add
                    </a>
                </div>
            </li>
            <li>C++
                <div class="m-right">
                    <a href=
"https://www.geeksforgeeks.org/c-plus-plus/" 
                        class="easyui-linkbutton">
                        Add
                    </a>
                </div>
            </li>
            <li>Java
                <div class="m-right">
                    <a href=
                "https://www.geeksforgeeks.org/java/" 
                        class="easyui-linkbutton">
                        Add
                    </a>
                </div>
            </li>
            <li>Python
                <div class="m-right">
                    <a href=
"https://www.geeksforgeeks.org/python-programming-language/"
                        class="easyui-linkbutton">
                        Add
                    </a>
                </div>
            </li>
        </ul>
    </div>
</body>
  
</html>
 






                        










Output: 


    

  • Before execute: 
     
    • 





After execute: 




 


Example 2: The following example demonstrates grouping of lists using the above plugin.






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 libraries of EasyUI Mobile-->


    <script type="text/javascript" src="jquery.easyui.mobile.js"> 


    </script> 


</head> 


  


<body> 


  


    <!--'easyui-navpanel' class for navigation panel-->


    <div class="easyui-navpanel"> 


        <header> 


            <div class="m-toolbar"> 


                <span class="m-title"> 


                    List group and link lists 


                </span> 


            </div> 


        </header> 


        <!--'m-list' class is used for simple lists -->


        <ul class="m-list"> 


            <!--'m-list-group' class is used to group lists -->


            <li class="m-list-group">Algorithms</li> 


            <li> 


                <a href= 


"https://www.geeksforgeeks.org/analysis-of-algorithms-set-1-asymptotic-analysis/"


                    onclick="display(this)"> 


                    Analysis of algorithms 


                </a> 


            </li> 


  


            <li> 


                <a href= 


"https://www.geeksforgeeks.org/searching-algorithms/"


                    onclick="display(this)"> 


                    Searching algorithms 


                </a> 


            </li> 


              


            <li> 


                <a href= 


"https://www.geeksforgeeks.org/geometric-algorithms/"


                    onclick="display(this)"> 


                    Geometric algorithms 


                </a> 


            </li> 


  


            <li><a href= 


"https://www.geeksforgeeks.org/greedy-algorithms/"


                    onclick="display(this)"> 


                    Greedy algorithms 


                </a> 


            </li> 


  


            <li class="m-list-group"> 


                Web Technologies 


            </li> 


              


            <li><a href="" onclick="display(this)"> 


                HTML</a> 


            </li> 


              


            <li> 


                <a href= 


"https://www.geeksforgeeks.org/javascript-tutorial/" 


                    onclick="display(this)"> 


                    Javascript 


                </a> 


            </li> 


        </ul> 


    </div> 


  


    <div id="divID2" class="easyui-navpanel"> 


        <header> 


            <div class="m-toolbar"> 


                <span id="panel2-title" class="m-title"> 


                    Details 


                </span> 


                <div class="m-left"> 


  


                    <!--'m-back' class is used for  


                        going back-->


                    <a href="javascript:void(0)" 


                        class="easyui-linkbutton m-back" 


                        plain="true" outline="true"


                        onclick="$.mobile.back()"> 


                        Back 


                    </a> 


                </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.back()"> 


                Go Back 


            </a> 


        </div> 


    </div> 


      


    <script type="text/javascript"> 


  


        function display(target) { 


  


            var link = $(target).text(); 


            $('#panel2-title').html(link); 


            $.mobile.go('#divID2'); 


        } 


    </script> 


</body> 


  


</html>



















                        







                        










Output: 


    

  • Before execute: 
    • 





    

  • After execute: 
    • 





Example 3: The following example demonstrates simple lists with images using the above plugin.






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 libraries of EasyUI Mobile-->


    <script type="text/javascript" src="jquery.easyui.mobile.js"> 


    </script> 


      


    <style> 


        #listID .list-image { 


            float: left; 


            width: 32px; 


            height: 32px; 


            border: 0; 


            margin-right: 5px; 


        } 


  


        #listID .list-header { 


            font-size: 14px; 


            font-weight: bold; 


        } 


  


        #listID .list-content { 


            text-overflow: ellipsis; 


            overflow: hidden; 


        } 


    </style> 


</head> 


  


<body> 


  


    <!--'easyui-navpanel' class for  


        navigation panel-->


    <div class="easyui-navpanel"> 


        <header> 


            <div class="m-toolbar"> 


                <span class="m-title"> 


                    Images for simple lists 


                </span> 


            </div> 


        </header> 


  


        <!--'m-list' class is used -->


        <ul id="listID" class="m-list"> 


            <li> 


                <!--'list-image' class is used -->


                <img class="list-image" src="images/html.png" /> 


  


                <!--'list-header' class is used for heading-->


                <div class="list-header">HTML</div> 


                  


                <!--'list-content' class for the list content-->


                <div class="list-content"> 


                    HTML stands for HyperText Markup Language. 


                    It is used to design web pages. 


                </div> 


            </li> 


              


            <li> 


                <img class="list-image" src="images/php.png" /> 


                <div class="list-header">PHP</div> 


                <div class="list-content"> 


                    PHP is a server-side scripting language 


                    designed specifically for web development. 


                </div> 


            </li> 


        </ul> 


    </div> 


</body> 


  


</html>



















                        







                        










Output: 
 




 


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        How to create a Mini Button using jQuery Mobile ?
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to design tabs and pills using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design tree structure for files using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design accordion using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design badges for mobiles using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design datalists for mobiles using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design buttons for mobiles using jQuery EasyUI Mobile?
            

        
    
        
            

                How to design menu using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design login dialog using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to edit rows in datagrid using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design navigation panel with ajax loading using jQuery EasyUI Mobile ?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
G

        

            
        

        

                                    


                                    

                                        geetanjali16                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox