Как разработать сложный макет для веб-страницы с помощью jQuery EasyUI?

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

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

В этой статье мы научимся создавать базовый и сложный макет для любой веб-страницы с помощью плагина jQuery EasyUI.

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

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

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

Пример 1. В следующем примере демонстрируется базовый дизайн макета для данных учащихся с использованием инфраструктуры jQuery EasyUI. Данные о студентах представлены в формате JSON.

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="demo.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>
</head>
  
<body>
    <h2>
        jQuery EasyUI basic layout with 
        all direction regions
    </h2>
  
    <!-- easyui-layout class is used -->
    <div class="easyui-layout" style
            ="width:700px;height:350px;">
  
        <div data-options="region:"north"" 
            style="height:50px"></div>
  
        <!-- Set split to "true" for separate region-->
        <div data-options="region:"south",split:true"
            style="height:50px;">
        </div>
          
        <div data-options="region:"east",split:true" 
            title="East" style="width:100px;">
        </div>
  
        <div data-options="region:"west",split:true" 
            title="West" style="width:100px;">
        </div>
  
        <div data-options="region:"center",title:"EasyUI 
            layout for student data",iconCls:"icon-ok"">
  
            <!-- easyui-datagrid class is used for 
                    tabular data-->
            <table class="easyui-datagrid" data-options=
                "url:"datafile.json",method:"get",border:false,
                singleSelect:true,fit:true,fitColumns:true">
  
                <thead>
                    <tr>
                        <th data-options="field:"studentid""
                            width="80">Student ID
                        </th>
                          
                        <th data-options="field:"studentname""
                            width="100">Name</th>
                          
                        <th data-options="field:"marksscored",
                            align:"right"" width="80">
                            Marks
                        </th>
                          
                        <th data-options="field:"age",align:"right""
                            width="80">Age
                        </th>
                          
                        <th data-options="field:"gender",
                            align:"center"" width="60">
                            Gender
                        </th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</body>
  
</html>

datafile.json: Ниже приводится содержимое файла «datafile.json», используемого в приведенном выше коде.

 {
    «всего»: 10,
    "строки": [
        { 
            «имя студента»: «Комал», «возраст»: 10, «пол»: «Ж», 
            "marksscored": 365, "studentid": "ST-1" 
        },
        { 
            "studentname": "Dalton", "age": 12, "пол": "M",
            «оценка»: 185, «студенттид»: «СТ-10» 
        },
        
        { 
            "имя студента": "Ракеш", "возраст": 12, "пол": "М",
            «оценок»: 385, «студентид»: «СТ-11» 
        },
        
        { 
            "studentname": "Ram", "age": 12, "пол": "M",
            «оценка»: 265, «студентид»: «СТ-12» 
        },
        
        { 
            "selected": true, "studentname": "Ila", "age": 12,
            «пол»: «F», «marksscored»: 355, «studentid»: «ST-13»
        },
        
        { 
            "studentname": "Manika", "age": 12, "пол": "F",
            «оценок»: 158, «студентид»: «СТ-14» 
        },
        
        { 
            «имя ученика»: «Мадхави», «возраст»: 12, «пол»: «Ж»,
            «оценок»: 456, «студентид»: «СТ-15» 
        },
        
        { 
            "studentname": "Preity", "age": 12, "пол": "M",
            «оценок»: 235, «студентид»: «СТ-16» 
        },
        
        { 
            «имя ученика»: «Парул», «возраст»: 12, «пол»: «Ж»,
            «оценок»: 564, «студентид»: «СТ-17» 
        },
        
        { 
            «имя студента»: «Амар», «возраст»: 19, «пол»: «Ж»,
            «оценок»: 638, «студентид»: «СТ-18» 
        }
    ]
}

Выход:

  • Перед выполнением:

  • После выполнения:

