本文說明datepicker Options 中的showAnim showOptions duration

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

一、基本JS/HTML語法

JS:

 $(function() {

$("#datepicker").datepicker({

  showAnim : "bounce",

  showOptions : {

direction : "up",

opacity : 0.1

  },

  duration:"1000"

});

  });

二、基本說明

showAnim：

動畫效果 jquery animation for popup，default 為show

fadeIn 、fold、slideDown ，如果設為空值則不使用動畫效果。

共有以下的效果：

  • blind
  • bounce
  • clip
  • drop
  • explode
  • fade
  • fold
  • highlight
  • puff
  • pulsate
  • scale
  • shake
  • size
  • slide
  • transfer

showOptions：

加強動畫效果，可加入動畫效果的參數來附加效果

參考 jquery ui animate() in options

duration：

設定日期框展開動畫的時間,default ： mormal

可設定:slow、normal、fast、''空值代表立刻、數字代表毫秒

三、程式內容 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery.datepicker 6</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 : "bounce",
   //加強動畫效果，可加入動畫效果的參數來附加效果 
      //參考 jquery ui animate() in options
      showOptions : {//目前我找不到可用的效果
        direction : "up",
        opacity : 0.1
      },
      //設定日期框展開動畫的時間,default ： mormal
      //可設定:slow、normal、fast、''空值代表立刻、數字代表毫秒
      duration:"1000"
    });
  });
</script>
</head>
<body>
  <div class="datetest">
    <p class="datag">
      Date: <input type="text" id="datepicker">
    </p>
  </div>
  <div>說明：加入動畫效果</div>
  <div>
    jquery animation items.
 <ul>
      <li>blind</li>
      <li>bounce</li>
      <li>clip</li>
      <li>drop</li>
      <li>explode</li>
      <li>fade</li>
      <li>fold</li>
      <li>highlight</li>
      <li>puff</li>
      <li>pulsate</li>
      <li>scale</li>
      <li>shake</li>
      <li>size</li>
      <li>slide</li>
      <li>transfer</li>
    </ul>
  </div>
</body>
</html>

四、執行

圖1

五、測試

Date: 

說明：加入動畫效果為bounce

相關參考：

其它參考：

jQuery教學目錄

其它文章


​
arrow
arrow
    文章標籤
    lt datepicker 目錄 jquery 教學 showoptions 動畫 效果 ui 空值 bounce script equiv meta mormal content pulsate animation js 月曆
    全站熱搜

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

    E-mail轉寄