Open In App

How to design buttons 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 various button styles for the user interface of mobile applications.

Downloads for EasyUI for jQuery:

 https://www.jeasyui.com/download/index.php

Please take care of proper file paths while implementing your codes.

Example 1: The following code demonstrates basic login type buttons for some user interface purposes.

html




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
       content="initial-scale=1.0, maximum-scale=1.0,
       user-scalable=no">
    <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>
            <div class="m-toolbar">
                <span class="m-title">Login</span>
            </div>
        </header>
        <div style="margin:20px auto;width:100px;
                    height:100px;border-radius:100px;
                    overflow:hidden">
            <img src="images/geeksImage.PNG" 
                 style="margin:0;width:100%;height:100%;">
        </div>
        <div style="padding:0 20px">
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" 
                       data-options="prompt:'Enter username',
                                     iconCls:'icon-man'" 
                       style="width:100%;height:38px">
            </div>
            <div>
                <input class="easyui-passwordbox" 
                       data-options="prompt:'Enter password'" 
                       style="width:100%;height:38px">
            </div>
            <div style="text-align:center;margin-top:30px">
                <a href="#" class="easyui-linkbutton" 
                   style="width:100%;height:40px">
                <span style="font-size:16px">
                 Login
                </span></a>
            </div>
            <div style="text-align:center;margin-top:30px">
                <a href="#" class="easyui-linkbutton" 
                   plain="true" outline="true"
                   style="width:100px;height:35px">
                <span style="font-size:16px">
                 Register
                </span></a
            </div>
        </div>
    </div>
</body>
</html>


Output: 
 

Example 2: The following code shows some colorful buttons to include in the user interface application for mobiles.

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">
    
     <!--EasyUI stylesheet for colours -->
    <link rel="stylesheet" type="text/css"
          href="themes/mobile.css">
    <link rel="stylesheet" type="text/css"
          href="themes/color.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">
          
        <div style="padding:20px">
              
              
        <p>Buttons with colors</p>
              
        <p><a href="#" class="easyui-linkbutton c1"
              style="width:100%">Green</a></p>
        <p><a href="#" class="easyui-linkbutton c2"
              style="width:100%">Grey</a></p>
        <p><a href="#" class="easyui-linkbutton c3"
              style="width:100%">Pink</a></p>
        <p><a href="#" class="easyui-linkbutton c4" 
              style="width:100%">light-blue</a></p>
        <p><a href="#" class="easyui-linkbutton c5" 
              style="width:100%">Red</a></p>
        <p><a href="#" class="easyui-linkbutton c6" 
              style="width:100%">Blue</a></p>
  
        </div>
    </div>
</body>    
</html>


Output: 
 

Example 3: The following code demonstrates a group of buttons that lie in a single line either horizontally or vertically.

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>
    <style>
        p{
            line-height:150%;
        }
          
    </style>
</head>
<body>
    <div class="easyui-navpanel">
        <header>
            <div class="m-toolbar">
                <div class="m-title">
                  EasyUI Button Groups
                </div>
            </div>
        </header>
        <!--EasyUI allows buttons along the same line -->
        <div style="text-align:center;padding:10px">
            <span class="m-buttongroup">
                <a href="javascript:void(0)"
                   class="easyui-linkbutton" 
                   data-options="toggle:true,group:'g1',selected:true" 
                   onclick="display('#htmlDiv')" 
                   style="width:80px;height:30px">HTML</a
                <a href="javascript:void(0)"
                   class="easyui-linkbutton" 
                   data-options="toggle:true,group:'g1'" 
                   onclick="display('#cssDiv')" 
                   style="width:80px;height:30px">CSS</a
                <a href="javascript:void(0)" 
                   class="easyui-linkbutton" 
                   data-options="toggle:true,group:'g1'" 
                   onclick="display('#phpDiv')" 
                   style="width:80px;height:30px">PHP</a
            </span>
        </div>
        <div id="items" style="padding:10px 20px;">
            <div id="htmlDiv" class="m-item">
                  
             <p>HTML stands for HyperText Markup Language. 
                It is used to design web pages using a markup
                language. HTML is the combination of Hypertext
                and Markup language. Hypertext defines the link 
                between the web pages. A markup language is used 
                to define the text document within tag which defines 
                the structure of web pages..
             </p>
  
            </div>
            <div id="cssDiv" class="m-item" style="display:none">
                  
             <p>Cascading Style Sheets, fondly referred to as CSS, 
                is a simply designed language intended to simplify 
                the process of making web pages presentable.
                CSS allows you to apply styles to web pages.
                More importantly, CSS enables you to do this 
                independent of the HTML that makes up each web page.
             </p>
  
            </div>
            <div id="phpDiv" class="m-item" style="display:none">
                  
             <p>The term PHP is an acronym for PHP: Hypertext
                Preprocessor. PHP is a server-side scripting language 
                designed specifically for web development. PHP can be 
                easily embedded in HTML files and HTML codes can also 
                be written in a PHP file.
             </p>
  
            </div>
        </div>
    </div>
  
    <script>
        function display(id){
            $('div.m-item').hide();
            $(id).show();
        }
    </script>
      
</body>    
</html>


Output: 
 

Example 4: The following code demonstrates switch buttons like “on/off” for internet connection.

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">
    
     <!--EasyUI stylesheet for colours -->
    <link rel="stylesheet" type="text/css"
          href="themes/mobile.css">
    <link rel="stylesheet" type="text/css"
          href="themes/color.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>
            <div class="m-toolbar">
                <span class="m-title">
                  Switch Button Settings
                </span>
            </div>
        </header>
        <ul class="m-list">
            <li>
                <span>Connections</span>
                <div class="m-right">
                <input class="easyui-switchbutton"
                       checked></div>
            </li>
            <li>
                <span>Bluetooth</span>
                <div class="m-right">
                <input class="easyui-switchbutton" 
                       checked></div>
            </li>
            <li>
                <span>Mobile Data</span>
                <div class="m-right">
                <input class="easyui-switchbutton" 
                       data-options="checked:false">
                </div>
            </li>
              
            <li>
                <a href="javascript:void(0)">More...</a>
            </li>
        </ul>
    </div>
</body>    
</html>


Output: 
 

 



Last Updated : 10 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads