Jquery组件easyUi实现选项卡切换示例


Posted in Javascript onAugust 23, 2016

本文实例为大家分享了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" href="../themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="../themes/icon.css">
 <link rel="stylesheet" type="text/css" href="demo.css">
 <script type="text/javascript" src="../jquery.min.js"></script>
 <script type="text/javascript" src="../jquery.easyui.min.js"></script>
</head>
<body>
 <h2>基本选项卡</h2>
 <p>Click tab strip to swap tab panel content.</p>
 <div style="margin:20px 0 10px 0;"></div>
 <div class="easyui-tabs" style="width:700px;height:250px">
 <div title="宠物" style="padding:10px">
  <p style="font-size:14px">jQuery EasyUI framework 选项卡</p>
  <ul>
  <li>小兔子</li>
  <li>小狗狗</li>
  <li>小猫咪</li>
  <li>小萌宠</li>
  <li>XXXXXXXXXXXXX</li>
  <li>YYYYYYYYYYYYY</li>
  </ul>
 </div>
 <div title="My Documents" style="padding:10px">
  <ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
 </div>
 <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
  This is the help content.
 </div>
 </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 设置标题的自动翻转
Oct 03 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 #Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 #Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 #Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 #Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 #Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 #Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 #Javascript
You might like
一个SQL管理员的web接口
2006/10/09 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
python实现马耳可夫链算法实例分析
2015/05/20 Python
深入浅出学习python装饰器
2017/09/29 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
成人继续教育实施方案
2014/03/01 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
计算机实训报告范文
2014/11/05 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
2014个人年度工作总结
2014/12/15 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
护士2015年终工作总结
2015/04/29 职场文书
天气温馨提示语
2015/07/14 职场文书
Python中的变量与常量
2021/11/11 Python