[1012]PHP進階開發及TadTools工具應用
一、 My97 DatePicker (
http://www.my97.net)
- 這是一個左岸的作品，是目前最完善的月曆功能，想要的功能應有盡有。用法：
<script type='text/javascript' src='".TADTOOLS_URL."/My97DatePicker/WdatePicker.js'></script>
- 在日期的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
- 在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 套件，以避免重新整理畫面時老是回到第一個頁籤。
$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" 滑鼠移過去就自動切換
- 需要呈現頁籤的地方：
<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>
- 上例的頁籤2其內容是由ajax.php的此檔案所產生。
- 若想將頁籤改至下方，重設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');