在网上学习了UI型插件,自己做个备忘录备用
更多的插件也可以在官网上面去学习 https://jqueryui.com/
draggable拖拽插件
<script type="text/javascript">
$(function () {
$("#a").draggable({containment:"parent"});
$("#b").draggable({containment:"parent",axis:"y"});
});
</script>
droppable放置插件
<script type="text/javascript">
$(function () {
var intSum=0;
$(".drag").draggable();
$(".cart").droppable({
drop: function () {
console.log("========进入到drop函数里面");
intSum++;
$(this).addClass('focus').find("#tip").html('');
$('.title span').html("("+intSum+")");
}
})
});
</script>
<script type="text/javascript">
$(function () {
$("ul").sortable({
$("ul").sortable({
delay:2,//防止与点击事件冲突,延时2秒
opacity:0.35,//以透明度0.35随意拖动
})
})
});
</script>
accordion面板折叠插件
需要注意的是折叠的是标题后面的一个布局,所以折叠部分内容较多可以用div包裹起来
<script type="text/javascript">
$(function () {
$("#accordion").accordion();
});
</script>
tabs 选项卡插件
使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容
<script type="text/javascript">
$(function () {
$("#tabs").tabs({
//设置各选项卡在切换时的动画效果
fx: { opacity: "toggle", height: "toggle" },
//event: "mousemove" //通过移动鼠标事件切换选项卡
event: "click" //通过移动鼠标事件切换选项卡
});
});
</script>
还是用其他第三方的好,样式方面别人调好了
<script type="text/javascript">
$(function () {
$("#btnDelete").bind("click", function () { //询问按钮事件
if ($("#spnName").html() != null) { //如果对象不为空
sys_Confirm("您真的要删除该条记录吗?");
return false;
}
});
});
function sys_Confirm(content) { //弹出询问信息窗口
$("#dialog-modal").dialog({
height: 140,
modal: true,
title: '系统提示',
hide: 'slide',
buttons: {
'确定': function () {
$("#spnName").remove();
$(this).dialog("close");
},
'取消': function () {
$(this).dialog("close");
}
},
open: function (event, ui) {
$(this).html("");
$(this).append("<p>" + content + "</p>");
}
});
}
</script>
menu菜单工具插件
<script type="text/javascript">
$(function () {
$("#menu").menu();
});
</script>
<script type="text/javascript">
$(function () {
//定义变量
var intR = 0, intG = 0, intB = 0, strColor;
$("input").spinner({
//初始化插件
max: 10,
min: 0,
//设置微调按钮递增/递减事件
spin: function (event, ui) {
if (ui.value == 8)
spnPrev.style.backgroundColor = "red";
else
spnPrev.style.backgroundColor = "green";
},
//设置微调按钮值改变事件
change: function (event, ui) {
var intTmp = $(this).spinner("value");
if (intTmp < 0) $(this).spinner("value", 0);
if (intTmp > 10) $(this).spinner("value", 10);
if (intTmp == 8)
spnPrev.style.backgroundColor = "red";
else
spnPrev.style.backgroundColor = "green";
}
});
});
</script>
<script type="text/javascript">
$(function () {
$("#name").tooltip({
show: {
effect: "slideDown",
delay: 350
},
hide: {
effect: "explode",
delay: 350
},
position: {
my: "left top",
at: "left bottom"
}
});
});
</script>