Пример 2: В следующем примере демонстрируется дизайн сложной разметки для любой веб-страницы с использованием инфраструктуры jQuery EasyUI. В следующем коде используются файлы «htmlContent.html», «dataTree.json» и «datafile.json», используемые для извлечения данных. Обратитесь к древовидной структуре файлов

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 = "demo.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 >
</ head >
< body >
< h2 >jQuery EasyUI complex layout design</ h2 >
<!-- easyui-layout class is used-->
< div class = "easyui-layout" style =
"width:700px;height:350px;" >
< div data-options = "region:'north'"
style = "height:50px" >
</ div >
<!-- set split data-option to "true"
for separate region-->
< div data-options = "region:'south',split:true"
style = "height:50px;" >
</ div >
< div data-options = "region:'east',split:true"
title = "Right" style = "width:180px;" >
<!-- easyui-tree class is used for
file tree structure -->
< ul class = "easyui-tree" data-options=
"url:'dataTree.json',method:'get',
animate:true,dnd:true">
</ ul >
</ div >
< div data-options = "region:'west',split:true"
title = "Left" style = "width:100px;" >
<!-- easyui-accordion class is used
for toggled menu-->
< div class = "easyui-accordion"
data-options = "fit:true,border:false" >
< div title = "Algorithms" style = "padding:10px;" >
Algorithms
</ div >
< div title = "Python" data-options = "selected:true"
style = "padding:10px;" >
Python
</ div >
< div title = "Perl" style = "padding:10px" >
Perl
</ div >
</ div >
</ div >
< div data-options="region:'center',
title:'Complex layout'">
< div class = "easyui-tabs" data-options =
"fit:true,border:false,plain:true" >
< div title = "About" data-options =
"href:'htmlContent.html'"
style = "padding:10px" >
</ div >
< div title = "DataGrid" style = "padding:5px" >
< table class = "easyui-datagrid"
data-options="url:'datafile.json',
method:'get',singleSelect:true,
fit:true,fitColumns:true">
< thead >
< tr >
< th data-options =
"field:'studentid'"
width = "80" >
Student ID
</ th >
< th data-options =
"field:'studentname'"
width = "100" >
Name
</ th >
< th data-options=
"field:'marksscored',
align:'right'" width = "80" >
Marks
</ th >
< th data-options =
"field:'age',align:'right'"
width = "80" >
Age
</ th >
< th data-options =
"field:'gender',align:'center'"
width = "60" >
Gender
</ th >
</ tr >
</ thead >
</ table >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >

htmlContent.html: Ниже приводится содержимое файла «htmlContent.html», используемого в приведенном выше коде.

HTML

<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
</ head >
< body >
< p style = "font-size:12px" >
HTML content for Python.
</ p >
< ul >
< li >
Python is a high-level, general
-purpose and a very popular
programming language.
</ li >
< li >
Python programming language
(latest Python 3) is being
used in web development,
</ li >
< li >
Machine Learning applications,
along with all cutting edge
technology in Software Industry.
</ li >
< li >
Python Programming Language is
very well suited for Beginners,
</ li >
< li >
also for experienced programmers
with other programming languages
like C++ and Java.
</ li >
</ ul >
</ body >
</ html >

dataTree.json: Ниже приводится содержимое файла «dataTree.json», используемого в приведенном выше коде.

 [{
    "id": 1,
    "text": "Пользователи",
    "дети":[{
        "id": 11,
        "текст": "Фото",
        "состояние": "закрыто",
        "дети":[{
            "id": 101,
            "текст": "Семья"
        }, {
            "id": 102,
            "text": "Коллеги"
        }, {
            "id": 103,
            "text": "Родственники"
        }]
    }, {
        "id": 12,
        "text": "Программные файлы",
        "дети":[{
            "id": 131,
            "текст": "Intel"
        }, {
            "id": 132,
            "текст": "nodejs",
            "attributes": {
                «p1»: «мой Атрибут1»,
                «p2»: «мой Атрибут2»
            }
        }, {
            "id": 133,
            "text": "Общие файлы"
        }, {
            "id": 134,
            "текст": "Почта",
            "проверено": правда
        }]
    }, {
        "id": 13,
        "текст": "home.html"
    }, {
        "id": 14,
        "текст": "tutorials.html"
    }, {
        "id": 15,
        "текст": "jobs.html"
    }]
}]

Выход:

  • Перед выполнением:

  • После выполнения:

JavaScript JQuery HTML CSS jQuery-UI

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Что такое тернарный оператор?
23 Января, 2024
Ember.js Свойство содержимого ArrayProxy
24 Февраля, 2023
Ошибка «Объект не определен» при попытке повернуть объект в three.js
24 Февраля, 2023
Как изменить строку в JavaScript?
23 Февраля, 2023
Как создать массив с несколькими объектами, имеющими несколько вложенных пар ключ-значение в JavaScript?
23 Февраля, 2023
Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
23 Февраля, 2023
Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
23 Февраля, 2023
Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
23 Февраля, 2023