Jquery UI应用的一些记录，需要的朋友拿走不谢~——~

版本：

Jquery v1.10.2

UI - v1.11.4

//==============================================
<style type="text/css">
body{ font-size:12px}

/*加载条*/
  .ui-progressbar { position: relative; }
  #progressbar .ui-progressbar-value { background-color: #CCC; }
  .progress-label {
    position: absolute;
    left: 45%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
  }
  
</style>

//==============================================
<script>
$(function() {

  //日历显示控件
  $( ".datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: "c-80:c+10",
dateFormat: 'yy-mm-dd',
monthNamesShort: [ "01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月" ],
dayNamesMin: [ "日", "一", "二", "三", "四", "五", "六" ]
  });
  
  //按钮
  $( ".bt" ).button().click(function( event ){ event.preventDefault();　});
  
  //弹出窗口
  $( "#dialog" ).dialog({
      resizable: false, modal: true, autoOpen: false,
  // width: 400, height: 200,
      //buttons: {
      //  "确定": function() { $( this ).dialog( "close" );},
      //  "取消": function() { $( this ).dialog( "close" );}
      //}
   });
   
   //加载条
   $( "#progressbar" ).progressbar({value: false});

//提示
$( "#show-option" ).tooltip({
      show: {
        effect: "slideDown",
        delay: 250
      }
    });

$( "#show-user, #show-pwd" ).tooltip({
      position: {
        my: "left top",
        at: "right+5 top-5"
      }
    });


});
  </script>

//==============================================
日历显示控件
<p>Date1: <input name="date1" type="text" class="datepicker" size="30"> &nbsp; Date2: <input name="date2" type="text" class="datepicker" size="30"></p>

按钮
<p><a href="#" class="bt">按钮3</a>　&nbsp;　<input type="button" value="按钮4" class="bt"></p>

弹出窗口
<div id="dialog" title="温馨提示">
<p>这里是提示内容 <a href="#" onclick="$( '#dialog' ).dialog( 'close' );">关闭</a></p>
<div id="progressbar"><div class="progress-label">Loading...</div></div>
</div>
<p><a href="#" onclick="$( '#dialog' ).dialog( 'open' );">点击打开窗口</a></p>

提示：
<p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="slide down on show">show</a></p>
<p>用户名：<input name="date1" type="text" id="show-user" title="请输入用户名"></p>
<p>密码：<input name="date1" type="text" id="show-pwd" title="请输入密码"></p>