TOP

不就是抽个血吗,至于么-jQuery,Linux完结篇(一)
2017-10-10 10:03:12 】 浏览:10578次 本网站的内容取自网络,仅供学习参考之用,绝无侵犯任何人知识产权之意。如有侵犯请您及时与本人取得联系,万分感谢。
Tags:就是 至于 -jQuery Linux 完结

  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>选项定义为选项标题,在

请关注公众号获取更多资料


不就是抽个血吗,至于么-jQuery,Linux完结篇(一) https://www.cppentry.com/bencandy.php?fid=85&id=127123

首页 上一页 1 2 3 4 5 6 7 下一页 尾页 1/9/9
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇PHP之简单实现MVC框架 下一篇突然发现这周有点忙。。着玩-PHP..

评论

验 证 码:
表  情:
内  容: