jQuery学习笔记,附有自己的注释
包含拖拽、缩放、拖入以及分页和排序功能
初始界面
调整界面
完整代码
<!doctype html>
<html>
<head>
<title>Learning jQueryUI</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="jquery.min.js"></script>
<!--谷歌提供的jQueryUI网络链接-->
<!--CSS文件-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<!--JS文件-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
#draggable {
width:200px;
height:200px;
background-color:green;
}
#resizable {
width:300px;
height:300px;
background-color:yellow;
}
</style>
</head>
<body>
<!--拖拽、缩放、拖入功能-->
<div id="draggable"></div>
<div id="resizable"></div>
<script>
$("#draggable").draggable(); /*调用draggable功能 draggable=可拖拽的*/
/*$("#resizable").resizable(); /*调用resizable功能 resizable=可调整大小的*/
$("#resizable").droppable({ /*调用droppable功能 droppable=可放置的*/
drop:function(ui,event){ /*当有其他元素拖动到里面后会执行函数操作*/
$("#resizable").css("background-color","red"); /*触发函数时 改变指定元素的CSS属性*/
}
});
</script>
<!--分页功能 让界面看着更简洁-->
<div id="accordion">
<h3>Title1</h3>
<div>
<p>This is some text.This is some text.This is some text.</p>
</div>
<h3>Title2</h3>
<div>
<p>This is some text.This is some text.This is some text.</p>
</div>
<h3>Title3</h3>
<div>
<p>This is some text.This is some text.This is some text.</p>
</div>
</div>
<script>
$("#accordion").accordion(); /*调用accordion功能 accordion=可折叠的*/
</script>
<!--排序功能 可以调整列表的循序-->
<ul>
<li>Pizza</li>
<li>IceCream</li>
<li>Chocolate</li>
<li>Apple</li>
<li>Banana</li>
</ul>
<script>
$("ul").sortable(); /*调用排序功能 sortable=可整理的*/
</script>
</body>
</html>