本文說明datepicker Options 中的showAnim效果種類

其效果會是顯示月曆框有效果

一、基本JS語法

設定option

$("#datepicker").datepicker("option", "showAnim", "bounce");

二、基本說明

.datepicker("設定種類option","參數KEY為showAnim","參數值為bounce")

三、本文程式內容 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery.datepicker 7</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
.datag, .datetest {
  position: relative;
}
.ui-datepicker-trigger {
  position: absolute;
}
</style>
<script>
  $(function() {
    $("#datepicker").datepicker({
      //動畫效果 jquery animation for popup，default 為show
      //fadeIn 、fold、slideDown ，如果設為空值則不使用動畫效果 
      showAnim : "fadeIn"
 });
    $("#effectTypes").bind("change", function() {
      //var showAnim =  
      var selectval = $(this).find(":selected").val();
      console.log("selectval:" + selectval);
      $("#datepicker").datepicker("option", "showAnim", selectval);
      $("#datepicker").focus();
    });
  });
</script>
</head>
<body>
  <div class="datetest">
    <p class="datag">
      Date: <input type="text" id="datepicker">
    </p>
  </div>
  <div>說明：加入動畫效果-設計連動datepicker。</div>
  <div>
    jquery animation items.(設計連動datepicker)<br> <select name="effects" id="effectTypes">
      <option value="blind">Blind</option>
      <option value="bounce">Bounce</option>
      <option value="clip">Clip</option>
      <option value="drop">Drop</option>
      <option value="explode">Explode</option>
      <option value="fade">Fade</option>
      <option value="fold">Fold</option>
      <option value="highlight">Highlight</option>
      <option value="puff">Puff</option>
      <option value="pulsate">Pulsate</option>
      <option value="scale">Scale</option>
      <option value="shake">Shake</option>
      <option value="size">Size</option>
      <option value="slide">Slide</option>
      <option value="transfer">Transfer</option>
    </select>
  </div>
</body>
</html>

四、執行

圖1

五、測試

Date: 

說明：加入動畫效果-設計連動datepicker。

jquery animation items.(設計連動datepicker)

相關參考：

其它參考：

jQuery教學目錄

其它文章


arrow
arrow
    文章標籤
    datepicker option 目錄 jquery value 教學 bounce ui script pulsate fold explode 效果 content 動畫 animation cache scale transfer drop
    全站熱搜

    PG Levin Li 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