Tad 教材網 - 線上書籍

:::

\[1012\]PHP進階開發及TadTools工具應用
============================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1012/08.pdf)

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

1. 這是一個左岸的作品，是目前最完善的月曆功能，想要的功能應有盡有。用法： ```
  <pre class="brush: xhtml;" title="code">
  <script type='text/javascript' src='".TADTOOLS_URL."/My97DatePicker/WdatePicker.js'></script>
  ```
2. 在日期的input欄位中加入以下語法： ```
  <pre class="brush: xhtml;" title="code">
  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\]
  - <span style="background-color: rgb(255, 255, 153);">(9) 顯示週數：<span class="STYLE2">isShowWeek:</span><span class="STYLE1">true</span></span>
  - <span style="background-color: rgb(255, 255, 153);"><span class="STYLE1">(10)日期框唯讀：readOnly: true</span></span>
  - <span style="background-color: rgb(255, 255, 153);"><span class="STYLE1">(11)取消週末高亮度：highLineWeekDay: false</span></span><span class="STYLE1">  
       </span>
  - <span style="background-color: rgb(255, 255, 153);"><span class="STYLE1">(12)顯示清空按鈕：<span class="STYLE2">isShowClear:</span><span class="STYLE1"> false</span></span></span>
  - <span style="background-color: rgb(255, 255, 153);"><span class="STYLE1"><span class="STYLE1">(13)雙月曆：<span class="STYLE2">doubleCalendar:</span><span class="STYLE1">true</span></span></span></span>
3. 在input中加上 <span style="background-color: rgb(204, 255, 204);">class='Wdate'</span> 可以加上一個小月曆圖示
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 套件，以避免重新整理畫面時老是回到第一個頁籤。 ```
  <pre class="brush: php;" title="code">
  $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. 需要呈現頁籤的地方： ```
  <pre class="brush: xhtml;" title="code">
  <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需加上「<span style="background-color: rgb(255, 255, 153);"> class='tabs-bottom'</span>」： ```
  <pre class="brush: xhtml;" title="code">
  $('.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');
  ```

:::