本文說明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 datepicker 預設基本樣式
- jQuery datepicker 月曆樣式種類
- jQuery datepicker 加入button效果 showOn buttonText
- jQuery datepicker 加入月曆icon小圖buttonImage buttonImageOnly
其它參考：
jQuery教學目錄
其它文章
沒有留言:
張貼留言