jQuery UI 学习笔记
1.交互：
$(document).ready(function(){
$("#a_btn").button().draggable();
//拖动
$("#div1").draggable();
//放置
$("#div2").droppable();
$("#div2").on("drop", function(event, ui){
//alert(event);
$("#div2").text("drop事件");
});
//缩放,鼠标放到该处后可以拖动
$("#div3").resizable();
//使用鼠标选择单个元素或一组元素。
//$("#btn").button();
//$("ul").selectable();
//$("#btn").on("click", function () {
// //alert("hello");
// if($("#r").hasClass("ui-selected")){
// alert("right");
// }
//})
// 使用鼠标调整列表中或者网格中元素的排序。
$("ul").sortable();
});
.html
2. 控件
$(document).ready(function () {
//在一个有限的空间内显示用于呈现信息的可折叠的内容面板。
$("#accordion").accordion();
//根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。
var aototags = ["python","c/c++", "java"];
$("#tags").autocomplete({
source:aototags
})
//日期控件
$("#date").datepicker();
$("#btn").button();
//对话框
$("#btnd").button().on("click", function () {
$("#div").dialog();
});
}).html
选项1
hellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
选项1
hellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
选项1
hellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
选项1
hellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
Date:
按钮
这是一个对话框
对话框
3. 控件2
/**
*
*/
var pb;
var max=100;
var current = 0;
var valueSpan, slider;
$(document).ready(function () {
//进度条，显示一个确定的或不确定的进程状态。
//$("#pb").progressbar({value:50});
pb=$("#pb");
pb.progressbar({max:100});
setInterval(function () {
current++;
if(current>=100){
current=0;
}
pb.progressbar("option", "value", current);
}, 100);
// 菜单
$("#menu").menu({position:{at:"left bottom"}});
//滑块
//$("#slider").slider();
slider = $("#slider");
valueSpan = $("#span");
//slider.slider({
// change: function (event, ui) {
// valueSpan.text(slider.slider("option","value"));
// }
//})
slider.slider({
slide: function (event, ui) {
valueSpan.text(slider.slider("option","value"));
}
})
//下拉菜单
$("#spinner").spinner();
$("#spinner").spinner("value","10");
$("#btn").on("click", function () {
alert($("#spinner").spinner("value"));
})
//tabs
$("#tabs").tabs();
});
.html