9. EasyUI
EasyUI
杰
0 • 92

简介

easyui 是一种基于 jQuery 的用户界面插件集合。

easyui 为创建现代化，互动，JavaScript 应用程序，提供必要的功能。

使用 easyui 你不需要写很多代码，你只需要通过编写一些简单 HTML 标记，就可以定义用户界面。

easyui 是个完美支持 HTML5 网页的完整框架。

easyui 节省您网页开发的时间和规模。

easyui 很简单但功能强大的。

官网地址：http://www.jeasyui.com/index.php

文档地址：

快速入门 弹出对话框 demo

第一步： 下载 Jquery EasyUI

你在使用和进行开发时，请遵守官方相应的条款，尊重他们的知识版权。

目前官方最新版本是：jQuery EasyUI 1.5，官方提供了两个版本供下载，GPL 版本和商业版本，你根据自己的需要下载

  • GPL 版本 GPL 版本在 GPl 协议下有效，你能在任何遵循 GPl 协议的项目下使用它。
  • 商业版本 商业版在 Commercial 协议下有效，你能在任何非 GPL/专有的协议下使用。

第二步：创建 html 文件，并添加相关引用

创建项目的文件夹

easydemo                            // 项目根目录
├── index.html                      // 我们的测试页面
└── lib                             // 第三方组件
    └── jquery-easyui-1.5.5.2       // 下载的easyui的压缩包解压后的文件夹
        ├── easyloader.js           // easyui的动态加载组件的js
        ├── jquery.easyui.min.js    // 压缩后的包！！！关键！！
        ├── jquery.easyui.mobile.js
        ├── jquery.min.js           // 依赖的jq的文件
        ├── locale                  // 本地语言的文件夹
        ├── plugins                 // 拆分的组件
        └── themes                  // 样式主题文件夹

第三步： 修改 index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- easyui的样式，可以选择其他主题 -->
  <link rel="stylesheet" href="./lib/jquery-easyui-1.5.5.2/themes/bootstrap/easyui.css">
  <!-- easyui的图标css文件 -->
  <link rel="stylesheet" href="./lib/jquery-easyui-1.5.5.2/themes/icon.css">
  <!-- easyui 依赖jq -->
  <script src="./lib/jquery-easyui-1.5.5.2/jquery.min.js"></script>
  <!-- jq easyui的js脚本 -->
  <script src="./lib/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
  <!-- 引用语言包 -->
  <script src="./lib/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
  <title>AICODER jQuery EasyUI Demos</title>
</head>
<body>
  <!-- 功能：点击按钮弹出模态对话框 -->
  <input type="button" value="弹出模态对话框" id="btnOpenDialog">
  <!-- 设置弹出来的对话框div，首先设置为隐藏 -->
  <div id="addDialog" style="display: none;">
    <h3>添加的对话框</h3>
  </div>
  <script>
    $(function () {
      $('#btnOpenDialog').on('click', function () {
        // 弹出对话框
        $('#addDialog').dialog({
          modal: true,  // 是否是模态对话框
          title: 'AICODER全栈实习--添加用户！',  // 弹出来的窗口的标题
          width: 400, // 窗口的宽度
          height: 400, // 窗口的高度
        });
      });
    });
  </script>
</body>
</html>

结果如下：

弹出dialog

easyui 的布局

jq easyui 把网页分成了 上、下、左、中、右，分别对应：North、South、West、Center、East。

easyui 增加了自定义的属性：data-options，通过它可以设置 easyui 组件的选项。

<body class="easyui-layout">
  <div data-options="region:'north',split:true" style="height:100px;"></div>
  <div data-options="region:'south',split:true" style="height:100px;"></div>
  <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
  <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
  <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
    <input type="button" value="弹出模态对话框" id="btnOpenDialog">
  </div>
</body>

布局区域选项说明

选项类型说明默认值
regionString所处的方位，可取值：North、South、West、Center、Eastnull
titleString区域的标题null
splitBoolean是否跟其他区域进行分离（增加外边距)false
hrefString从后台获取 html，并显示在此区域null
collapsibleBoolean是否显示可折叠按钮true
iconClsstringAn icon CSS class to show a icon on panel header.null
minWidthNumber区域的最小宽度10
minHeightNumber区域的最小高度10
maxWidthNumber区域的最大宽度10000
maxHeightNumber区域的最大高度10000

布局的方法

方法名参数描述
resizeparam改变布局的大小. 参数 param 对象可以设置以下属性: 
width: 布局的宽度.
height: 布局的高度.
collapseregion折叠区域, region 参数可以取值：north,south,east,west.
expandregion展开区域面板, region 参数可以取值：north,south,east,west.
addoptions添加一个面板
removeregion移除一个区域面板, 参数 region 可以取值:north,south,east,west.
splitregion移除区域 参数 region 可以取值:north,south,east,west
unsplitregion取消移除区域 参数 region 可以取值:north,south,east,west

例如：

// 改变大小
$('#cc').layout('resize', {
  width: '80%',
  height: 300
});
// 折叠区域
$('#btnCloseEast').click(function () {
  $(document.body).layout('collapse', 'east');
});
// 展开区域
$('#btnExpandEast').click(function () {
  $(document.body).layout('expand', 'east');
});

