jquery-ui拖拽、日期、选项卡、手风琴组件的使用

作者：管理员

发布时间：2013/1/25 9:30:40

评论数：3

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=217

可拖拽的效果（draggable）的使用
1、用到的文件
jquery.ui.all.css
jquery-1.7.1.js 
jquery.ui.core.js 
jquery.ui.widget.js 
jquery.ui.mouse.js 
jquery.ui.draggable.js

 

2、代码使用
<script>
 //可拖拽的div对其方向，范围进行控制
 $(function() {
  $( "#draggable" ).draggable({ axis: "y" });
  $( "#draggable2" ).draggable({ axis: "x" });
  $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
  $( "#draggable4" ).draggable({ containment: "#demo-frame" });
  $( "#draggable5" ).draggable({ containment: "parent" });
 });
</script>

 

日期控件datepicker的使用
1、用到的文件
jquery.ui.all.css
jquery-1.7.1.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.datepicker.js

 

2、代码使用
<script>
$(function() {
 $( "#datepicker" ).datepicker(); 
 $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val());
 $( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd');
});
</script>

 

选项卡组件（tabs）的使用
1、用到的文件
jquery.ui.all.css
jquery-1.7.1.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.tabs.js

 

2、代码使用
<script>
//方法很简单，没什么要说的，主要是注意id=tabs的div里面的结构
//一定要符合例子的规范，否则会报错。
$(function() {
 $( "#tabs" ).tabs();
});
</script>

手风琴组件Accordion学习（可全部折叠）的使用
1、用到的文件
jquery.ui.all.css
jquery-1.7.1.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.accordion.js

2、代码使用
<script>
 //collapsible: true不设这个属性的话，默认总会有一个展开；
 //设为true就可以全部折叠起来
 $(function() {
  $( "#accordion" ).accordion({
   collapsible: true
  });
 });
</script>

关键字：jquery-ui拖拽 日期控件 选项卡组件 手风琴组件