jQuery EasyUI 是一组基于 jQuery 的 UI 插件集合,而 jQuery EasyUI 的目标就是帮助 web 开发者更轻松的打造出功能丰富并且美观的 UI 界面。开发者不需要编写复杂的 javascript,也不需要对 CSS 样式有深入的了解,开发者需要了解的只有一些简单的 html 标签。
这篇文章主要为大家详细介绍了 Jquery Easyui 菜单组件 Menu 的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
加载方式
Class 加载
- <div class="easyui-tabs" style="width: 400px;height: 250px">
- <div title="Tab1" data-options="closable:true">
- tab1
- </div>
- <div title="Tab2" data-options="closable:true">
- tab2
- </div>
- <div title="Tab3" data-options="iconCls:'icon-reload',closable:true">
- tab3
- </div>
- </div>
JS 调用加载
- <div id="box" style="width: 400px;height: 250px">
- <div title="Tab1" data-options="closable:true">
- tab1
- </div>
- <div title="Tab2" data-options="closable:true">
- tab2
- </div>
- <div title="Tab3" data-options="iconCls:'icon-reload',closable:true">
- tab3
- </div>
- </div>
- <script>
- $(function() {
- $('#box').tabs({
- // 选项卡容器宽度
- width: 500,
- // 项卡容器高度
- height: 400,
- // 是否不显示控制面板背景。
- plain: false,
- // 选项卡是否将铺满它所在的容器
- fit: false,
- // 是否显示选项卡容器边框
- border: true,
- // 选项卡滚动条每次滚动的像素值
- scrollIncrement: 200,
- // 每次滚动动画持续的时间
- scrollDuration: 400,
- // 工具栏添加在选项卡面板头的左侧或右侧
- tools: [{
- iconCls: 'icon-add',
- handler: function() {
- alert('添加!');
- },
- }],
- // 工具栏位置
- toolPosition: 'left',
- // 选项卡位置
- tabPosition: 'left',
- // 选项卡标题宽度,在 tabPosition 属性设置为'left'或'right'的时候才有效
- headerWidth: 300,
- // 标签条的宽度
- tabWidth: 250,
- // 标签条的高度
- tabHeight: 25,
- // 初始化选中一个 tab 页, 从0开始
- selected: 2,
- // 是否显示 tab 页标题
- showHeader: true
- });
- });
- </script>
属性列表
事件列表
- $(function() {
- $('#box').tabs({
- // 在 ajax 选项卡面板加载完远程数据的时候触发。
- onLoad: function(pannel) {
- alert(panel);
- },
- // 用户在选择一个选项卡面板的时候触发
- onSelect: function(title, index) {
- alert(title + '|' + index);
- },
- // 用户在取消选择一个选项卡面板的时候触发。
- // (选择另一个时,先触发上一个的此方法,再触发下一个的onSelect方法)
- onUnselect: function(title, index) {
- alert(title + '|' + index);
- },
- // 在选项卡面板关闭的时候触发,返回false 取消关闭操作
- onBeforeClose: function(title, index) {
- alert(title + '|' + index);
- return false;
- },
- // 在关闭一个选项卡面板的时候触发
- onClose: function(title, index) {
- alert(title + '|' + index);
- },
- // 在添加一个新选项卡面板的时候触发
- onAdd: function(title, index) {
- alert(title + '|' + index);
- },
- // 在更新一个选项卡面板的时候触发
- onUpdate: function(title, index) {
- alert(title + '|' + index);
- },
- // 在右键点击一个选项卡面板的时候触发
- onContextMenu: function(e, title, index) {
- alert(e + '|' + title + '|' + index);
- }
- });
- });
方法列表
- //返回属性对象
- console.log($('#box').tabs('options'));
- //返回所有选项卡面板
- console.log($('#box').tabs('tabs'));
- //新增一个选项卡
- $('#box').tabs('add', {
- title: '新面板',
- selected: false,
- });
- //选择指定下标的选项卡
- $('#box').tabs('select', 1);
- //取消选择指定下标的选项卡
- $('#box').tabs('select', 0);
- //关闭指定下标的选项卡
- $('#box').tabs('close', 1);
- //重新调整面板布局和大小
- $('#box').tabs('resize');
- //指定下标的选项卡是否存在
- console.log($('#box').tabs('exists', 4));
- //获取指定下标的选项卡
- console.log($('#box').tabs('getTab', 1));
- //获取指定面板的索引
- console.log($('#box').tabs('getTabIndex', '#tab2'));
- //获取被选定的选项卡
- console.log($('#box').tabs('getSelected'));
- //显示选项卡标题
- $('#box').tabs('showHeader');
- //隐藏选项卡标题
- $('#box').tabs('hideHeader');
- //更新一个选项卡
- $('#box').tabs('update', {
- tab: $('#tab2'),
- options: {
- Title: '新标题',
- }
- });
- //禁用指定下标或标题的选项卡
- $('#box').tabs('disableTab', 1);
- $('#box').tabs('disableTab', 'Tab2');
- //启用指定下标或标题的选项卡
- $('#box').tabs('enableTab', 1);
- $('#box').tabs('enableTab', 'Tab2');
- //滚动选项卡标题,正值向左,负值向右
- $('#box').tabs('scrollBy', 100);
- //可以使用$.fn.tabs.defaults 重写默认值对象。
- $.fn.tabs.defaults.border = false;
来源: http://www.phperz.com/article/17/0715/329427.html