如何使用jquery easyui创建标签组件
jQuery EasyUI v1.4.4 下载网址:http://www.jb51.net/codes/70218.html
本教程将展示如何使用easyui创建一个标签组件。标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体。
标签一次只能显示一个面板,每个面板都有标题、图表和关闭按钮。当标签被选中之后,会显示相应面板的内容。
使用HTML标记创建标签,其中包括一个DIV容器和一些DIV面板。
< div class="easyui-tabs" style="width:400px;height:100px;"> < div title="First Tab" style="padding:10px;"> First Tab < /div> < div title="Second Tab" closable="true" style="padding:10px;"> Second Tab < /div> < div title="Third Tab" iconCls="icon-reload" closable="true" style="padding:10px;"> Third Tab < /div> < /div>
我们创建具有三个面板的一个标签组件,第二个和第三个面板可以通过点击关闭按钮关闭。
相关推荐
-
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
基础DOM结构 什么叫"完整的基础DOM结构",这里"基础"的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构:而"完整"的意思是指在冻结列,冻结行,标题,footer,分页这些功能块都存在时候的DOM结构. 要搞清楚Datagrid的工作原理,这个DOM结构必须要烂熟于胸的,我们直接来看这个"基础完整DOM结构"是什么样子的: <!-- da
-
Jquery组件easyUi实现手风琴(折叠面板)示例
本文是为大家分享了Jquery easyUi手风琴效果,供大家参考,具体内容如下 效果图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Accordion - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css&qu
-
Bootstrap按钮组件详解
按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作. 结构方面:使用一个类名为btn-group的容器,把多个按钮放在这个容器中. 按钮组也是一个独立的组件,所以可以找到相应的源码文件: Less:buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行 <div class="btn-group"> <button type="button" class=&qu
-
Jquery Easyui分割按钮组件SplitButton使用详解(17)
SpliButton组件依赖于Menu(菜单)组件和 LinkButton(按钮)组件 加载方式 Class加载 <a href="javascript:void(0)" id="edit" class="easyui-splitbutton" data-options="menu:'#box',iconCls:'icon-edit'">编辑</a> <div id="box"
-
jQuery之按钮组件的深入解析
按钮组件: $(selector).button([options]); 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"&
-
Jquery组件easyUi实现选项卡切换示例
本文实例为大家分享了Jquery easyUi选项卡切换效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" hre
-
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
本文主要内容是介绍EasyUI的一些常用组件的使用,都是一些非常基础的知识,适合入门者学习,主要包括Base(基础).Layout(布局).菜单和按钮.表单.窗口.表格和树等的使用.要求完全掌握这些内容,学会查阅文档,了解开发基本思想.如果想进一步深入学习,可以直接去官网进行学习,查阅文档等http://www.jeasyui.com/. 一.简介 EasyUI是一种第三方组织开发的,开源的,功能强大的,基于jquery的插件库. 主要可以用于web的后台前端.jQuery EasyUI 提供易
-
Jquery下EasyUI组件中的DataGrid结果集清空方法
我们有一个模块如下图,要求选择"地区"及"代维公司"后,刷新第一个DataGrid框体 并以第一个结果集中的行为数据条件点击完成下一个框体的检索 现在我们已完成相应功能,并在选择"地区"及"代维公司"并保证这两个选项同时有值后,自动刷新第一个DataGrid(DG1)结果集 但是在DG1刷新完毕后,后面两个紧跟的DG2及DG3还是保有之前的结果 我试图更改DG2及DG3的查询条件,手动传一个空的ID值给query()方法,但是
-
纯js实现悬浮按钮组件
先上效果 下面附上代码 使用方式很简单只需要 在页面引入这段js 即可 $(()=> { let param = { tag: true, num: 1, ele: document.createElement('div'), icon: '', homeIcon: '', moreIcon: '', personalIcon: '', closeIcon: '', distance: '500', css: "position:fixed;" + "bott
-
jQuery Mobile中的button按钮组件基础使用教程
一.Button 组件及 jQuery Mobile 如何丰富组件样式 在 jQuery Mobile 里,可以通过给任意链接添加 data-role="button" 来产生一个 button 组件,jQuery Mobile 会追加一定的样式到链接,值得注意的是,jQuery Mobile 在给组件元素追加样式时不一定只在原有的元素上添加 CSS 和 Javascript 响应,一般还会追加一些新的元素使到组件的样式更接近于原生的 App 组件样式.下面给出一个例子: 这是一个添加
随机推荐
- AjaxUI:滑动条
- DW8与VS2003的乱码问题解决
- PHP header()函数使用详细(301、404等错误设置)
- PHP高精确度运算BC函数库实例详解
- memcache命令启动参数中文解释
- 用实例说明python的*args和**kwargs用法
- Android支付宝支付的示例代码
- js倒计时显示实例
- jQuery验证表单格式的使用方法
- JavaScript实现前端分页控件
- Javascript miscellanea -display data real time, using window.status
- JS实现仿QQ聊天窗口抖动特效
- 阿里云云服务器Windows 2008下IIS添加网站绑定域名图文教程
- Android编程简易实现XML解析的方法详解
- 深入理解JAVA中的聚集和组合的区别与联系
- ThinkPHP控制器详解
- Android开发笔记之:ListView刷新顺序的问题详解
- 用C#在本地创建一个Windows帐户(DOS命令)
- C++中小数点输出格式(实例代码)
- python 并发编程 多路复用IO模型详解