首页 > 代码库 > jQuery UI 入门

jQuery UI 入门

2024-08-15 19:17:44   220人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://www.mamicode.com/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="http://www.mamicode.com/jquery-1.12.4.min.js"></script>
<script src="http://www.mamicode.com/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 入门


联系
我们