Jquery组件easyUi实现选项卡切换示例
2016-08-23 16:22
861 查看
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Jquery组件easyUi实现表单验证示例
- Jquery组件easyUi实现手风琴(折叠面板)示例
- MVC+Jquery easyui实现无限级部门示例
- jquery自动切换tabs选项卡的具体实现
- Jquery插件easyUi实现表单验证示例
- 基于jquery实现最简单的选项卡切换效果
- [Android]使用PagerSlidingTabStrip来实现选项卡切换界面的示例
- MVC+Jquery easyui实现无限级部门小示例
- jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
- jQuery实现选项卡切换效果简单演示
- jQuery实现TAB选项卡切换特效简单演示
- jQuery实现Tab选项卡切换效果简单演示
- 扩展jQuery easyui tabs组件,实现根据id(或者自定义属性)操作tab标签
- Jquery插件easyUi实现表单验证示例
- jquery实现tab标签选项卡自动切换效果
- jquery实现的非常简单实用带有渐变切换效果的tab选项卡
- 使用jQuery+css实现选项卡切换功能
- jQuery实现滚动切换的tab选项卡效果代码
- Android中ViewPager组件的基本用法及实现图片切换的示例
- jQuery 标签切换----之选项卡的实现