8. 頁籤與小月曆之應用

一、 My97 DatePicker (http://www.my97.net)

1. 這是一個左岸的作品，是目前最完善的月曆功能，想要的功能應有盡有。用法：

   <script type='text/javascript' src='".TADTOOLS_URL."/My97DatePicker/WdatePicker.js'></script>

2. 在日期的input欄位中加入以下語法：

   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
3. 在input中加上 class='Wdate' 可以加上一個小月曆圖示
4. 更完整參數：http://www.my97.net/dp/demo/index.htm

二、 jQuery UI 之頁籤

1. 範例頁面：http://jqueryui.com/tabs/
2. 詳細API頁面：http://api.jqueryui.com/tabs/
3. 基本頁籤：有使用jquery cookie 套件，以避免重新整理畫面時老是回到第一個頁籤。

   $jquery_path=get_jquery(true);  //TadTools引入jquery ui
   $now=time();  //用時間來替頁籤命名，以避免id重複
   $jquery_ui="$jquery_path
   <script type='text/javascript' src='".XOOPS_URL."/modules/tadtools/jqueryCookie/jquery.cookie.js'></script>
   <script type='text/javascript'>
   $(document).ready(function() {
     var $tabs = $('#jquery-tabs".$now."').tabs({ cookie: { expires: 30 } , collapsible: true});
   });
   </script>

   • (1)  collapsible: true 允許點兩下開關該頁籤
   • (2)  event: "mouseover" 滑鼠移過去就自動切換
4. 需要呈現頁籤的地方：

   <div id='jquery-tabs{$now}'>
     <ul>
       <li><a href='#tabs-1'>頁籤名稱1</a></li>
       <li><a href='ajax.php'>頁籤名稱2</a></li>
     </ul>
     <div id='tabs-1'>
       頁籤內容
     </div>
   </div>

5. 上例的頁籤2其內容是由ajax.php的此檔案所產生。
6. 若想將頁籤改至下方，重設CSS即可，頁籤的div需加上「 class='tabs-bottom'」：

   $('.tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *')
      .removeClass('ui-corner-all ui-corner-top')
      .addClass('ui-corner-bottom');
   $('.tabs-bottom .ui-tabs-nav').appendTo('.tabs-bottom');