jQuery UI 入门
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery UI 入门相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="jquery-ui-1.12.0/jquery-ui.css">
<style>
#d1{height:100px;width: 100px;background-color: yellow}
#d2{height:100px;width: 100px;border: 2px dashed yellowgreen}
.droppable-active{
border: 1px solid red;
}
.droppable-hover{
background-color: green;
}
li{
background-color: grey;
margin: 10px;
list-style: none;
}
.ui-selected{
background-color: red;
}
</style>
</head>
<body>
<!--
Draggable:拖拽
droppables:放置
sortable:排序
resizable:改变大小
accrodion:折叠菜单
dialogs:对话框
sliders:滑动条
tablesorter:表格排序
-->
<div id="d1">draggable</div>
<div id="d2">droppable</div>
<ul id="sort">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div id="accordion">
<h2>第一行</h2>
<div>
<p>第一Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet aspernatur atque, aut blanditiis debitis dolores facilis ipsum iusto libero natus necessitatibus quibusdam quis sint veritatis? Animi aperiam facere iure?
</p>
</div>
<h2>第二行</h2>
<div>
<p>第二Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet aspernatur atque, aut blanditiis debitis dolores facilis ipsum iusto libero natus necessitatibus quibusdam quis sint veritatis? Animi aperiam facere iure?
</p>
</div>
<h2>第三行</h2>
<div>
<p>第三Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet aspernatur atque, aut blanditiis debitis dolores facilis ipsum iusto libero natus necessitatibus quibusdam quis sint veritatis? Animi aperiam facere iure?
</p>
</div>
</div>
<div id="dialog" title="德玛西亚">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias amet aut culpa enim in mollitia, obcaecati quae. A accusantium aliquam aspernatur distinctio in minus quaerat quas qui quisquam tempora!</p>
</div>
<div id="slider"></div>
<script src="jquery-1.12.4.min.js"></script>
<script src="jquery-ui-1.12.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
// $("#d1").draggable();
// $("#d1").draggable({helper:‘clone‘,opacity:0.7});
// $("#d1").draggable({helper:‘clone‘});
// $("#d1").draggable({opacity:0.3});
$(‘#d2‘).droppable({
accept:‘#d1‘,
activeClass:‘droppable-active‘,
hoverClass:‘droppable-hover‘,
drop:function(ev,ui){
$(this).append(‘<br>Dropped!‘)
}
}) ;
// $(‘#sort‘).sortable();
// $(‘#sort‘).sortable({axis:‘y‘}); //只能在y轴拖
$(‘#sort‘).selectable();
$(‘#d1‘).resizable();
// $(‘#accordion‘).accordion()
$(‘#accordion‘).accordion({collapsible:true,active:2});
$(‘#dialog‘).dialog();
// $(‘#slider‘).slider();
$(‘#slider‘).slider({step:10}).on("slidechange",function(event,ui){
debugger;
})
});
</script>
</body>
</html>
以上是关于jQuery UI 入门的主要内容，如果未能解决你的问题，请参考以下文章