Как создать значки для мобильных устройств с помощью jQuery EasyUI Mobile?

Опубликовано: 6 Января, 2022

EasyUI - это платформа HTML5 для использования компонентов пользовательского интерфейса на основе технологий jQuery, React, Angular и Vue. Это помогает создавать функции для интерактивных веб-приложений и мобильных приложений, экономя много времени для разработчиков.

В этой статье мы узнаем о значках для мобильного интерфейса. Значки - это числа, которые связаны со ссылкой, чтобы указать количество элементов, связанных со ссылкой.

Загрузки EasyUI для jQuery:

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

Пожалуйста, позаботьтесь о путях к предварительно скомпилированным файлам при внедрении в свои коды для мобильных приложений.

Пример 1. В следующем примере демонстрируются некоторые основные значки для мобильных приложений, использующих платформу 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>

Выход:

Пример 2: В следующем примере демонстрируются значки списка и нижнего колонтитула для мобильных приложений, использующих платформу 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 > 

Выход:

Пример 3: В следующем примере демонстрируются значки вкладок.

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 
                    
                                            JQuery
                                            HTML
                                            CSS-Misc
                                            HTML-Misc
                                            CSS
                                    
РЕКОМЕНДУЕМЫЕ СТАТЬИСоздайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
23 Февраля, 2023
Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
23 Февраля, 2023
Как отфильтровать массив на основе пользовательского ввода в AngularJS?
23 Февраля, 2023
Разделение файлов в SASS
23 Февраля, 2023
Для чего используется директива @content?
23 Февраля, 2023
Как воспроизводить и приостанавливать анимацию CSS с помощью пользовательских свойств CSS?
23 Февраля, 2023
Чистые размеры сеток CSS
23 Февраля, 2023
Разница между @warn и @debug
23 Февраля, 2023

    


        
                    < PROGLER >

                

                    Общее
Контакты
Политика конфиденциальности

                    Обучение
Блог

                

                © progler.ru 2024. Все права защищены.
            

    