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. 這是一個左岸的作品，是目前最完善的月曆功能，想要的功能應有盡有。用法： ```
    
    <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\]
    - <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 套件，以避免重新整理畫面時老是回到第一個頁籤。 ```
    
    $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需加上「<span style="background-color: rgb(255, 255, 153);"> class='tabs-bottom'</span>」： ```
    
    $('.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');
    ```

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Ftad0616.cp22.secserverpros.com%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D770

快速登入

書籍目錄

展開 | 闔起

線上使用者

141人線上 (71人在瀏覽線上書籍)

會員: 0

訪客: 141

更多…

MarkDown

搜尋

QR Code 區塊

快速登入

書籍目錄

線上使用者