Open In App

How to design datalists for mobiles using jQuery EasyUI Mobile ?

Improve
Improve
Like Article
Like
Save
Share
Report

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: 
 

 

 

 

 



Last Updated : 09 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads