jQuery基础教程学习笔记(八)jQuery UI基础

面板折叠插件——accordion

面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果,即点击标题时展开内容,再点另一标题时,关闭已展开的内容,调用格式如下:

$(selector).accordion({options});

其中,参数selector为整个面板元素,options参数为方法对应的配置对象。

例:<div id="accordion">

<h3>

<a href="#">白富美</a></h3>

<p>咱们结婚吧!</p>

<h3>

<a href="#">土豪族</a></h3>

<p>咱们交个朋友吧!</p>

</div>

$(function () {

$("#accordion").accordion();

});//第一个默认展开的,其他默认关闭,展开一个后,其他自动关闭

选项卡插件——tabs

使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容,它的调用格式如下:

$(selector).tabs({options});

selector参数为选项卡整体外围元素,该元素包含选项卡标题与内容,options参数为tabs()方法的配置对象,通过该对象还能以ajax方式加载选项卡的内容。

例:<div id="tabs">

<ul>

<li><a href="#tabs-1">最爱吃的水果</a></li>

<li><a href="#tabs-2">最喜欢的运动</a></li>

</ul>

<div id="tabs-1">

<p>橘子</p>

<p>香蕉</p>

<p>葡萄</p>

<p>苹果</p>

<p>西瓜</p>

</div>

<div id="tabs-2">

<p>足球</p>

<p>散步</p>

<p>篮球</p>

<p>乒乓球</p>

<p>骑自行车</p>

</div>

</div>

Js部分:$(function () {

$("#tabs").tabs({

//设置各选项卡在切换时的动画效果

fx: { opacity: "toggle", height: "toggle" },

event: "mousemove" //通过移动鼠标事件切换选项卡

})

});

时间:3年前 (2017/06/12) / 阅读:500 / 评论:0

jQuery基础教程学习笔记(八)jQuery UI基础