jQuery插件应用之--- 选项卡插件的使用（10级学员韩晓爽课堂笔记）

jQuery插件应用之 --- 选项卡插件的使用

一首先来介绍一下选项卡插件的作用

jQuery UI插件折叠板可以实现页面中指定区域的折叠效果，即通过单击某个面板中的标题栏，就会展开相应的内容，当点击其他面板标题栏时，已展开的内容会自动关闭，通过这种方式，实现多个面板数据在一个页面中有序展示。

二选项卡插件的使用

1． 首先来介绍一下折叠面板所用的参数

（1）collapsible是否可折叠选项卡的内容，设置一个布尔值，如果为true，那么允许用户可折叠选项卡的内容，即首次点击展开，再点击关闭，默认值为false。

（2）disable 设置不可用选项卡

（3）event 设置展开选项的事件，默认值为”click”，也可以设置双击，鼠标划过事件

（5）fx设置切换选项卡时的一些动画效果

（6）设置被选中选项卡的index

2.我们首先来创建一个html页面，如下：

<body>
<div>
<div>
<h1>模仿面板的效果</h1>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">我是第一个选项卡 </div>
<div id="tabs-2">我是第二个选项卡</div>
<div id="tabs-3">N我是第三个选项卡</div>
</div>
</div>
</div>
</body>

3.通过编写js代码来实现功能，需要注意的是要引入文件

<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>

<scripttype="text/javascript"src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js"></script>

<linkrel="stylesheet"type="text/css"href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">

<scripttype="text/javascript">

然后代码的使用

<script type="text/javascript">
//页面加载完毕触发匿名函数
$(document).ready(function(){
$('#tabs').tabs({
collapsible:true,
selected:1,//默认展开的是第1个面板  下标从0开始的
event:"mouseover",
//动画效果
fx:{
opacity:"toggle",//显示的动画效果  还有show 和fadeIn,toggle  也可以设置为opacity:0.2  0.2是透明度，透明度是0-1,1代表是完全不透明
height:"toggle" //高度本身展开的方式
},
disabled:[1,2],  //1和2不可用的面板
});
//改变原有选项卡的内容        $('#tabs').tabs("url",2,"tab5.jsp");

        //添加选项卡

        $('#tabs').tabs("add","tab5.jsp","four");

        //移除选项卡

        $('#tabs').tabs("remove",1);

    });

  </script>

在改变原有的选项卡的内容的时候需要在html中插入一条语句：

<li><a href="${pageContext.request.contextPath}/tabs/tab4.jsp">4</a></li>

内部是通过ajax来实现的

执行的效果为：

jQuery插件应用之--- 选项卡插件的使用（10级学员韩晓爽课堂笔记）相关推荐

jQuery插件autoComplete介绍(10级学员张帅鹏总结)
jQuery插件autoComplete介绍概述:AutoComplete为自动填充,展示之意.用户在使用文本框搜索信息时,使用插件的autoplete方法绑定文本框.当在文本框中输入某个字符时,通 ...
使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
漂亮的jQuery tab选项卡插件
清远大学城网(http://www.qydxc.com) tab选项卡在实际应用中几乎到处可见,像现在大型网站163,QQ,新浪,淘宝都使用了tab选项卡效果,下面我来介绍一款jQuery tab选项 ...
jquery 选项卡插件
2019独角兽企业重金招聘Python工程师标准>>> KandyTabs 选项卡插件 html标准化结构,自动智能生成相应样式 http://demo.jgpy.cn/kandyT ...
html tab选项卡控件,tab选项卡插件
这是一款使用十分方便的.为移动设备定制的.可在水平和垂直两个方向上显示的jQuery和css3响应式tab选项卡插件.在你要显示很多不同的内容时,tab选项卡导航方式是十分有用的.常见的方式是在同一个 ...
JQuery的45个经典插件应用
jQuery滑动门 1) Slider Gallery- 这是一个模仿Apple网站的jQuery滑动门产品展示．这个'产品展示滑动门'就是一个直线前进的画廊,在有限的空间里面显示产品图片,支持Ta ...
jQuery超炫酷按钮插件及源码
现在大部分网页的按钮都是经过美化的,那些原始的浏览器按钮太过于枯燥乏味,让用户失去和网站交互的兴趣.早期我们都是通过背景图片来美化网页按钮,而现在我们可以利用扩展性更好的CSS3来制作漂亮的网页按钮, ...
jQuery Masonry 一个 jQuery动态网格布局的插件
jQuery Masonry 是一个 jQuery动态网格布局的插件. 每个元素都是漂浮在固定的网格布局上面,就像一枚图钉定在墙上一样. 我们发现以下的15网站使用jQuery Masonry的范例. ...
PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
Jquery插件入门之Validate插件的简单使用
目录一.jQuery插件 1.jQuery插件概述 2.Validate插件一.jQuery插件 1.jQuery插件概述 jQuery插件机制概述 jQuery插件的机制很简单,就是利用jQue ...

jQuery插件应用之--- 选项卡插件的使用（10级学员韩晓爽课堂笔记）

jQuery插件应用之--- 选项卡插件的使用（10级学员韩晓爽课堂笔记）相关推荐

最新文章

热门文章

jQuery插件应用之--- 选项卡插件的使用（10级学员 韩晓爽课堂笔记）

jQuery插件应用之--- 选项卡插件的使用（10级学员 韩晓爽课堂笔记）相关推荐

最新文章

热门文章

jQuery插件应用之--- 选项卡插件的使用（10级学员韩晓爽课堂笔记）

jQuery插件应用之--- 选项卡插件的使用（10级学员韩晓爽课堂笔记）相关推荐