hi
趁着周一去抽血化验,真开心。。。下午报告才出来,不过早上来了就开始各种晕菜,叫错名字,说错话。。。。。至于么。。
还有在教研室的30天就可以肥家了,凯森凯森。今天不想干活(哪天想干过我就问问),学学jquery吧。
1、jQuery
十、UI型插件
10.1 拖曳插件——draggable
拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()
方法,实现各种拖曳元素的效果,调用格式如下:
$(selector). draggable({options})
options参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,如“containment”属性指定拖曳区域,“axis”属性设置拖曳时的坐标方向。
<body>
<div id="divtest">
<div id="x" class="drag">沿x轴拖拽</div>
<div id="y" class="drag">沿y轴拖拽</div>
</div>
<script type="text/java script">
$(function () {
$("#x").draggable({axis:"x"});
$("#y").draggable({axis:"y"});
});
</script>
</body>
10.2 放置插件——droppable
除使用draggable插件拖曳任意元素外,还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中,类似购物车效果,调用格式如下:
$(selector).droppable({options})
selector参数为接收拖曳元素,options为方法的配置对象,在对象中,drop函数表示当被接收的拖曳元素完全进入接收元素的容器时,触发该函数的调用。
<body>
<div id="divtest">
<div class="box">
<div class="title">产品区</div>
<div class="drag"><div>苹果</div></div>
</div>
<div class="box">
<div class="title">回收站</div>
<div class="cart"><div id="tip">还没有产品</div></div>
</div>
</div>
<script type="text/java script">
$(function () {
$(".drag").draggable();
$(".cart").droppable({
drop: function () {
sum--;
$(".cart").removeClass("focus");
$("#tip").html("还没有产品");
$(".title span").html(sum);
}
})
});
</script>
</body>
10.3 拖曳排序插件——sortable
拖曳排序插件的功能是将序列元素(例如<option>、<li>)按任意位置进行拖曳从而形成一个新的元素序列,实现拖曳排序的功能,它的调用格式为:
$(selector).sortable({options});
selector参数为进行拖曳排序的元素,options为调用方法时的配置对象
<body>
<div id="divtest">
<div class="title">
<span class="fl">我最喜欢的运动</span>
</div>
<div class="content">
<ul>
<li>1)足球</li>
<li>2)散步</li>
<li>3)篮球</li>
<li>4)乒乓球</li>
<li>5)骑自行车</li>
</ul>
</div>
</div>
<script type="text/java script">
$(function () {
$("ul").sortable({
delay:2,
opacity:0.4
})
});
</script>
</body>
10.4 面板折叠插件——accordion
面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果,即点击标题时展开内容,再点另一标题时,关闭已展开的内容,调用格式如下:
$(selector).accordion({options});
其中,参数selector为整个面板元素,options参数为方法对应的配置对象。
<body>
<div id="divtest">
<div id="accordion">
<h3>
<a href="#">白富美</a></h3>
<p>咱们结婚吧!</p>
<h3>
<a href="#">土豪族</a></h3>
<p>咱们交个朋友吧!</p>
</div>
</div>
<script type="text/java script">
$(function () {
$("#accordion").accordion();
});
</script>
</body>
10.5 选项卡插件——tabs
使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在