当前位置：首页 > 网页特效 > 日期和时间

jQuery UI可拖拽排序的时间行程表

分类：日期和时间日期：2024-05-14 点击(0) 评论(0)

简介

##### HTML
引入jquery ui的样式表

```html
<link rel='stylesheet' href='http://libs.useso.com/js/jqueryui/1.10.4/css/jquery-ui.min.css'>
```
html代码十分简单。使用一个无序列表来制作各个时间表选项，给ul一个idsortable。

```html
<div class="steps">
  <ul id="sortable">
    <li>
      <input id='label-1' type='checkbox'/>
      <label for='label-1'>
        <h2>Meet Larry at 6pm <span>Lorem ipsum dolor</span></h2>   
      </label>
    </li>
     
    <li>
      <input id='label-2' type='checkbox' checked/>
      <label for='label-2'>
        <h2>Team Session <span>Lorem ipsum dolor</span></h2>   
      </label>
    </li>
     
    <li>
      <input id='label-3' type='checkbox'/>
      <label for='label-3'>
        <h2>Watch Movie <span>Lorem ipsum dolor</span></h2>   
      </label>
    </li>
     
    <li>
    <input id='label-4' type='checkbox'/>
     <label for='label-4'>
        <h2>Date with babe <span>Lorem ipsum dolor</span></h2>   
      </label>
    </li>
     
    <li>
     <input id='label-5' type='checkbox'/>
     <label for='label-5'>
        <h2>Jogging at Ayala<span>Lorem ipsum dolor</span></h2>   
      </label>
    </li>
     
  </ul>
</div>
```
##### JAVASCRIPT
引入jquery和jquery ui 的js文件。

```html
<script src='http://libs.useso.com/js/jquery/1.11.0/jquery.min.js'></script>
<script src='http://libs.useso.com/js/jqueryui/1.10.4/jquery-ui.min.js'></script>
```
##### 调用插件

```html
$(function() {  
    $( "#sortable" ).sortable({   
        placeholder: "ui-sortable-placeholder"  
    });  
});
```

web299.com

jQuery UI可拖拽排序的时间行程表

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果