<!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>
时间： 2024-07-30 13:44:12