jQuery EasyUI 中文API Button使用实例
LinkButton【链接按钮】
使用说明
使用到的头文件：easyui.css、icon.css、jquery-1.4.2.min.js、jquery.easyui.min.js
代码如下:
<a href="#" id="btn" icon="icon-search">easyui</a>
$('#btn').linkbutton(options);
特性说明
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| disabled | boolean | 启用、禁用按钮 | false |
| plain | boolean | 是否启用样式 | false |
查看演示 官方文档
MenuButton【菜单按钮】
MenuButton包括链接按钮跟菜单
创建一个MenuButton就要指派一个菜单的linkbutton属性
使用说明
使用到的头文件：easyui.css、icon.css、jquery-1.4.2.min.js、jquery.easyui.min.js
代码如下:
<a href="javascript:void(0)" id="mb" icon="icon-edit">Edit</a>
<div id="mm" style="width:150px;">
<div icon="icon-undo">Undo</div>
<div icon="icon-redo">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div icon="icon-remove">Delete</div>
<div>Select All</div>
</div>
$('#mb').menubutton({
menu: '#mm'
});
依赖
链接按钮
特性说明
| 称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| disabled | boolean | 启用、禁用按钮 | false |
| plain | boolean | 是否显示样式 | false |
| menu | string | 选择器创建一个相应的菜单。 | null |
| duration | number | 菜单按钮持续显示时间【毫秒】 | 100 |
查看演示 官方文档
说明
还有一个SplitButton，个人感觉跟menubutt一样的，官方文档这样解释的：Similar to MenuButton, SplitButton include linkbutton and menu but can act as a single button.
唯一的区别就是它可以单独作为一个按钮。特性也是跟上面的menubutt一样，这里就不多说了，有兴趣可看官方文档
相关推荐
-
jQuery EasyUI API 中文文档 - Tree树使用介绍
用 $.fn.tree.defaults 重写了 defaults. 依赖 draggable droppable 用法 Tree 能在 <ul> 元素里定义,此标记可以定义为叶节点和子节点.下面是一个示例: 复制代码 代码如下: <ul id="tt"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> &
-
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
扩展自 $.fn.linkbutton.defaults.用 $.fn.menubutton.defaults 重写了defaults. 依赖 menu linkbutton 用法 复制代码 代码如下: <a href="javascript:void(0)" id="mb" iconCls="icon-edit">Edit</a> <div id="mm" style="width:1
-
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults. 依赖 datagrid 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').treegrid({ url:'treegrid_data.json', treeField:'name', columns:[[ {title:'Task Name',field:'name'
-
JQuery EasyUI 对话框的使用方法
下面看一下EasyUI的对话框效果图 js代码: 复制代码 代码如下: <script language="javascript" type="text/javascript"> function Open_Dialog() { $('#mydialog').show(); $('#mydialog').dialog({ collapsible: true, minimizable: true, maximizable: true, toolbar: [
-
jquery easyui的tabs使用时的问题
大家也可以在jquery easyui来下载,或者去官网下载和查看文档帮助. 我最近也使用了一下jquery easyui里tabs,但是发现一个问题:如果你把tabs的div开始设置为display:none,然后写个function change(){$("#tabs").css("display","block")}来让tabs显示,当执行change()时,结果tabs显示不正常. 本来应该显示为: 结果显示为: 后来我不断尝试,发现如果
-
jQuery EasyUI API 中文文档 - Calendar日历使用
用 $.fn.calendar.defaults 重写了 defaults. 用法 复制代码 代码如下: <div id="cc" style="width:180px;height:180px;"></div> 复制代码 代码如下: $('#cc').calendar({ width:600, height:600, current:new Date() }); 特性 名称 类型 说明 默认值 width number 日历组件的宽度. 1
-
jQuery EasyUI API 中文文档 - Spinner微调器使用
扩展自 $.fn.validatebox.defaults,用 $.fn.spinner.defaults 重写了 defaults. 依赖 validatebox 用法 复制代码 代码如下: <input id="ss" value="2"> 复制代码 代码如下: $('#ss').spinner({ required:true, increment:10 }); 特性 其特性扩展自 validatebox,下列是为 spinner 增加的特性. 名称
-
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
如图: 上图的右边框不见了,使用 web开发工具调试,发现是内容器过大．于是想到了是jquery-easyui 对界面的＂渲染＂不正确引起． 起初以为是因为加了 处理重复的代码引起,但是去掉后总是依旧: 进而考虑到界面＂渲染＂的前后关系,于是尝试对代码片段进行延迟执行,问题解决．原问题脚本: 复制代码 代码如下: <script type="text/javascript"> if (window.__yltlClientScriptRegistKey == undefin
-
JQuery EasyUI的使用
jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件. EasyUI 简介 easyui是一种基于jQuery的用户界面插件集合. easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面. easyui是个完美支持HTML5网页的完整框架. easyui节省您网页开发的时间和规模. easyui很简单但功能强大的. 本文重点了解 EasyUI 的两
-
初试jQuery EasyUI 使用介绍
jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签. jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,tree,window等等. OK,下面就开始我们的初探之旅.jQuery Ea