EasyUI jQuery标签小工具

EasyUI jQuery标签小工具

EasyUI是一个HTML5框架,用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能,为开发者节省大量时间。

在这篇文章中,我们将学习如何使用jQuery EasyUI设计标签。标签显示一个面板的集合。它一次只显示一个标签面板。每个标签面板都有标题和一些迷你按钮工具,包括关闭按钮和其他自定义按钮。

EasyUI for jQuery的下载:

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

语法:

<div class="tabs"> </div>

属性:

  • width : 它用于设置标签容器的宽度。
  • height : 它用于设置标签容器的高度。
  • plain : 为真,渲染标签条时没有背景容器图像。
  • fit : 为真,用于设置标签容器的尺寸以适合其父容器。
  • border :真,以显示标签容器的边框。
  • scrollIncrement。它用于设置每次按下标签滚动按钮时要滚动的像素数。
  • scrollDuration。用来设置每个滚动动画应该持续的毫秒数。
  • tools。它用于设置放置在页眉左侧或右侧的工具栏。
  • toolPosition。它用于设置工具条的位置。
  • tabPosition。它用于设置标签的位置。
  • headerWidth: 它用于设置标签头的宽度。
  • tabWidth:用于设置标签条的宽度。
  • tabHeight: 它用于设置标签条的高度。
  • selected:它用于设置初始化的选定标签索引。
  • showHeader。真,以显示标签头。
  • justified。真,使标签条与它们的父容器等宽。
  • narrow。为真,删除标签条之间的空间。
  • pill。真正使标签条看起来像药丸。

事件:

  • onLoad。当一个Ajax标签面板完成加载远程数据时启动。
  • onSelect。当用户选择一个标签面板时发生火灾。
  • onUnselect。当用户取消选择一个标签面板时发生火灾。
  • onBeforeClose:在标签面板关闭前启动
  • onClose。当用户关闭一个标签面板时发生火灾。
  • onAdd。当一个新的标签面板被添加时启动。
  • onUpdate。当一个标签面板被更新时启动。
  • onContextMenu。当右键点击一个标签面板时启动。

方法:

  • options。它用于返回标签选项。
  • label。它用于返回所有标签面板。
  • resize。它用于调整标签容器的大小和做布局。
  • add: 它用于添加一个新的标签面板。
  • closed。它用于关闭一个标签面板。
  • getTab:它用于获取指定的标签面板。
  • getTabIndex。它用于获取指定的标签面板索引
  • getSelected:它用于获取选定的标签面板。
  • select。它用于选择一个标签面板。
  • unselect。它用于选择一个标签面板。
  • showHeader。它用于显示标签页的标题。
  • hideHeader。它用于隐藏标签页的标题。
  • showTool。它用于显示标签工具。
  • hideTool。它用于隐藏标签工具。
  • exists。它用于指示特殊面板是否存在。
  • update: 它用于更新指定的标签面板。
  • enableTab:它用于启用指定的标签面板。
  • disableTab:它用于禁用指定的标签面板。
  • scrollBy。它用于按指定的像素量滚动标签头。

步骤:

  • 首先,添加你的项目所需的jQuery Easy UI脚本。
<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 of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>

示例:

<!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 of EasyUI Mobile -->
    <script type="text/javascript" 
        src="jquery.easyui.mobile.js">
    </script>
  
    <script type="text/javascript">
        (document).ready(function () {
            ('#gfg').tabs('show', {
                borders: true
            });
        });
    </script>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
    <h3>EasyUI jQuery tabs widget</h3>
  
    <div id="tabs" class="easyui-tabs" 
        style="width:500px;height:450px;">
        <div title="gfg1">
            first tab
        </div>
        <div title="gfg2">
            second tab
        </div>
        <div title="gfg3">
            third tab
        </div>
    </div>
</body>
  
</html>

输出:

EasyUI jQuery标签小工具

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程