布局的事件

事件名参数描述
onCollapseregion当折叠区域的时候触发
onExpandregion当展开区域的时候触发
onAddregion当添加区域的时候触发
onRemoveregion当移除区域的时候触发
// 注册监听事件
$(document.body).layout({
  onCollapse: function (region) {
    $.messager.alert('消息标题', '消息内容：折叠了面板：' + region, 'info');
  },
  onExpand: function (region) {
    $.messager.alert('消息标题', '消息内容：展开了面板：' + region, 'warning');
  }
});

easyui 的消息组件

easyui提供了丰富的弹出消息框的方法。

弹出消息框

$.messager.alert 方法提供了弹出消息的功能，类似window.alert的功能。

此方法接受的参数：

参数名说明
title显示消息框的标题
msg消息内容.
icon消息的内容前面的图标，可以用图标名为: error,question,info,warning.
fn点击ok按钮后的回调函数

两种调用模式

// 第一种： 传入三个字符串参数
$.messager.alert('My Title','Here is a info message!','info');
// 第二种： 传入对象参数
$.messager.alert({
  title: 'My Title',
  msg: 'Here is a message!',
  fn: function(){
    //...
  }
});

弹出确认对话框

$.messager.confirm 方法提供了弹出消息的功能，类似window.confirm的功能。

此方法接受的参数：

参数名说明
title显示消息框的标题
msg消息内容.
fn点击ok按钮后的回调函数

两种调用模式

// 第一种： 传入三个字符串参数
$.messager.confirm('Confirm', 'Are you sure to exit this system?', function(r){
  if (r){ // 如果用户点击确认，那么  r就是true，否则fals
    // exit action;
  }
});
// 第二种： 传入对象参数
$.messager.confirm({
  title: 'My Title',
  msg: 'Are you confirm this?',
  fn: function(r){
    if (r){  // 如果用户点击确认，那么  r就是true，否则fals
      alert('confirmed: '+r);
    }
  }
});

easyui 的树组件

easyui 树形菜单（Tree）也可以定义在 <ul> 元素中。

初始化树有两种方式：

  • 通过标签初始化

  • 通过js初始化

以下是通过js初始化的案例

$('#tt').tree({
  checkbox: true, // 是否显示多选框
  data: [{
    id: 1,
    text: '北京',
    state: 'open',
    attributes: {
      url: "/demo/book/abc",
      price: 100
    },
    children: [{
      id: 7,
      text: "昌平",
      checked: true
    }, {
      id: 8,
      text: "朝阳",
      state: "closed"
    }]
  }, {
    id: 2,
    text: '山东',
    state: 'open',
    attributes: {
      url: "/demo/book/abc",
      price: 100
    },
    children: [{
      id: 9,
      text: "潍坊",
      checked: true
    }, {
      id: 10,
      text: "青岛",
      state: "closed"
    }]
  },],
  animate: true,  // 节点折叠和展开是否使用动画
  lines: true, // 是否显示 节点之间的线条
  dnd: true, // 是否可拖拽
});

结果：

tree

easyui 表格组件

表格是easyui里面使用最广的组件。

DataGrid 数据表格,扩展自 $.fn.panel.defaults ，用 $.fn.datagrid.defaults 重写了 defaults 。

依赖

  • panel
  • resizable
  • linkbutton
  • pagination

用法

<table id="tt"></table>  
<script>
$('#tt').datagrid({
   url:'datagrid_data.json',
   columns:[[  
     {field:'code',title:'Code',width:100},
     {field:'name',title:'Name',width:100},  
     {field:'price',title:'Price',width:100,align:'right'}
   ]]  
});
</script>

数据表格（DataGrid）的特性

其特性扩展自 panel，下列是为 datagrid 增加的特性。

名称类型说明默认值
columnsarraydatagrid 的 column 的配置对象，更多详细请参见 column 的特性。null
frozenColumnsarray和列的特性一样，但是这些列将被冻结在左边。null
fitColumnsbooleanTrue 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。false
stripedbooleanTrue 就把行条纹化。（即奇偶行使用不同背景色）false
methodstring请求远程数据的 method 类型。post
nowrapbooleanTrue 就会把数据显示在一行里。true
idFieldstring标识字段。null
urlstring从远程站点请求数据的 URL。null
loadMsgstring当从远程站点加载数据时，显示的提示信息。 Processing, please wait…
paginationbooleanTrue 就会在 datagrid 的底部显示分页栏。false
rownumbersbooleanTrue 就会显示行号的列。false
singleSelectbooleanTrue 就会只允许选中一行。false
pageNumbernumber当设置了 pagination 特性时，初始化页码。1
pageSizenumber当设置了 pagination 特性时，初始化页码尺寸。10
pageListarray当设置了 pagination 特性时，初始化页面尺寸的选择列表。[10,20,30,40,50]
queryParamsobject当请求远程数据时，发送的额外参数。{}
sortNamestring定义可以排序的列。null
sortOrderstring定义列的排序顺序，只能用 asc 或 desc。asc
remoteSortboolean定义是否从服务器给数据排序。true
showFooterboolean定义是否显示一行页脚。false
rowStylerfunction返回例如 'background:red' 的样式，该函数需要两个参数：
rowIndex： 行的索引，从0 开始。
rowData：此行相应的记录。		null
loadFilterfunction返回过滤的数据去显示。这个函数需要一个参数 data ，表示原始数据。 你可以把原始数据变成标准数据格式，此函数必须返回标准数据对象，含有total和 rows特性。null
editorsobject定义编辑行时的 editor 。 预定义的 editornull
viewobject定义 datagrid 的 view 。 默认的 viewnull

