如何使用jquery easyui创建标签组件

jQuery EasyUI v1.4.4 下载网址:http://www.jb51.net/codes/70218.html

本教程将展示如何使用easyui创建一个标签组件。标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体。

标签一次只能显示一个面板,每个面板都有标题、图表和关闭按钮。当标签被选中之后,会显示相应面板的内容。

使用HTML标记创建标签,其中包括一个DIV容器和一些DIV面板。

< div class="easyui-tabs">
< div title="First Tab">
First Tab
< /div>
< div title="Second Tab" closable="true">
Second Tab
< /div>
< div title="Third Tab" iconCls="icon-reload" closable="true">
Third Tab
< /div>
< /div>

我们创建具有三个面板的一个标签组件,第二个和第三个面板可以通过点击关闭按钮关闭。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
在这篇文章里,我将深入研究JavaScript中最基本的部分——执行上下文(execution context)。读完本文后,你应该清楚了解释器做了什么,为什么函数和变量能在声明前使用以及他们的值是如何决定的。 1、EC—执行环境或者执行上下文 每当控制器到达ECMAScript可执行代码的时候,控制器就进入了一个执行上下文(好高大上的概念啊)。 javascript中,EC分为三种: 全局级别的代码
大家都知道在JavaScript中提供了两种方式迭代对象: for 循环; for..in循环; 一、for循环 不足: 在于每次循环的时候数组的长度都要去获取; 终止条件要明确; 在for循环中,你可以循环取得数组或是数组类似对象的值,譬如arguments和HTMLCollection对象。通常的循环形式如下: // 次佳的循环for (var i = 0; i myarray.length; i++) { // 使用myarray[i]做点什么} 这种形式的循环的不足在于每次循环的时候数组的长度都要
通过使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要调用 'add' 方法即可。 function addTab(title, href,icon){ var tt = $('#tabs'); if (tt.tabs('exists', title)){//如果tab已经存在,则选中并刷新该tab tt.tabs('select', title); refreshTab({tabTitle:title,url:href}); } else { if (href){ var conte
RegExp直接量和对象的创建 就像字符串和数字一样,程序中每个取值相同的原始类型直接量均表示相同的值,这是显而易见的。程序运行时每次遇到对象直接量(初始化表达式)诸如{}和[]的时候都会创建新对象。比如,如果在循环体中写var a = [],则每次遍历都会创建一个新的空数组。正则表达式直接量则与此不同,ECMAScript 3规范规定,一个正则表达式直接量会在执行到它时转换为一个RegExp对象,同一段代码所表示正则表达式直接量的每次运算都返回同一个对象。ECMAScript 5规范则做了相反的规定,同
今天给大家介绍一款非常棒的WEB在线富文本编辑器——UMeditor,它是由百度web前端研发部开发所见即所得富文本web编辑器UEditor演变的迷你版编辑器,具有轻量,可定制,注重用户体验等特点,允许自由使用和修改代码,适用于前台快速简单回复框或后台内容编辑器。 在线预览 源码下载 如何使用? 建立一个demo.html文件,首先在需要添加编辑器的地方加入以下代码,使用style可以设置编辑器的宽度和高度。 script type="text/plain" id="myEditor" p内容区域/p
你是否看到过这样的代码:a=a||""; 可能javascript初学者会对此感到茫然。今天就跟大家分享一下我的一些心得。 其实: a=a||"defaultValue";a=a||"defaultValue"; 与: if(!a){a="defaultValue";}if(!a){ a="defaultValue"; } 和: if(a==null||a==""||a==undefined){a="defaultValue";}if(a==null||a==""||a==undefined){ a="d
演示一个小小的例子:在购物车里面,我们能够勾选自己所选的商品,然后能够显示出相应的价格。 1、首先显示出相应的界面: 相关代码: body 商品列表:br/ 笔记本电脑input type="checkbox" name="mm" value="3000" onclick="chose(this)" /3000 台式机input type="checkbox" onclick="chose(this)" name="mm" value="2900"/ 2900 路由器input type="checkbo
获取选中的 Tab // 获取选中的 tab panel 和它的 tab 对象 var pp = $('#tt').tabs('getSelected'); var tab = pp.panel('options').tab; // 相应的 tab 对象 更新特定的选项卡面板 可使用update方法,param参数包含2个属性: tab: 将被更新的选项卡。 options: 选项卡相关配置项。 Example: //当前tab var current_tab = $('#frame_tabs').tab
很简单的一个使用:点击菜单,能够显示下面的或者不显示。 1、主要目的: 展现的是的一个菜单项,然后点击一下,隐藏,点一下,弹出下面的内容 用到的是 overflow:hidden 和 overflow="visible"这两个属性 在点击的function中,设置属性应该 node.style.overflow="visible";当然设置tr的高度也是很重要的,要恰好让其他的选项隐蔽 2、采用同样的技术 ,多加几个,但是就是传参数比较麻烦,采用 this传参 很常用 实现效果: !DOCTYPE htm
UMeditor,它是由百度web前端研发部开发所见即所得富文本web编辑器UEditor演变的迷你版编辑器,具有轻量,可定制,注重用户体验等特点,允许自由使用和修改代码,适用于前台快速简单回复框或后台内容编辑器。 使用方法: 因为本插件是百度「FEX前端研发团队」开发,在官方有较强细的中文文档,本文的目的只是让朋友们知道了解有这么个好插件而已,因此文档手册、下载、实例全链接到官方。 下载你需的要的语言版本,然后解压,在解压目录建立一个名为demo的html文件,代码如下 !DOCTYPE HTMLhtm