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>