列（Column）的特性

DataGrid 的 Column 是一个数组对象，它的每个元素也是一个数组。数组元素的元素是一个配置对象，它定义了每个列的字段。

名称类型说明默认值
titlestring列的标题文字。undefined
fieldstring列的字段名。undefined
widthnumber列的宽度。undefined
rowspannumber指一个单元格占据多少行。undefined
colspannumber指一个单元格占据多少列。undefined
alignstring指如何对齐此列的数据，可以用 left、right、center。undefined
sortablebooleanTrue 就允许此列被排序。undefined
resizablebooleanTrue 就允许此列被调整尺寸。undefined
hiddenbooleanTrue 就隐藏此列。undefined
checkboxbooleanTrue 就显示 checkbox。undefined
formatterfunction单元格的格式化函数，需要三个参数：value: 字段的值。rowData: 行的记录数据。 rowIndex: 行的索引。undefined
stylerfunction单元格的样式函数，返回样式字符串来自定义此单元格的样式，例如 background:red 。此函数需要三个参数： 
value： 字段的值。 
rowData： 行的记录数据。 
rowIndex： 行的索引。		undefined
sorterfunction自定义字段的排序函数，需要两个参数： 
a： 第一个字段值。 
b： 第二个字段值。		undefined
editorstring,object指编辑类型。当是 string 时指编辑类型，当 object 时包含两个特性： 
type：string，编辑类型，可能的类型是： text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。
options：对象，编辑类型对应的编辑器选项。		undefined
columns : [
  [
    {
      field: 'itemid',
      title: 'Item ID',
      rowspan: 2,
      width: 80,
      sortable: true
    }, {
      field: 'productid',
      title: 'Product ID',
      rowspan: 2,
      width: 80,
      sortable: true
    }, {
      title: 'Item Details',
      colspan: 4
    }
  ],
  [
    {
      field: 'listprice',
      title: 'List Price',
      width: 80,
      align: 'right',
      sortable: true
    }, {
      field: 'unitcost',
      title: 'Unit Cost',
      width: 80,
      align: 'right',
      sortable: true
    }, {
      field: 'attr1',
      title: 'Attribute',
      width: 100
    }, {
      field: 'status',
      title: 'Status',
      width: 60
    }
  ]
]

编辑器（Editor）

用 $.fn.datagrid.defaults.editors 重写了 defaults。

每个编辑器有下列行为：

名称参数说明
initcontainer, options初始化编辑器并且返回目标对象。
destroytarget如果必要就销毁编辑器。
getValuetarget从编辑器的文本返回值。
setValuetarget , value给编辑器设置值。
resizetarget , width如果必要就调整编辑器的尺寸。
$.extend($.fn.datagrid.defaults.editors, {
  text: {
    init: function (container, options) {
      var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
      return input;
    },
    destroy: function (target) {
      $(target).remove();
    },
    getValue: function (target) {
      return $(target).val();
    },
    setValue: function (target, value) {
      $(target).val(value);
    },
    resize: function (target, width) {
      $(target)._outerWidth(width);
    }
  }
});

数据表格视图（DataGrid View）

用 $.fn.datagrid.defaults.view 重写了 defaults。

view 是一个对象，它告诉 datagrid 如何呈现行。这个对象必须定义下列方法。

名称参数说明
rendertarget, container, frozen当数据加载时调用。target：DOM 对象，datagrid 对象。container：行的容器。frozen：表示是否呈现冻结容器。
renderFootertarget, container, frozen这是呈现行脚选项的函数。
renderRowtarget, fields, frozen, rowIndex, rowData这是选项的函数，将会被 render 函数调用。
refreshRowtarget, rowIndex定义如何刷新指定的行。
onBeforeRendertarget, rows视图被呈现前触发。
onAfterRendertarget视图被呈现后触发。

事件

其事件扩展自 panel，下列是为 datagrid 增加的事件。

名称参数说明
onLoadSuccessdata当数据加载成功时触发。
onLoadErrornone加载远程数据发生某些错误时触发。
onBeforeLoadparam发送加载数据的请求前触发，如果返回 false加载动作就会取消。
onClickRowrowIndex, rowData当用户点击一行时触发，参数包括： rowIndex：被点击行的索引，从 0 开始。rowData：被点击行对应的记录。
onDblClickRowrowIndex, rowData当用户双击一行时触发，参数包括： rowIndex：被双击行的索引，从 0 开始。rowData：被双击行对应的记录。
onClickCellrowIndex, field, value当用户单击一个单元格时触发。
onDblClickCellrowIndex, field, value当用户双击一个单元格时触发。
onSortColumnsort, order当用户对一列进行排序时触发，参数包括： sort：排序的列的字段名order：排序的列的顺序
onResizeColumnfield, width当用户调整列的尺寸时触发。
onSelectrowIndex, rowData当用户选中一行时触发，参数包括： rowIndex：选中行的索引，从 0 开始rowData：选中行对应的记录
onUnselectrowIndex, rowData当用户取消选择一行时触发，参数包括： rowIndex：取消选中行的索引，从 0 开始rowData：取消选中行对应的记录
onSelectAllrows当用户选中全部行时触发。
onUnselectAllrows当用户取消选中全部行时触发。
onBeforeEditrowIndex, rowData当用户开始编辑一行时触发，参数包括： rowIndex：编辑行的索引，从 0 开始rowData：编辑行对应的记录
onAfterEditrowIndex, rowData, changes当用户完成编辑一行时触发，参数包括： rowIndex：编辑行的索引，从 0 开始rowData：编辑行对应的记录changes：更改的字段/值对
onCancelEditrowIndex, rowData当用户取消编辑一行时触发，参数包括： rowIndex：编辑行的索引，从 0 开始rowData：编辑行对应的记录
onHeaderContextMenue, field当 datagrid 的头部被右键单击时触发。
onRowContextMenue, rowIndex, rowData当右键点击行时触发。

方法

名称参数说明
optionsnone返回 options 对象。
getPagernone返回 pager 对象。
getPanelnone返回 panel 对象。
getColumnFieldsfrozen返回列的字段，如果 frozen 设定为 true，冻结列的字段被返回。
getColumnOptionfield返回指定列的选项。
resizeparam调整尺寸和布局。
loadparam加载并显示第一页的行，如果指定 param 参数，它将替换 queryParams 特性。
reloadparam重新加载行，就像 load 方法一样，但是保持在当前页。
reloadFooterfooter重新加载脚部的行。
loadingnone显示正在加载状态。
loadednone隐藏正在加载状态。
fitColumnsnone使列自动展开/折叠以适应 datagrid 的宽度。
fixColumnSizenone固定列的尺寸。
fixRowHeightindex固定指定行的高度。
loadDatadata加载本地数据，旧的行会被移除。
getDatanone返回加载的数据。
getRowsnone返回当前页的行。
getFooterRowsnone返回脚部的行。
getRowIndexrow返回指定行的索引，row 参数可以是一个行记录或者一个 id 字段的值。
getSelectednone返回第一个选中的行或者 null。
getSelectionsnone返回所有选中的行，当没有选中的记录时，将返回空数组。
clearSelectionsnone清除所有的选择。
selectAllnone选中当前页所有的行。
unselectAllnone取消选中当前页所有的行。
selectRowindex选中一行，行索引从 0 开始。
selectRecordidValue通过 id 的值做参数选中一行。
unselectRowindex取消选中一行。
beginEditindex开始对一行进行编辑。
endEditindex结束对一行进行编辑。
cancelEditindex取消对一行进行编辑。
getEditorsindex获取指定行的编辑器们。每个编辑器有下列特性：actions：编辑器能做的动作们。target：目标编辑器的 jQuery 对象。field：字段名。type：编辑器的类型。
getEditoroptions获取指定的编辑器， options 参数包含两个特性： index：行的索引。field：字段名。
refreshRowindex刷新一行。
validateRowindex验证指定的行，有效时返回 true。
updateRowparam更新指定的行， param 参数包含下列特性：index：更新行的索引。row：行的新数据。
appendRowrow追加一个新行。
insertRowparam插入一个新行， param 参数包括下列特性：index：插入进去的行的索引，如果没有定义，就追加此新行。row：行的数据。
deleteRowindex删除一行。
getChangestype获取最后一次提交以来更改的行，type 参数表示更改的行的类型，可能的值是：inserted、deleted、updated，等等。
当 type 参数没有分配时，返回所有改变的行。  
acceptChangesnone提交自从被加载以来或最后一次调用acceptChanges以来所有更改的数据。
rejectChangesnone回滚自从创建以来或最后一次调用acceptChanges以来所有更改的数据。
mergeCellsoptions把一些单元格合并为一个单元格，options 参数包括下列特性：index：列的索引。field：字段名。rowspan：合并跨越的行数。colspan：合并跨越的列数。
showColumnfield显示指定的列。
hideColumnfield隐藏指定的列。

以下为demo：

$('#coursett').datagrid({
  // url: '/api/course',//rows:一页有多少条，page：请求当前页
  title: '课程列表',
  width: 800,
  height: 400,
  fitColumns: true,
  method: 'GET',  // http请求的方法
  idField: 'id',  // 主键
  loadMsg: '正在加载用户的信息...',
  pagination: true, // 是否用分页控件
  singleSelect: false, // 是否是单行选中
  pageSize: 10,  // 默认一页多少条
  pageNumber: 1, // 默认显示第几页
  pageList: [10, 20, 30],
  queryParams: null,//让表格在加载数据的时候，额外传输的数据。
  onBeforeLoad: function (param) {  // 表格控件请求之前，可以设置相关参数。
    // param = {page: 1, rows: 10}
    param._page = param.page;
    param._limit = param.rows;
    param._sort = 'id';
    param._order = 'desc';
  },
  loader: function (param, successfn, errorfn) {
    $.ajax({
      url: '/api/course',
      data: param,  // 恩国际 _page 和_limit  
      type: 'GET',
      dataType: 'json',
      success: function (resData, status, xhr) {
        var total = parseInt(xhr.getResponseHeader('X-Total-Count'));
        var datagridData = { rows: resData.data, total: total };
        successfn(datagridData);
      },
      error: errorfn
    });
  },
  onLoadSuccess: function (data) {  // 后台请求成功之后，自动调用次方法
    console.log(data);
  },
  columns: [[
    { field: 'ck', checkbox: true, align: 'left', width: 50 },
    { field: 'id', title: '编号', width: 80 },
    { field: 'course_name', title: '课程名', width: 120 },
    { field: 'author', title: '作者', width: 120 },
    { field: 'college', title: '大学', width: 220 },
    {
      field: 'category_Id', title: '分页', width: 120, formatter: function (value, row, index) {
        return '分类' + value;
      }
    }
  ]],
  toolbar: [{
    id: 'btnDownShelf',
    text: '添加',
    iconCls: 'icon-add',
    handler: function () {
    }
  }, {
    id: 'btnDelete',
    text: '删除',
    iconCls: 'icon-cancel',
    handler: function () {
    }
  }, {
    id: 'btnEdit',
    text: '修改',
    iconCls: 'icon-edit',
    handler: function () {
    }
  }],
  onHeaderContextMenu: function (e, field) {
  }
});

自定义ajax请求的loader的方法，如下demo是jQuery EasyUI配合后端的json-server返回数据的demo：

      $(function () {
        $('#dtTable').datagrid({
          loadMsg: '正在加载数据中....',
          emptyMsg: '没有数据',
          pagination: true,
          singleSelect: true,
          striped: true,
          idField: 'id',
          checkOnSelect: true,
          pageNumber: 1,
          rownumbers: true,
          pageSize: 10,
          pageList: [10, 20, 30],
          method: 'GET',
          onBeforeLoad: function (param) {
            // 请求之前还可以对参数进行修改和添加，_limit和_page是json-server的后台参数数据
            param._limit = param.rows;
            param._page = param.page;
          },
          loader: function (param, successCallback, errorCallback) {
            // 自定义ajax请求加载数据， param是请求的参数
            // successCallback:是请求成功后的回调函数
            // errorCallback:是请求失败后的回到函数
            $.ajax({
              url: 'http://localhost:53000/course',
              data: param,
              type: 'GET',
              dataType: 'json',
              success: function (res, status, xhr) {
                successCallback({
                  total: xhr.getResponseHeader('X-Total-Count'),
                  rows: res
                });
              },
              error: function (data) {
                errorCallback(data);
              }
            });
          },
          onLoadSuccess: function (data, status, xhr) {
            console.log(data);
          },
          columns: [[
            { field: 'id', title: '主键', width: 100 },
            { field: 'author', title: '作者', width: 100 },
            { field: 'author', title: '作者', width: 100 },
            { field: 'author', title: '作者', width: 100 },
            { field: 'author', title: '作者', width: 100 },
            { field: 'college', title: '大学', width: 100, align: 'right' }
          ]]
        });;
      });

easyui 的 Tab 组件

tab可以直接通过html标签创建。

<div id="tt" class="easyui-tabs" style="height:250px;" data-options="fit: true">
  <div title="Tab1" style="padding:20px;display:none;">
    tab1
  </div>
  <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
    tab2
  </div>
  <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="display:none;">
    tab3
  </div>
</div>

其他常用的方法：

  • 通过js控制添加tab标签
$('#tt').tabs('add',{
    title:'New Tab',
    content:'Tab Body',
    closable:true,
    tools:[{
        iconCls:'icon-mini-refresh',
        handler:function(){
            alert('refresh');
        }
    }]
});
  • 判断tab是存在
// exists 可以接受一个 tab的索引，或者是tab的title的字符串
$('#tt').tabs('exists', 1);
$('#tt').tabs('exists', 'tab1');
  • 选中某个tab页签
$('#tt').tabs('select', 1);
$('#tt').tabs('select', 'tab1');
  • 获取选中的tab页签
$('#tt').tabs('getSelected');  // 返回tab的索引

转载自：https://malun666.github.io/aicoder_vip_doc/#/pages/jqeasyui

0 • 92
() 全部评论
所有回复 (0)

推荐总结

热门总结

  • HTML5 路 17052 0 1 发布

    本目录收录的是电子邮件相关的应用软件。


    定义

    电子邮件(Email)又称电子邮箱，简称电邮，是指一种由一寄件人将数字信息发送给一个人或多个人的信息交换方式，目的是达成发信人和收信人之间的信息交互。

    电子邮件系统是以存储与转发的模型为基础,邮件服务器接受、转发、提交及存储邮件。寄信人、收信人及他们的电脑都不用同时在线。寄信人和收信人只需在寄信或收信时简短的连接到邮件服务器即可。

    范围

    本目录收录的软件仅限于以电子邮件为主要功能(或之一)的应用软件。

    列表

    本目录收录了以下软件：

     RainLoop

    简单的、 现代的 & 快速、 基于 WEB 的电子邮件客户端。

    以下是 RainLoop 各相关链接及授权信息的介绍：

    官网(HP)
    https://www.rainloop.net/源代码(Source)
    https://github.com/RainLoop/rainloop-webmail授权(License)
    AGPL 3.0范例(Example)
    https://mail.rainloop.net/#/mailbox/INBOX

  • HTML5 路 16647 0 1 发布

    本目录收录的是即时通信相关的应用软件。

     定义

    即时通信(Instant Messaging,IM)是一种通过网络进行实时通信的系统，允许两人或多人使用网络即时的传递文字消息、文件、语音与视频交流。

    即时通信不同于电子邮件在于它的交谈是即时（实时）的。大部分的即时通信服务提供了状态信息的特性──显示联系人名单，联系人是否在在线与能否与联系人交谈等等。

    范围

    本目录收录的软件仅限于以即时通信为主要功能(或之一)的应用软件。

    列表

    本目录收录了以下软件：

    CandyConverse.jsKaiwaRocket.Chat

    Candy

    Candy是一个支持XMPP协议的多用户即时聊天客户端软件。

    以下是 Candy 各相关链接及授权信息的介绍：

    官网(HP)
    http://candy-chat.github.io/candy源代码(Source)
    https://github.com/candy-chat/candy授权(License)
    MIT范例(Example)

    Converse.js

    Converse.js是一个支持XMPP/JABB的多用户即时聊天客户端软件。

    以下是 Converse.js各相关链接及授权信息的介绍：

    官网(HP)
    http://conversejs.org源代码(Source)
    https://github.com/jcbrand/converse.js授权(License)
    MPL范例(Example)
    https://conversejs.org/demo/anonymous.html

    Kaiwa

    Kaiwa 是一个支持XMPP的即时聊天客户端软件。

    以下是 Kaiwa 各相关链接及授权信息的介绍：

    官网(HP)
    http://getkaiwa.com源代码(Source)
    https://github.com/digicoop/kaiwa授权(License)
    MPL范例(Example)

    Rocket.Chat

    WebChat平台。

    以下是 Rocket.Chat 各相关链接及授权信息的介绍：

    官网(HP)
    https://rocket.chat/源代码(Source)
    https://github.com/RocketChat/Rocket.Chat授权(License)
    MIT范例(Example)
    https://demo.rocket.chat/home

  • HTML5 路 16278 0 1 发布

    本目录收录的是流程图相关的应用软件。


    定义

    流程图(Flowchart Diagram)是表示算法、工作流或流程的一种框图表示，它以不同类型的框代表不同种类的步骤，每两个步骤之间则以箭头连接。

    流程图大致可以分为以下四种类型：

    文件流程图数据流程图系统流程图程序流程图范围

    本目录收录的软件仅限于以流程图实现为主要功能（或之一）的应用软件。

    列表

    本目录收录了以下软件：

    Diagramo

    Diagramo是一个流程图模型编辑工具

    以下是Diagramo各相关链接及授权信息的介绍：

    官网(HP)
    http://diagramo.com源代码(Source)
    https://github.com/ssshow16/diagramo授权(License)
    GPL范例(Example)
    http://diagramo.com/editor/editor.php

  • HTML5 路 13434 0 1 发布

    ERD

    本目录收录的是ERD模型相关的应用软件。

    定义

    ERD(Entity-relationship Diagram，实体关系图)是概念数据模型的高层描述所使用的数据模型或模式图。

    ERD由实体和实体之间的关系定义而成，实体（Entity）表示一个离散对象，可以被（粗略地）认为是名词，如人、交易等。关系(Relationship)描述了两个或更多实体相互如何关联，联系可以被（粗略地）认为是动词。

    范围

    本目录收录的软件仅限于以ERD模型实现为主要功能（或之一）的应用软件。

    列表

    本目录收录了以下软件：

    WWWSqlDesigner

    WWWSqlDesigner是一个ER图形工具，允许用户创建数据库设计，可以保存/加载并导出到SQL脚本。 支持各种数据库和语言，能够导入现有的数据库设计。

    以下是WWWSqlDesigner各相关链接及授权信息的介绍：

    官网(HP)
    https://github.com/ondras/wwwsqldesigner源代码(Source)
    https://github.com/ondras/wwwsqldesigner授权(License)
    BSD范例(Example)
    http://ondras.zarovi.cz/sql/demo/?keyword=default

  • PHP 峰 9403 0 1 发布

    Bootstrap3是一个高度可定制的基于Bootstrap的DokuWiki模板，具有响应性，适用于所有设备（移动设备，平板电脑，台式机等）。

    功能和特点HTML5和CSS3基于Bootstrap 3.xGlyphicons 和 FontAwesome图标AnchorJS支持可高度定制丰富的HTML和DokuWiki钩子侧边栏支持（左侧和右侧）主题切换器插件统合Bootstrap Wrapper PluginDiagram PluginDiscussion PluginEdittable PluginExplain PluginInlinetoc PluginLinkback PluginMove PluginOverlay PluginPublish PluginRack PluginTagging PluginTags PluginTranslation PluginUser Home-Page PluginWrap Plugin - TabsTplInc Plugin设定主题项目名项目说明值类型缺省值可选值bootstrapThemeBootstrap主题multichoicedefaultdefault
    optional
    custom
    bootswatchbootswatchTheme从Bootswatch.com选择主题multichoiceyeticerulean
    cosmo
    cyborg
    darkly
    flatly
    journal
    lumen
    paper
    readable
    sandstone
    simplex
    solar
    slate
    spacelab
    superhero
    united
    yeticustomTheme插入自定义主题的URLstringnullshowThemeSwitcher在导航栏中显示Bootswatch.com主题切换器onoff0hideInThemeSwitcher在主题切换器中隐藏主题multicheckboxnullcerulean
    cosmo
    cyborg
    darkly
    flatly
    journal
    lumen
    paper
    readable
    sandstone
    simplex
    solar
    slate
    spacelab
    superhero
    united
    yetithemeByNamespace按名字空间指定主题onoff0侧边栏项目名项目说明值类型缺省值sidebarPositionDokuWiki Sidebar position (left or right)multichoiceleftleft
    rightrightSidebarThe Right Sidebar page name, empty field disables the right sidebar.
    The Right Sidebar is displayed only when the default DokuWiki sidebar is enabled and is on the left position (see the sidebarPosition configuration). If do you want only the DokuWiki sidebar on right position, set the sidebarPosition configuration with right valuestringrightsidebarleftSidebarGridLeft sidebar grid classes col-{xs,sm,md,lg}-x (see Bootstrap Grids documentation)stringcol-sm-3 col-md-2rightSidebarGridRight sidebar grid classes col-{xs,sm,md,lg}-x (see Bootstrap Grids documentation)stringcol-sm-3 col-md-2sidebarOnNavbarDisplay the sidebar contents inside the navbar (useful on mobile/tablet devices)onoff0sidebarShowPageTitleDisplay Sidebar page titleonoff1导航栏项目名项目说明值类型缺省值inverseNavbarInverse navbaronoff0fixedTopNavbarFix navbar to toponoff0showTranslationDisplay translation toolbar (require Translation Plugin)onoff0showToolsDisplay Tools in navbarmultichoicealwaysnever
    logged
    alwaysshowHomePageLinkDisplay Home-Page link in navbaronoff0homePageURLUse custom URL for home-page linksstringnullshowUserHomeLinkDisplay User Home-Page link in navbaronoff1hideLoginLinkHide the login button in navbar. This option is useful in “read-only” DokuWiki installations (eg. blog, personal website)onoff0showEditBtnDisplay edit button in navbarmultichoicenevernever
    logged
    alwaysindividualToolsSplit the Tools in individual menu in navbaronoff0showIndividualToolEnable/Disable individual tool in navbarmulticheckboxsite,pageuser
    site
    pageshowSearchFormDisplay Search form in navbarmultichoicealwaysnever
    logged
    alwaysshowAdminMenuDisplay Administration menuonoff0useLegacyNavbarUse legacy and deprecated navbar.html hook (consider in the future to use the :navbar hook)onoff0showNavbarDisplay navbar hookmultichoicealwayslogged
    alwaysnavbarLabelsShow/Hide individual labelmulticheckboxlogin,registerlogin
    register
    admin
    tools
    user
    site
    page
    themes
    expand
    profileshowAddNewPageEnable the Add New Page plugin in navbar (require Add New Page Plugin)multichoicenevernever
    logged
    alwaysnotifyExtensionsUpdateNotify extensions update (for Admin users)onoff0Semantic项目名项目说明值类型缺省值semanticEnable semantic dataonoff1schemaOrgTypeSchema.org type (Article, NewsArticle, TechArticle, BlogPosting, Recipe)multichoiceArticleArticle
    NewsArticle
    TechArticle
    BlogPosting
    RecipeshowSemanticPopupDisplay a popup with an extract of the page when the user hover on wikilink (require Semantic Plugin)onoff0布局项目名项目说明值类型Default ValuefluidContainerEnable the fluid container (full-width of page)onoff0fluidContainerBtnDisplay a button in navbar to expand containeronoff0pageOnPanelEnable the panel around the pageonoff1tableFullWidthEnable 100% full table width (Bootstrap default)onoff1tableStyleTable stylemulticheckboxstriped,condensed,responsivestriped
    bordered
    hover
    condensed
    responsiveshowLandingPageEnable the landing page (without a sidebar and the panel around the page)onoff0landingPagesLanding page name (insert a regex)regex(intro)showPageToolsEnable the DokuWiki-style Page Toolsmultichoicealwaysnever
    logged
    alwaysshowPageIdDisplay the DokuWiki page name (pageId) on toponoff1showBadgesShow badge buttons (DokuWiki, Donate, etc)onoff1showLoginOnFooterDisplay a “little” login link on footer. This option is useful when hideLoginLink is ononoff0showWikiInfoDisplay DokuWiki name, logo and tagline on footeronoff1文章目录 项目名项目说明值类型缺省值tocAffixAffix the TOC during page scrollingonoff1tocCollapseSubSectionsCollapse all sub-sections in TOC to save spaceonoff1tocCollapseOnScrollCollapse TOC during page scrollingonoff1tocCollapsedCollapse TOC on every pagesonoff0tocLayoutTOC layoutmultichoicedefaultdefault
    navbarg钩子HTML钩子

    所有文件必须位于模板目录（lib / tpl / bootstrap3 /）或conf /目录中。

    文件名插入到页面HTML中的位置meta.html <head>和</head>之间topheader.html紧接着<body>标签之后header.htmlAbove the upper blue bar, below the pagename and wiki titlenavbar.htmlDEPRECATED (see the note below) - Inside the navbar, use this to add additional links (e.g. <li><a href=“/foo”>Foo</a></li>)pageheader.htmlbreadcrumbs下面，页面实际内容的上方pagefooter.htmlAbove the lower blue bar, below the last changed Datefooter.html在页面的最后，位于</ body>标记之前sidebarheader.html边侧栏上方sidebarfooter.html边侧栏下方social.htmlBelow the header.html, use this to add a social buttons (eg. Google+, Twitter, LinkedIn, etc)rightsidebarheader.html右边侧栏上方rightsidebarfooter.html
    右边侧栏下方
    Dokuwiki钩子

    可以通过创建简单的DokuWiki“钩子”页面来自定义页面的各个部分。 bootstrap3模板会将这些钩子页面内容插入到页面的总体布局中。

    钩子页面名说明名字空间单位:sidebarThe sidebarYES:rightsidebarThe right-sidebarYES:navbarNavbar with sub-menusYES:pageheaderHeader of the Wiki articleYES:pagefooterFooter of the Wiki articleYES:footerFooter of the pageYES:cookie:bannerCookie-Law bannerNO:cookie:policyCookie-Law policyNO:helpHelp page for “Help Page Icon”YES:headerHeader of page below the navbarYES:topheaderTop Header of page (on top of navbar if fixedTopNavbar is off)YES

  • PHP 峰 1211 0 1 发布
    CSS文件

    DokuWiki本体的CSS文件位于lib / styles目录中，不过DokuWiki本体仅定义了一些最基础的CSS，更多的CSS存在于模板和各个插件里面。
    所有CSS文件都是通过lib/exe /css.php程序获取的。该程序还处理缓存，模式替换，LESS预处理和优化，由tpl_metaheaders（）函数调用。

    加载CSS的顺序如下： 在CSS中，如果为同一属性指定了不同的值，并且样式冲突，则稍后加载的样式将优先，并且属性值将被覆盖，因此首选样式是从后面开始。

    基本样式：lib /styles/*.css插件样式：lib / plugins / <插件名称> / *。css模板样式：在lib / tpl / <模板名称> /style.ini中定义用户样式：conf / user * .css

    如果要通过自定义CSS添加样式，则基本上应将其添加到用户样式（conf / user * .css）中。

    媒体类型

    样式表支持五种媒体类型：

    screen：用于显示器print：用于打印all：用于所有的媒体设备rtl：feed：外部链接Dokuwiki官方说明

  • HTML5 路 799 0 1 发布

    本目录收录的是电子表格相关的应用软件。

     定义

    电子表格（Spreadsheet），指的是类似于Micfosoft Excel的办公文档。它会显示由一系列行与列构成的网格,称为单元格，单元格之间可以合并成一个跨多行多列的大单元格。

    单元格内可以存放数值、计算式、或文本，单元格的边框和文本颜色字体通常可以个别设置。

    范围

    本目录收录的软件仅限于以电子表格为主要功能（或之一）的应用软件。

    列表

    本目录收录了以下软件：

    EtherCalc

    EtherCalc是一个实时多人协作的电子表格处理器,后台需NodeJS服务器

    以下是 EtherCalc各相关链接及授权信息的介绍：

    官网(HP)
    https://ethercalc.net/源代码(Source)
    https://github.com/audreyt/ethercalc授权(License)
    Apache 2范例(Example)

    https://ethercalc.net/

    截图

  • HTML5 路 413 0 1 发布

    本目录收录的是PDF相关的应用软件。

     定义

    PDF(Portable Document Format:便携式文档格式)是一种用独立于应用程序、硬件、操作系统的方式呈现文档的文件格式。

    每个PDF文件包含固定布局的平面文档的完整描述，包括文本、字形、图形及其他需要显示的信息，通常在任何设备和环境下都能获得同样的展现。

    范围

    本目录收录的软件仅限于以PDF为主要功能（或之一）的应用软件。

    列表

    本目录收录了以下软件：

    laddu-reader

    Laddu 是一个PDF阅读器,基于Mozilla的pdf.js。

    以下是 laddu-reader 各相关链接及授权信息的介绍：

    官网(HP)
    源代码(Source)
    https://github.com/iraycd/laddu-reader授权(License)
    MIT范例(Example)
    截图