8.
頁籤與小月曆之應用

- 這是一個左岸的作品,是目前最完善的月曆功能,想要的功能應有盡有。用法:
1 | < script type = 'text/javascript' src = '".TADTOOLS_URL."/My97DatePicker/WdatePicker.js' ></ script > |
- 在日期的input欄位中加入以下語法:
1 | onClick=\"WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})\" |
- (1) 佈景:skin:'whyGreen'
- (2) 民國年:dateFmt:'民國yyy年MM月dd日'
- (3) 含時間:dateFmt:'yyyy-MM-dd HH:mm:ss'
- (4) 起始日期:startDate:'1980-05-01' 或 %y-%M-%d %H:%m:%s
- (5) 星期一維第一天:firstDayOfWeek:1
- (6) 最小日期:minDate:'2012-10-24' 或 %y-%M-{%d+2} %H:%m:%s
- (7) 最大日期:maxDate:'2012-10-25'
- (8) 週休禁止:disabledDays:[0,6]
- (9) 顯示週數:isShowWeek:true
- (10)日期框唯讀:readOnly: true
- (11)取消週末高亮度:highLineWeekDay: false
- (12)顯示清空按鈕:isShowClear: false
- (13)雙月曆:doubleCalendar:true
- 在input中加上 class='Wdate' 可以加上一個小月曆圖示
- 更完整參數:http://www.my97.net/dp/demo/index.htm
二、 jQuery UI 之頁籤
- 範例頁面:http://jqueryui.com/tabs/
- 詳細API頁面:http://api.jqueryui.com/tabs/
- 基本頁籤:有使用jquery cookie 套件,以避免重新整理畫面時老是回到第一個頁籤。
1 | $jquery_path =get_jquery(true); |
3 | $jquery_ui =" $jquery_path |
4 | <script type= 'text/javascript' src= '".XOOPS_URL."/modules/tadtools/jqueryCookie/jquery.cookie.js' ></script> |
5 | <script type= 'text/javascript' > |
6 | $(document).ready( function () { |
7 | var $tabs = $( '#jquery-tabs".$now."' ).tabs({ cookie: { expires: 30 } , collapsible: true}); |
- (1) collapsible: true 允許點兩下開關該頁籤
- (2) event: "mouseover" 滑鼠移過去就自動切換
- 需要呈現頁籤的地方:
1 | < div id = 'jquery-tabs{$now}' > |
3 | < li >< a href = '#tabs-1' >頁籤名稱1</ a ></ li > |
4 | < li >< a href = 'ajax.php' >頁籤名稱2</ a ></ li > |
- 上例的頁籤2其內容是由ajax.php的此檔案所產生。
- 若想將頁籤改至下方,重設CSS即可,頁籤的div需加上「 class='tabs-bottom'」:
1 | $('.tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *') |
2 | .removeClass('ui-corner-all ui-corner-top') |
3 | .addClass('ui-corner-bottom'); |
4 | $('.tabs-bottom .ui-tabs-nav').appendTo('.tabs-bottom'); |