前辈的jq-ui，实现标签页面的tab切换

本项目链接

膜拜大佬 链接：https://github.com/xuguofeng/jq-ui

jq-ui

前辈的jq-ui，实现标签页面的tab切换

jQuery ui plugins 1. 下载、部署

把项目clone到tomcat的应用目录下面
启动tomcat访问 localhost:8080/jq-ui/ 即可看到页面效果

2. tab插件 2.1 引入jquery库、tab.js库、tab.css样式文件

<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/tab.js"></script> <link rel="stylesheet" href="css/blue/tab.css"/> 2.2 页面加载完成后初始化tab插件

$(function() { $("#tab1").tab(); }); 2.3 页面代码

<div id="tab1""> <ul></ul> <div></div> </div> 2.4 效果

3. accordion插件 3.1 引入jquery库、accordion.js库、accordion.css样式文件

<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/accordion.js"></script> <link rel="stylesheet" href="css/blue/accordion.css"/> 3.2 页面加载完成后初始化accordion插件

$(function() { $("#accordion1").accordion(); }); 3.3 页面代码

<ul id="accordion1"> <li accordion-id="menu1" class="active">插件使用</li> <li> <ul> <li><a href="javascript:;">选项卡插件</a></li> <li><a href="javascript:;">手风琴插件</a></li> </ul> </li> <li accordion-id="menu2">管理员管理</li> <li> <ul> <li><a href="javascript:;">管理员查看</a></li> <li><a href="javascript:;">管理员添加</a></li> <li><a href="javascript:;">管理员修改</a></li> </ul> </li> <li accordion-id="menu3">用户管理</li> <li> <ul> <li><a href="javascript:;">用户查看</a></li> <li><a href="javascript:;">用户添加</a></li> <li><a href="javascript:;">用户修改</a></li> </ul> </li> </ul> 3.4 效果

4. pagination插件 4.1 引入jquery库、pagination.js库、pagination.css样式文件

<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/pagination.js"></script> <link rel="stylesheet" href="css/blue/pagination.css"/> 4.2 页面加载完成后初始化pagination插件

// 分页插件 $("#pagination").pagination({ pageNum: 1, size: 6, total: 11, click: function(curr, s) { return 11; } }); 4.3 页面代码

<div id="pagination"></div> 4.4 效果

5. slider插件 5.1 引入jquery库、jquery.slider.js库、slider.css样式文件

<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/slider/jquery.slider.js"></script> <link rel="stylesheet" href="js/slider/slider.css"/> 5.2 页面加载完成后初始化slider插件

$("#banner1").slider({ timeInterval: 2000, // 轮播时间间隔，默认4s controlNav: true, // 圆点导航按钮 directionNav: true // 上一个和下一个按钮 }); $("#banner").slider({ timeInterval: 2000, controlNav: true, directionNav: true }); 5.3 页面代码

<style> #banner { width: 640px; height: 247px; margin: 20px auto; } #banner1 { width: 960px; height: 450px; margin: 20px auto; } </style> <div id="banner"> <ul> <li><a href="#"><img src="images/banner1.jpg" alt="第1张图片"></a></li> <li><a href="#"><img src="images/banner2.jpg" alt="第2张图片"></a></li> <li><a href="#"><img src="images/banner3.jpg" alt="第3张图片"></a></li> </ul> </div> <div id="banner1"> <ul> <li><a href="#"><img src="images/1.jpg" alt="第1张图片"></a></li> <li><a href="#"><img src="images/2.jpg" alt="第2张图片"></a></li> <li><a href="#"><img src="images/3.jpg" alt="第3张图片"></a></li> <li><a href="#"><img src="images/4.jpg" alt="第4张图片"></a></li> </ul> </div> 5.4 效果

6. datatable插件 6.1 引入jquery库、datatable.js库、datatable.css样式文件

<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/datatable.js"></script> <link rel="stylesheet" href="css/blue/datatable.css"/> 6.2 页面加载完成后初始化datatable插件

$("#first-datatable").datatable({ width: "1000", height: "auto", columns: [ { field: "id", columnName: "编号", css: { "text-align": "center" } }, { field: "username", columnName: "用户名" }, { field: "age", columnName: "年龄" }, { field: "phone", columnName: "联系电话", css: { "text-align": "center" } }, { field: "email", columnName: "邮箱" }, { field: "description", columnName: "自我介绍" } ], url: "/jq-ui/ajax/admin_json.jsp", pageNum: 1, // 显示第几页数据，默认1 pageSize: 15, // 每页数据数量，默认10 pagination: true, // 是否启用分页组件，默认启用 showCheckbox: true }); 6.3 页面代码

<button class="default-button" onclick="update();">修 改</button> <button class="default-button" onclick="del();">删 除</button> <button class="default-button" onclick="reload();">刷 新</button> <table id="first-datatable"></table> 6.4 效果

7. dialog插件 7.1 引入jquery库、dialog.js库、dialog.css样式文件

<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/dialog.js"></script> <link rel="stylesheet" href="css/blue/dialog.css"/> 7.2 打开一个dialog对话框

$.dialog.open({ id: 'dialog1', url: 'ajax/admin_dialog.html', width: 600, height: 400, title: '使用url加载数据', modal: true, showType: 'slide' }); 7.3 效果

8. messager插件 8.1 引入jquery库、messager.js库、messager.css样式文件

<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/messager.js"></script> <link rel="stylesheet" href="css/blue/messager.css"/> 8.2 打开一个alert提示框

$.messager.alert({ title: '信息', content: '请填写执行情况(200字以内)', level: 'warning', btn: '知道了', time: 1000, callback: function() { // location.reload(); }, showType: 'slide' }); 8.3 效果

9. 其他插件

panel插件示例
panel插件手册

tree插件示例
tree插件手册

10. Demo项目说明

ajax目录：保存ajax请求响应文件
css目录： 保存插件css样式文件
demo目录：保存示例html和css样式文件，这个目录下的html不可以直接访问，只能通过首页的手风琴链接查看
doc目录： 保存插件API文档，这个目录下的html不可以直接访问，只能通过首页的手风琴链接查看
img目录： 保存插件和示例图片
js目录： 保存jquery库、插件库

index.html文件是demo项目的入口


我是一个jQuery插件开发的初学者，现在是一边学习一边开发，代码难免有一些不足之处，您在使用插件时还是需要进行详细测试。
如果您有需求优化、代码优化、BUG修复上的建议，您可以通过QQ联系我：947805384