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