¿Cómo diseñar insignias para móviles usando jQuery EasyUI Mobile?

EasyUI es un marco HTML5 para usar componentes de interfaz de usuario basados ​​en tecnologías jQuery, React, Angular y Vue. Ayuda a crear funciones para aplicaciones móviles y web interactivas, lo que ahorra mucho tiempo a los desarrolladores.

En este artículo, aprenderemos sobre las insignias para la interfaz móvil. Insignias

Descargas para EasyUI para jQuery: 

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

Tenga cuidado con las rutas de archivo para archivos precompilados mientras implementa en sus códigos para aplicaciones móviles.

Ejemplo 1: el siguiente ejemplo muestra algunas insignias básicas para aplicaciones móviles que utilizan el marco 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">
  
        <!-- m-badge class is used for badges-->
  
        <div style="padding:30px 40px">
            <a href="#" class="easyui-linkbutton"
                iconCls="icon-ok">
                Badge 1
                <span class="m-badge">3</span>
            </a>
        </div>
        <div style="padding:30px 40px">
            <a href="#" class="easyui-linkbutton" 
                data-options="iconCls:'icon-large-picture',
                iconAlign:'top',size:'large'">
                Badge 2
                <span class="m-badge">4</span>
            </a>
            <a href="#" class="easyui-linkbutton" 
                data-options="iconCls:'icon-large-shapes',
                    iconAlign:'top', size:'large'" 
                    style="margin-left:20px">
                Badge 3
                <span class="m-badge">5</span>
            </a>
        </div>
        <div style="padding:30px 40px">
            <a href="#" class="easyui-linkbutton m-badge" 
                data-badge="23" style="width:100px;
                    height:40px; margin-left:20px">
                Badge Attr
            </a>
        </div>
    </div>
</body>
  
</html>

Producción:

Ejemplo 2: El siguiente ejemplo muestra insignias de lista y pie de página para aplicaciones móviles que usan el marco 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/color.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">
                    List and Footer Badges
                </span>
            </div>
        </header>
  
        <!-- m-list class is used here-->
        <ul class="m-list">
            <li>Mobile App
                <div class="m-right">
                    <span class="m-badge" 
                        style="margin-top:10px">
                        234
                    </span>
                </div>
            </li>
  
            <li>Web Design
                <div class="m-right">
                    <span class="m-badge c1" 
                        style="margin-top:10px">12
                    </span>
                </div>
            </li>
            <li>IoT
                <div class="m-right">
                    <span class="m-badge c2" 
                        style="margin-top:10px">6
                    </span>
                </div>
            </li>
        </ul>
  
        <!-- m-buttongroup class is used here-->
        <footer>
            <div class="m-buttongroup 
                m-buttongroup-justified" 
                style="width:100%">
                <a href="#" class="easyui-linkbutton" 
                data-options="iconCls:'icon-large-picture',
                size:'large', iconAlign:'top',plain:true">
                    Photos
                </a>
                  
                <a href="#" class="easyui-linkbutton" 
                    data-options="iconCls:'icon-large-clipart',
                    size:'large', iconAlign:'top',plain:true">
                    Artwork
                </a>
                  
                <a href="#" class="easyui-linkbutton" 
                    data-options="iconCls:'icon-large-shapes',
                    size:'large', iconAlign:'top',plain:true">
                    Shapes
                    <span class="m-badge">
                        25
                    </span>
                </a>
  
                <a href="#" class="easyui-linkbutton" 
                    data-options="iconCls:'icon-large-smartart',
                    size:'large', iconAlign:'top',plain:true">
                    SmartArt
                </a>
            </div>
        </footer>
    </div>
</body>
  
</html>

Producción:

Ejemplo 3: El siguiente ejemplo muestra las insignias de pestañas.

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/color.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>
        .tab-class {
            padding-top: 6px;
            position: relative;
            display: inline-block;
            line-height: 12px;
        }
  
        p {
            line-height: 150%;
        }
    </style>
</head>
  
<body>
    <div class="easyui-navpanel">
        <header>
            <div class="m-toolbar">
                <span class="m-title">
                    Tab Badges
                </span>
            </div>
        </header>
        <!-- easyui-tabs class is used -->
        <div class="easyui-tabs" data-options= "tabHeight: 60,
            fit: true, tabPosition: 'bottom', border: false, 
            pill: true, narrow: true, justified: true">
  
            <!-- m-badge class is used -->
            <div style="padding:10px">
                <div id="htmlDiv" class="panel-header tab-class">
                    <img src='images/html.png' 
                        width="50px" height="50px" />
                    <span class="m-badge">13</span>
                </div>
  
                <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 style="padding:10px">
                <div id="cssDiv" class="panel-header tab-class">
                    <img src='images/css.png'
                        width="50px" height="50px" />
                    <span class="m-badge">14</span>
                </div>
  
                <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 style="padding:10px">
                <div id="phpDiv" class="panel-header tab-class">
                    <img src='images/php.jpg' 
                        width="50px" height="50px" / />
                    <span class="m-badge">15</span>
                </div>
  
                <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>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *