/kayura-tags

完整支持的 EasyUI 标签组件,已支持 1.4.3 版。

Primary LanguageJavaGNU General Public License v3.0GPL-3.0

已经完成 初版 Easyui Tag 标签的开发、以下是已经支持的标签:

  • 基本标签:RenderSection、Section、Resources、Resource、Hidden;
  • EasyUI 基础:Pagination、ProgressBar、SearchBox、Tooltip;
  • EasyUI 布局:Body、Panel、Tabs(TagPage)、Accordion(Sheet)、Layout(Dock);
  • EasyUI 窗口:Window、Dialog;
  • EasyUI 表格与树:DataGrid(Columns、Column)、DataList、Tree、TreeGrid、PropertyGrid;
  • EasyUI 表单:Form、ValidateBox、TextBox、Combo、ComboBox、ComboTree、ComboGrid、NumberBox、DateBox、DateTimeBox、DateTimeSpinner、Calendar、NumberSpinner、TimeSpinner、Slider、FileBox;
  • EasyUI 菜单与按钮:Menu(MenuItem、SubItem)、LinkButton、MenuButton、SplitButton、SwitchButton;

快速开始

在 jsp 页面顶部位置添加如下代码,即可以使用。
<%@ taglib prefix="k" uri="http://www.kayura.org/tags/jeasyui"%>

演示标准编辑页面示例

以下是将会用到的一些标签:
  • RenderSection、Section 用于 jsp 模板页的开发。
  • Resources、Resource 用于导入 js 与 css 资源;
  • Body 页面级的布局标签;
  • Layout 局部布局标签、Dock 布局中的块;

编辑模板页(_dialog.jsp)

```javascript <%@ page language="java" contentType="text/html; charset=UTF-8"%> <title></title> easyui/themes/${theme}/easyui.css easyui/themes/icon.css js/juasp.css js/jquery.min.js easyui/jquery.easyui.min.js easyui/easyui-lang-zh_CN.js js/juasp-core.js js/juasp-easyui.js ```

编辑页面(edit.jsp)

```javascript <%@ page language="java" contentType="text/html; charset=UTF-8"%>

<k:section name="title">数据词典管理</k:section> <k:section name="head"> </k:section>

<k:section name="body"> <k:form id="ff" url="${root}/admin/dict/save.json" success="function(data){ juasp.closeWin(1) }"> <k:hidden id="id" value="${model.id}" /> <k:hidden id="dictId" value="${model.dictId}" /> <k:hidden id="parentId" value="${model.parentId}" />

<c:if test="${treeType}"> </c:if>
所属词典: ${model.dictName}
上级词典: ${model.parentName}
词典名称: <k:textbox name="name" width="180px" value="${model.name}" required="true" validType='length[1,32]' />
词典值: <k:textbox name="value" width="180px" value="${model.value}" required="true" validType='length[1,1024]' />
排序值: <k:numberbox name="serial" style="width:180px" value="${model.serial}" required="true" min="0" precision="0" />
</k:form> </k:section>

<k:section name="tool"> <k:linkbutton style="width:80px" iconCls="icon-ok" onClick="$('#ff').form('submit')" text="提交" /> <k:linkbutton style="width:80px" iconCls="icon-cancel" onClick="juasp.closeWin(0)" text="取消" /> </k:section>

<%@ include file="/views/shared/_dialog.jsp"%>

<h2>最终显示效果</h2>
<img class="alignnone wp-image-50" src="http://kayura.org/blog/wp-content/uploads/2016/03/编辑页面示例-300x180.jpg" alt="编辑页面示例" width="413" height="248" />

使用模板页,可以更多容易的控制页面的布局,让开发者更关系业务表单的内容。

标签库 Github 地址:<a href="https://github.com/KayuraTeam/kayura-tags" target="_blank">https://github.com/KayuraTeam/kayura-tags</a>