jqueryui

Jquery UI

 

cdn.bootcss.com

<!-- jquery -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- jquery ui -->
<link href="http://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.min.js"></script>

 

code.jquery.com

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- jquery -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- jquery ui -->
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src=" http://code.jquery.com/ui/1.11.4/jquery-ui.min.js "></script>
</head>
<body>
</body>
</html>
Themes:
<link href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet">black-tie    黑领带
<link href="http://code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css" rel="stylesheet">blitzer    闪电人
<link href="http://code.jquery.com/ui/1.11.4/themes/cupertino/jquery-ui.css" rel="stylesheet">cupertino    苹果
<link href="http://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css" rel="stylesheet">dark-hive    黑暗的蜂巢
<link href="http://code.jquery.com/ui/1.11.4/themes/dot-luv/jquery-ui.css" rel="stylesheet">dot-luv    点爱
<link href="http://code.jquery.com/ui/1.11.4/themes/eggplant/jquery-ui.css" rel="stylesheet">eggplant    茄子
<link href="http://code.jquery.com/ui/1.11.4/themes/excite-bike/jquery-ui.css" rel="stylesheet">excite-bike  越野摩托  
<link href="http://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css" rel="stylesheet">flick    轻弹
<link href="http://code.jquery.com/ui/1.11.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">hot-sneaks    热时
<link href="http://code.jquery.com/ui/1.11.4/themes/humanity/jquery-ui.css" rel="stylesheet">humanity    人类
<link href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.css" rel="stylesheet">le-frog    乐蛙
<link href="http://code.jquery.com/ui/1.11.4/themes/mint-choc/jquery-ui.css" rel="stylesheet">mint-choc    薄荷巧克力
<link href="http://code.jquery.com/ui/1.11.4/themes/overcast/jquery-ui.css" rel="stylesheet">overcast    阴
<link href="http://code.jquery.com/ui/1.11.4/themes/pepper-grinder/jquery-ui.css" rel="stylesheet">pepper-grinder    胡椒研磨器
<link href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet">redmond    雷蒙德
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">smoothness    平滑
<link href="http://code.jquery.com/ui/1.11.4/themes/south-street/jquery-ui.css" rel="stylesheet">south-street    南大街
<link href="http://code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css" rel="stylesheet">start    开始
<link href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css" rel="stylesheet">sunny    阳光
<link href="http://code.jquery.com/ui/1.11.4/themes/swanky-purse/jquery-ui.css" rel="stylesheet">swanky-purse    时髦的钱包
<link href="http://code.jquery.com/ui/1.11.4/themes/trontastic/jquery-ui.css" rel="stylesheet">trontastic    前..
<link href="http://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet">ui-darkness    UI-黑暗
<link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">ui-lightness    UI-光亮
<link href="http://code.jquery.com/ui/1.11.4/themes/vader/jquery-ui.css" rel="stylesheet">vader    维达

 

 

 

 

自动完成:

<script>
$(function() {
    var availableTags=["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];
    //var availableTags=["北京","上海","南京","广东","广西","山东","山西","湖南","湖北","河南","河北","江西"];
    $( "#tags" ).autocomplete({
        source: availableTags
    });
});
</script>
<div class="ui-widget">
  <label for="tags">标签:</label>
  <input id="tags">
</div>

折叠面板

<script>
$(function() {
    $( "#accordion" ).accordion();
});
</script> 
<div id="accordion">
  <h3>部分 1</h3>
  <div>
    <p>啊啊啊</p>
  </div>
  <h3>部分 2</h3>
  <div>
    <p>啊啊啊</p>
  </div>
  <h3>部分 3</h3>
  <div>
    <p>
    啊啊啊
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>部分 4</h3>
  <div>
    <p>啊啊啊</p>
    <p>啊啊啊</p>
  </div>
</div>

缩放

<style>
#resizable{width:150px;height:150px;padding:0.5em;}
#resizableh3{text-align:center;margin:0;}
</style>
<script>
$(function() {
    $( "#resizable" ).resizable();
});
</script>
<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">缩放(Resizable)</h3>
</div>

排序

<style>
#sortable{list-style-type:none;margin:0;padding:0;width:60%;}
#sortable li{ margin:0 3px 3px 3px;padding:0.4em 0.4em 0.4em 1.5em;font-size:1.4em;height:18px;}
#sortable li span {position: absolute;margin-left: -1.3em;}
</style>
<script>
$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});
</script> 
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

拖动-放置

<style>
#draggable{width:100px;height:100px;padding:0.5em;float:left;margin: 10px 10px 10px 0; }
#droppable{width:150px;height:150px;padding:0.5em;float:left;margin:10px;}
</style>
<script>
$(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this ).addClass( "ui-state-highlight" ).html( "Dropped!" );
      }
    });
});
</script>
<div id="draggable" class="ui-widget-content">请把我拖拽到目标处!</div>
<div id="droppable" class="ui-widget-header">请放置在这里!</div>

拖动

<style>
#draggable{width:150px;height:150px;padding:0.5em;}
</style>
<script>
$(function() {
    $( "#draggable" ).draggable();
});
</script> 
<div id="draggable" class="ui-widget-content">请拖动我</div>

特效:

blind 盲
bounce 反弹
clip 夹
drop 滴
explode 爆炸(炸成9块)
fade 褪色
fold 折叠
highlight 突出
puff 泡芙
pulsate 脉动
scale 规模
shake 摇
size 大小
slide 幻灯片(从左到右出来)
transfer 转移

<script>
$("#toggle").click(function() {
  $( "#toggle" ).toggle( "explode" );
});
</script>
<style>
#toggle{width:300px;height:300px;background:#ccc;}
</style>
<div id="toggle">点这里</div>

 

 

 

待补充

你可能感兴趣的:(jqueryui)