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中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 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
php array的学习笔记
2012/05/10 PHP
php注销代码(session注销)
2012/05/31 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
laravel model 两表联查示例
2019/10/24 PHP
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
python3.5使用tkinter制作记事本
2016/06/20 Python
python实现简单五子棋游戏
2019/06/18 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python爬虫---requests库的用法详解
2020/09/28 Python
如何使用python写截屏小工具
2020/09/29 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
董事长秘书岗位职责
2013/11/29 职场文书
求职信怎么写
2014/05/23 职场文书
银行先进个人总结
2015/02/15 职场文书
博士导师推荐信
2015/03/25 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
详解Redis瘦身指南
2021/05/26 Redis
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL