小狐狸事務所: 11月 2014

2014年11月29日星期六

西元 2000 年 8 月 2 日, 高雄第二監獄三聲槍響, 縱橫高屏溪以南十幾年的鄭太吉, 這一刻, 終於了解他的兒時好友鍾源峰, 當年吃他那排子彈的滋味了.

這個人在屏東囂張的時候, 正好是我第二次上台北工作的年代. 聽老家在屏東的同事說, 你收了鄭太吉的錢, 如果沒開出預期票數, 那里鄰長的皮就要張緊一點了 ... 警察不聽話的話, 連警察局長都被叫到議長室, 立正夾好聽他狂飆 ...

當一個不怕死的立委於立法院指名道姓揭開兇手就是屏東縣議長時, 檢察官帶了 30 幾名警察去搜鄭太吉家, 但是到了門口, 檢察官往後一瞧, 天哪, 警察全都跑光光 ... 這畫面, 能看嗎?

仔細讀這篇 :

# 維基 : 鄭太吉

裡面那些養大鄭太吉的人, 都當了廟堂上的大官, 有沒有天理呢? 不要說都十幾年前的事了, 事實上, 流氓議員跟黑道議長絕跡了嗎? 這種無法無天, 我們選民不關心政治有以致之, 這種 "管他誰選上都一樣" 的心態, 就是大家要共同承擔的共業.

就這樣, 政治就都讓那些世襲的買辦跟惡棍包辦了.

# 2000年槍決屏東地下皇帝鄭太吉特輯

2014年11月28日星期五

選前回顧宇昌案

今天重新看了小英的 2012 敗選感言, 看看歷史, 想想現在 ....

"希望他在往後的四年, 要傾聽人民的聲音, 要用心執政, 要公平的照顧每一個人民, 千萬不要辜負人民的期待 ..."

# 2012蔡英文落選感言(台灣有史以來最有風度的落選感言)

# 成就臺灣民主！小英立典範 KMT呢？藍敗選2000 2004皆爆衝突真民主？

# 蔣友柏在部落格痛批國民黨榮譽主席連戰二○○四年選輸還耍賴,把台灣民主玩low掉

# 蔡英文大戰泛藍立委經典畫面(東森新聞)

# 台灣啟示錄--是誰改變了蔡英文

# 2013.5.22 蔡英文雲科演講-向世界出發

# 維基 : 宇昌案

# 維基 : 伍澤元

陸委會的也答, 國防的也答, 甚麼都答 ... 那院長你來當啊! 哈哈哈.

宇昌案, 最後查無不法簽結了.

兩年前抓著宇昌案聲嘶力竭窮追猛打的那些人呢? 怎麼都不說話了?

現實雖然通常都是不完美的, 但不要憤世嫉俗, 這世界要靠理想才能進步.

想想伍澤元與蘇貞昌, 上帝, 您還是公平的. 阿門.

2014年11月26日星期三

jQuery EasyUI 測試 : Tabs 頁籤面板

每一種 Javascript 框架或桌面程式語言都會提供頁籤面板這種常用的容器, 之前玩 ExtJS 時與 Java Swing 時曾詳細地做過測試, 詳見 :

# ExtJS 4 測試 : 頁籤面板 TabPanel
# Java Swing 測試 : 頁籤面板 JTabbedPane

jQuery UI 的頁籤我沒測試過, 但之前使用 jQuery UI 寫了一個簡易架站軟體, 使用的容器就是 Tabs. EasyUI 的頁籤面板跟摺疊選單一樣都是利用兩層 div 元素建構的 (其實兩個很像), 跟 jQuery UI 基本上相同, 不同的是, jQuery UI 的頁籤標題需另外使用 ul-li 來做, 而 EasyUI 則直接在內層 div 元素的 title 屬性裡. 其 API 參見 :

# jQuery EasyUI Tabs

EasyUI 的頁籤使用兩層 div, 外層設定頁籤整體屬性如尺寸, 內層則是設定各頁屬性與內容, 如下面範例 1 所示 :

範例 1 : http://tony1966.xyz/test/easyuitest/easyui-tabs-1.htm [看原始碼]

<div class="easyui-tabs">
<div title="標題 1">內容 1</div>
<div title="標題 2">內容 2</div>
<div title="標題 3">內容 3</div>
</div>

這與摺疊選單唯一的差別只是套用的樣式類別, 事實上我是將 accordion 的範例 1 複製過來改一下 class 而已, 參考 :

# jQuery EasyUI 測試 : Accordion 摺疊選單

由上例可知, 頁籤預設會佔據整個瀏覽器寬度, 可以用外層 div 的 style 屬性之 width, height 來限制; 其次, 頁籤內容與邊框間隙預設為 0px, 這必須用內層 div 的 style 之 padding 來設定, 如範例 2 所示 :

範例 2 : http://tony1966.xyz/test/easyuitest/easyui-tabs-2.htm [看原始碼]

<div class="easyui-tabs" style="width:300px;height:200px;">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>

可見開啟的頁籤, 其標題會自動改為粗體, 而且預設標籤列背後有延伸邊框圍起來的背景. 這標籤列背景是可以取消的, 只要在外層 div 的 data-options 屬性中將 plain 設為 true 即可, 如範例 3 所示 :

範例 3 : http://tony1966.xyz/test/easyuitest/easyui-tabs-3.htm [看原始碼]

<div class="easyui-tabs" style="width:300px;height:200px;" data-options="plain:true">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>

ExtJS 的頁籤列可以在上下左右位置, EasyUI 也是可以的, 只要設定 tabPosition 屬性即可, 其值有四 : top (預設), bottom, left, right, 如下範例 4 :

範例 4 : http://tony1966.xyz/test/easyuitest/easyui-tabs-4.htm [看原始碼]

<div class="easyui-tabs" style="width:300px;height:200px;" data-options="tabPosition:'bottom'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>

範例 5 是頁籤在左方的情形 :

範例 5 : http://tony1966.xyz/test/easyuitest/easyui-tabs-5.htm [看原始碼]

<div class="easyui-tabs" style="width:300px;height:200px;" data-options="tabPosition:'left'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>

看來頁籤標題似乎太寬了, 這是因為 headerWidth 屬性預設為 150px 之故. 下面範例 6 將其限縮為 80px :

範例 6 : http://tony1966.xyz/test/easyuitest/easyui-tabs-6.htm [看原始碼]

<div class="easyui-tabs" style="width:300px;height:200px;" data-options="tabPosition:'left',headerWidth:80">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>

注意, headerWidth 只有在 tabPosition 為 left 或 right 時才會有作用. 標籤的尺寸除了控制左右方向時標籤寬度的 headerWidth 外, 還有 tabWidth 與 tabHeight, 如範例 7 所示 :

範例 7 : http://tony1966.xyz/test/easyuitest/easyui-tabs-7.htm [看原始碼]

<div class="easyui-tabs" style="width:300px;height:200px;" data-options="tabWidth:100,tabHeight:50">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>

這 tabHeight 預設是 27px, 而 tabWidth 為依據標題寬度自動調整. 可知當標籤總寬度超出面板寬度時左右會出現前進後退按鈕 (tab scroll). 這個 tab scroll 鈕按下時會跑多少 px 可以利用 scrollIncrement 屬性來指定, 預設是 100px; 而標籤移動速度也可以用 scrollDuration 來設定, 預設 400ms, 這兩個都不是很重要, 所以就不予測試啦.

如果將標籤位置改成右方, 則如範例 8 所示 :

範例 8 : http://tony1966.xyz/test/easyuitest/easyui-tabs-8.htm [看原始碼]

<div class="easyui-tabs" style="width:300px;height:200px;" data-options="tabWidth:100,tabHeight:50,tabPosition:'right'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>

因為全部標籤總高未超過面板高度,因此這個就沒有 tab scroll 出現.

標籤面板預設是開啟第一個標籤, 但可以用 selected 屬性指定預設開啟的標籤索引 (0 起始), 如範例 9 所示 :

範例 9 : http://tony1966.xyz/test/easyuitest/easyui-tabs-9.htm [看原始碼]

<div class="easyui-tabs" style="width:300px;height:200px;" data-options="selected:2">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>

可見網頁一載入就預設開啟第三個標籤 (索引 2).

每一個標籤可以附上關閉鈕, 只要在內層 div 的 data-options 屬性設定 closable 為 true 即可, 如範例 10 所示 :

範例 10 : http://tony1966.xyz/test/easyuitest/easyui-tabs-10.htm [看原始碼]

<div class="easyui-tabs" style="width:300px;height:200px;" >
<div title="標題 1" style="padding:10px;" data-options="closable:true">內容 1</div>
<div title="標題 2" style="padding:10px;" data-options="closable:true">內容 2</div>
<div title="標題 3" style="padding:10px;" data-options="closable:true">內容 3</div>
</div>

點擊標籤右端的叉叉就可以關閉標籤.

此外也可以在標籤列的左方或右方 (預設) 加上按鈕, 這要在外層 div 元素的 data-options 屬性中設定 tools, 如範例 11 所示 :

範例 11 : http://tony1966.xyz/test/easyuitest/easyui-tabs-11.htm [看原始碼]

<div class="easyui-tabs" style="width:300px;height:200px;" data-options="tools:'#tool-1'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<div id="tool-1">
<a href="#" id="add" class="easyui-linkbutton" iconCls="icon-add">新增</a>
<a href="#" id="remove" class="easyui-linkbutton" iconCls="icon-remove">刪除</a>
</div>
<script language="javascript">
$(document).ready(function(){
$("#add").bind("click",function(){
$.messager.alert("Info","新增");
});
$("#remove").bind("click",function(){
$.messager.alert("Info","移除");
});
});
</script>

這兩個按鈕要用 div 包起來, 賦予一個 id, 以便 tools 中予以指定. 為了給這兩個按鈕綁定事件, 所以都要給予 id. 為了簡化起見, 目前暫時顯示訊息框即可.

為了節省標籤列空間或是為了簡潔, 也可以只顯示按鈕的 icon, 只要刪除連結按鈕中的超連結文字內容, 並加上 plain="true" 屬性即可, 如範例 12 所示 :

範例 12 : http://tony1966.xyz/test/easyuitest/easyui-tabs-12.htm [看原始碼]

<div class="easyui-tabs" style="width:300px;height:200px;" data-options="tools:'#tool-1'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<div id="tool-1">
<a href="#" id="add" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
<a href="#" id="remove" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
</div>
<script language="javascript">
$(document).ready(function(){
$("#add").bind("click",function(){
$.messager.alert("Info","新增");
});
$("#remove").bind("click",function(){
$.messager.alert("Info","移除");
});
});
</script>

工具按鈕預設是在標籤列右端, 若要改為左端, 要將 toolPosition 屬性設為 "left" (預設是 "right"), 如範例 12-1 所示 :

範例 12-1 : http://tony1966.xyz/test/easyuitest/easyui-tabs-12-1.htm [看原始碼]

<div class="easyui-tabs" style="width:300px;height:200px;" data-options="tools:'#tool-1',toolPosition:'left'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<div id="tool-1">
<a href="#" id="add" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
<a href="#" id="remove" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
</div>
<script language="javascript">
$(document).ready(function(){
$("#add").bind("click",function(){
$.messager.alert("Info","新增");
});
$("#remove").bind("click",function(){
$.messager.alert("Info","移除");
});
});
</script>

以上範例都是用 HTML5 設定, 都可以用 Javascript 來做, 在下列範例 13 中, 也同時測試 getSelected, getTabIndex, 以及 add 與 close 這四個方法 :

範例 13 : http://tony1966.xyz/test/easyuitest/easyui-tabs-13.htm [看原始碼]

<div id="tab1">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<script language="javascript">
$(document).ready(function(){
$("#tab1").tabs({
width:300,
height:200,
tools:[{
iconCls:'icon-add',
handler:function(){
$("#tab1").tabs("add",{title:"新頁籤",content:"Hello!"});
}
},{
iconCls:'icon-remove',
handler:function(){
var tab=$("#tab1").tabs("getSelected"); //傳回選單之 Panel 物件
if (tab){
var index=$("#tab1").tabs("getTabIndex",tab);
$("#tab1").tabs("close",index);
}
}
}]
});
});
</script>

此例中, 外層 div 只要給個 id 即可, 其餘交給 Javascript 處理. 按下新增鈕時會呼叫 add 方法, 在既有頁籤最後面添加一個新的頁籤, 並且預設開啟新頁籤, 如果不要開啟新頁籤, 那麼必須加上 selected:false 設定. 當按下刪除鈕時, 先呼叫 getSelected 方法取得目前開啟中的頁籤物件 (一個 Panel), 然後呼叫 getTabIndex 方法取得此頁籤之索引, 最後呼叫 close 方法即可刪除該頁籤.

參考資料 :

# jQuery EasyUI实现关闭全部tabs

從上面範例 13 可知, 新增頁籤後會開啟剛增加的頁籤, 但刪除一個頁籤後, 卻總是開啟第一個頁籤. 如何讓刪除頁籤後開啟最後的頁籤呢? 可以利用 tabs 與 select 方法來做, tabs 會傳回全部的頁籤物件集合, 因此其 length 屬性便是所有頁籤個數, 而 length-1 便是最後一個頁籤的索引. select 方法則會開啟指定之頁籤, 我們將範例 13 加兩行指令改成範例 14 如下 :

範例 14 : http://tony1966.xyz/test/easyuitest/easyui-tabs-14.htm [看原始碼]

<div id="tab1">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<script language="javascript">
$(document).ready(function(){
$("#tab1").tabs({
width:300,
height:200,
tools:[{
iconCls:'icon-add',
handler:function(){
$("#tab1").tabs("add",{title:"新頁籤",content:"Hello!"});
}
},{
iconCls:'icon-remove',
handler:function(){
var tab=$("#tab1").tabs("getSelected");
if (tab){
var index=$("#tab1").tabs("getTabIndex",tab);
$("#tab1").tabs("close",index);
var tabs=$("#tab1").tabs("tabs");
$("#tab1").tabs("select",tabs.length-1);
}
}
}]
});
});
</script>

這樣便不會每次刪除完就回第一個頁籤了, 而且頁籤列會左右來回跑, 很有韻律感.

以上範例的頁籤內容均來自網頁本身, 實務上更常是來自後端程式所提供, 如同摺疊選單一樣, 可以用 href 屬性指定後端檔案或程式, 以 Ajax 方式自後端擷取資料, 我們修改範例 14 為下面的範例 15, 在新增頁籤時指定資料來源為後端 PHP 程式 :

範例 15 : http://tony1966.xyz/test/easyuitest/easyui-tabs-15.htm [看原始碼]

<div id="tab1">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<script language="javascript">
$(document).ready(function(){
$("#tab1").tabs({
width:300,
height:200,
tools:[{
iconCls:'icon-add',
handler:function(){
$("#tab1").tabs("add",{
title:"新頁籤",
collapsible:true,
closable:true,
href:"hellosomebody-get.php?name=Tony&surname=Huang",
loadingMessage:"載入中..."
});
}
},{
iconCls:'icon-remove',
handler:function(){
var tab=$("#tab1").tabs("getSelected");
if (tab){
var index=$("#tab1").tabs("getTabIndex",tab);
$("#tab1").tabs("close",index);
var tabs=$("#tab1").tabs("tabs");
$("#tab1").tabs("select",tabs.length-1);
}
}
}]
});
});
</script>

新頁籤 collapsed

這裡我們使用了測試 Panel 時的 PHP 程式 hellosomebody-get.php 來提供資料 :

<?php
header('Content-Type: text/html;charset=UTF-8');
$name=$_GET["name"];
$surname=$_GET["surname"];
echo "Hello! ".$name." ".$surname."<br>".
"The time is ".date("Y-m-d H:i:s");
?>

參考 :

# jQuery EasyUI 測試 : Panel 面板

此例中除了測試 href 屬性外, 還添加了 closable 與 collapsible 屬性, closable 前面已經測過, 會在頁籤上顯示一個叉叉圖示, 可用來移除頁籤, 但與 tools 工具列的刪除鈕不同的是, 因為沒有經過 handler 處理, 所以刪除後不會打開最後一個頁籤, 而是預設打開第一個頁籤; 而 collapsible 在摺疊選單是用來縮合或展開選單用的, 在頁籤面板中則是用來隱藏或開啟頁籤. 所以如果點擊新增頁籤, 它會在開啟與關閉之間切換 (toggle), 而最初那三個頁籤卻無此功能 (因為 collapsible 預設為 false). 其次, 既然頁籤面板也是用 Panel 做的, 那麼 Panel 的屬性當然可以使用, 此例我們用 loadingMessage 屬性改預設的 "Loading..." 為 "載入中...".

當然也可以改為 POST 方法傳遞參數, 如範例 15-1 所示 :

範例 15-1 : http://tony1966.xyz/test/easyuitest/easyui-tabs-15-1.htm [看原始碼]

<div id="tab1">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<script language="javascript">
$(document).ready(function(){
$("#tab1").tabs({
width:300,
height:200,
tools:[{
iconCls:'icon-add',
handler:function(){
$("#tab1").tabs("add",{
title:"新頁籤",
collapsible:true,
closable:true,
href:"hellosomebody-post.php",
method:"post",
queryParams:{name:"Tony",surname:"Huang"},
loadingMessage:"載入中..."
});
}
},{
iconCls:'icon-remove',
handler:function(){
var tab=$("#tab1").tabs("getSelected");
if (tab){
var index=$("#tab1").tabs("getTabIndex",tab);
$("#tab1").tabs("close",index);
var tabs=$("#tab1").tabs("tabs");
$("#tab1").tabs("select",tabs.length-1);
}
}
}]
});
});
</script>

此例使用 POST 方法必須設定 method 屬性為 post, 參數則用 queryParams 屬性設定.

如果覺得上面的範例太複雜, 我們回過頭來簡化一些, 下面範例 16 要展示如何純粹用 Javascript 來建立頁籤面板 :

範例 16 : http://tony1966.xyz/test/easyuitest/easyui-tabs-16.htm [看原始碼]

<div id="tab1"></div>
<script language="javascript">
$(document).ready(function(){
$("#tab1").tabs({width:300,height:200}); //初始化
$("#tab1").tabs("add",{title:"標題 1",content:"內容 1"});
$("#tab1").tabs("add",{title:"標題 2",content:"內容 2"});
$("#tab1").tabs("add",{title:"標題 3",content:"內容 3"});
var tabs=$("#tab1").tabs("tabs");
for (var i=0; i<tabs.length; i++){
tabs[i].css("padding","10px");
}
});
</script>

此例中, 頁籤面板容器就只是一個僅含 id 屬性的 div 元素, 整個效果完全由 Javascript 建立. 首先傳入尺寸物件將面板初始化, 這是必要的, 不可以直接呼叫 add 方法新增頁籤, 初始化時也可以不傳入任何東西, 這樣就會採用預設值 (寬度最寬, 高度 auto).

初始化後才可以依序 add 新增頁籤, 但預設 padding 是 0px, 因此我們要為每一個頁籤的 Panel 物件添加 CSS 樣式. 透過呼叫 tabs 方法可取得所有頁籤之 Panel 物件陣列, 再逐一拜訪每個 Panel, 利用 css 方法來設定其 padding 樣式.

接下來要測試 update 方法, 可以隨時更新頁籤的屬性值, 例如標題 title, 內容 content, 遠端資料來源 href 等, 如下範例 17 :

範例 17 : http://tony1966.xyz/test/easyuitest/easyui-tabs-17.htm [看原始碼]

<div id="tab1" class="easyui-tabs" style="width:300px;height:200px;" data-options="tools:'#tool-1'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<div id="tool-1">
<a href="#" id="update" class="easyui-linkbutton" plain="true">更新</a>
</div>
<script language="javascript">
$(document).ready(function(){
$("#update").bind("click",function(){
var tab=$("#tab1").tabs("getSelected");
$("#tab1").tabs("update",{
tab:tab,
options:{
title:"新標籤",
href:"hellosomebody-get.php?name=Tony&surname=Huang"
}
});
});
});
</script>

這裡我們在標籤列右端放一個更新按鈕, 按下此鈕會呼叫 update 方法更新所選頁籤之內容為遠端 hellosombody-get.php 所提供之內容. 要更新的對象放在物件實體中, tab 屬性值為要更新的頁籤 Panel, 而更新內容全部放在 options 屬性中.

當然也可以用 POST 方法傳送參數, 如範例 17-1 :

範例 17-1 : http://tony1966.xyz/test/easyuitest/easyui-tabs-17-1.htm [看原始碼]

$(document).ready(function(){
$("#update").bind("click",function(){
var tab=$("#tab1").tabs("getSelected");
$("#tab1").tabs("update",{
tab:tab,
options:{
title:"新標籤",
href:"hellosomebody-post.php",
method:"post",
queryParams:{name:"Tony",surname:"Huang"},
loadingMessage:"載入中 ... "
}
});
});
});

第二種寫法是用源自 Panel 物件的 refresh 方法, 如下列範例 18 :

範例 18 : http://tony1966.xyz/test/easyuitest/easyui-tabs-18.htm [看原始碼]

$("#update").bind("click",function(){
var tab=$("#tab1").tabs("getSelected");
var href="hellosomebody-get.php?name=Tony&surname=Huang";
tab.panel("refresh", href);
});

這裡只列出程式碼不同的部分, 其餘與上面範例 18 相同. 這兩種用法效果是一樣的.

接下來要測試 select 與 unselect 方法, select 就是選取或開啟指定頁籤, 而 unselect 就是取消選取指定頁籤, 該頁籤內容不會在下方內容區顯示, 兩者都要傳入代表頁籤的參數, 例如索引或標題.

範例 19 : http://tony1966.xyz/test/easyuitest/easyui-tabs-19.htm [看原始碼]

<div id="tab1" class="easyui-tabs" style="width:300px;height:200px;" data-options="tools:'#tool-1'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<div id="tool-1">
<a href="#" id="select" class="easyui-linkbutton" plain="true">Select</a>
<a href="#" id="unselect" class="easyui-linkbutton" plain="true">Unselect</a>
</div>
<script language="javascript">
$(document).ready(function(){
$("#unselect").bind("click",function(){
var tab=$("#tab1").tabs("getSelected");
var index=$("#tab1").tabs("getTabIndex",tab);
$("#tab1").tabs("unselect",index);
});
$("#select").bind("click",function(){
var tab=$("#tab1").tabs("getSelected");
$("#tab1").tabs("select",1);
});
});
</script>

此處按下 Unselect 鈕會將目前開啟中的頁籤隱藏, 而按下 Unselect 則固定開啟第二個頁籤 (索引 1).

最後來測試 enableTab 與 disableTab 這兩個方法. 所謂 Disable 是指該頁籤無法被選 (unselectable), 頁籤會變成淡色.

範例 20 : http://tony1966.xyz/test/easyuitest/easyui-tabs-20.htm [看原始碼]

<div id="tab1" class="easyui-tabs" style="width:300px;height:200px;" data-options="tools:'#tool-1'">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<div id="tool-1">
<a href="#" id="enable" class="easyui-linkbutton" plain="true">Enable All</a>
<a href="#" id="disable" class="easyui-linkbutton" plain="true">Disable</a>
</div>
<script language="javascript">
$(document).ready(function(){
$("#disable").bind("click",function(){
var tab=$("#tab1").tabs("getSelected");
var index=$("#tab1").tabs("getTabIndex",tab);
$("#tab1").tabs("disableTab",index);
});
$("#enable").bind("click",function(){
var tabs=$("#tab1").tabs("tabs"); //取得全部頁籤 Panel
for (var i=0; i<tabs.length; i++){
var index=$("#tab1").tabs("getTabIndex",tabs[i]);
$("#tab1").tabs("enableTab",index);
}
});
});
</script>

此例中, 按 Disable 鍵會把目前打開的頁籤變成不可選, 而 Enable All 鍵則將全部頁籤變成可選, 這裡是利用呼叫 tabs 方法取得全部頁籤之 Panel 物件, 在逐一拜訪每一個頁籤時, 呼叫 disable 方法使其不可選.

OK, 頁籤面板測試完畢.

2014年11月25日星期二

jQuery EasyUI 測試 : Accordion 摺疊選單

Accordion 是手風琴的意思, 亦即此 UI 可以像手風琴那樣展開與縮合, 它的每一個選單都是一個 Panel, 所以 Panel 的屬性與方法皆可用來操控每一個選單. 其 API 文件參考 :

# EasyUI Accordion

EasyUI 的折疊選單是用兩層 div 元素做的, 而 jQueryUI 則是用 ul-li 來做. EasyUI 只要在第一層的 div 指定樣式類別為 easyui-aaacordion, 第二層的 div 加上 title 屬性即可, 如下列範例 1 所示 :

測試範例 1 : http://tony1966.xyz/test/easyuitest/easyui-accordion-1.htm [看原始碼]

<div class="easyui-accordion">
<div title="標題 1">內容 1</div>
<div title="標題 2">內容 2</div>
<div title="標題 3">內容 3</div>
</div>

點擊選單標題的任何地方, 都可以打開該選單, 不必去點標題右端的縮合/展開 icon. 這跟 Panel 不同, Panel 的 collapsible 設為 true 時, 右方也會出現一個縮合/展開鈕, 但一定要點該 icon 才會動作.

其次, 摺疊選單預設會佔據整個瀏覽器寬度, 如果要限制其大小, 可指定 style 樣式的 width 與 height, 如範例 2 所示 :

測試範例 2 : http://tony1966.xyz/test/easyuitest/easyui-accordion-2.htm [看原始碼]

<div class="easyui-accordion" style="width:300px;height:200px;">
<div title="標題 1">內容 1</div>
<div title="標題 2">內容 2</div>
<div title="標題 3">內容 3</div>
</div>

可見雖然內容很少, 但高度仍會拉到所指定之數值. 不過還有一個問題, 每一個摺疊的內容緊貼外框, 若要設定餘裕或間隙, 要在第二層的 div 元素中設定 padding 樣式, 如範例 3 所示 :

測試範例 3 : http://tony1966.xyz/test/easyuitest/easyui-accordion-3.htm [看原始碼]

我們也可以在標題前面添加 icon, 只要在每個選單的 div 元素
中的 data-options 屬性中設定 iconCls 即可, 如範例 3-1 所示 :

測試範例 3-1 : http://tony1966.xyz/test/easyuitest/easyui-accordion-3-1.htm [看原始碼]

<div class="easyui-accordion" style="width:300px;height:200px;">
<div title="標題 1" style="padding:10px;" data-options="iconCls:'icon-save'">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>

從以上範例可知, 摺疊選單預設會打開第一個選單的內容, 如果要指定預設開啟之選單, 可在 data-options 中用 selected 屬性, 其值為 0 起始的選項 id, 如範例 4 所示 :

測試範例 4 : http://tony1966.xyz/test/easyuitest/easyui-accordion-4.htm [看原始碼]

<div class="easyui-accordion" style="width:300px;height:200px;" data-options="selected:1">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>

可見 selected 設為 1 預設開啟第二個選單. 預設開啟選單也可以在個別選項中同樣以 selected 屬性設定, 但不同的是, 其值為 true/false, 如範例 5 所示 :

測試範例 5 : http://tony1966.xyz/test/easyuitest/easyui-accordion-5.htm [看原始碼]

<div class="easyui-accordion" style="width:300px;height:200px;">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;" data-options="selected:true">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>

結果與範例 4 一樣, 預設第二個選項被打開. 那我們可否一次打開多個選單呢? 這可以用 multiple:true 來設定, 如範例 6 所示 :

測試範例 6 : http://tony1966.xyz/test/easyuitest/easyui-accordion-6.htm [看原始碼]

<div class="easyui-accordion" style="width:300px;" data-options="multiple:true">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>

可見 multiple 設為 true 後, 可一次開啟多個選項, 已打開的選單需人工縮合, 不會自動縮合. 注意, 此處為了能顯示全部被展開的選單, 不設定 height 樣式.

以上都是用 HTML5 來設定, 也可以用 Javascript 來設定, 例如可將上面範例 6 改為如下範例 7 :

測試範例 7 : http://tony1966.xyz/test/easyuitest/easyui-accordion-7.htm [看原始碼]

<div id="acc1">
<div title="標題 1">內容 1</div>
<div title="標題 2">內容 2</div>
<div title="標題 3">內容 3</div>
</div>
<script language="javascript">
$(document).ready(function(){
$("#acc1").accordion({
width:300,
multiple:true
});
var panels=$("#acc1").accordion("panels");
for (var i=0; i<panels.length; i++) {
panels[i].css("padding","10px");
}
});
</script>

範例 7 中, HTML 部分只要設定第一層 div 元素之 id 即可, 其他均透過 jQuery 來設定. 摺疊選單屬性用物件形式傳入 accordion() 方法中, 而各選單的 padding 樣式則透過呼叫 panels 方法取得所有選單包裹物件, 再逐一拜訪這些選單, 利用 css() 方法來設定每一個選單的樣式.

接下來要測試 accordion 的事件與方法, 較常用的是 onSelect 事件, 即點擊選單標題之動作, 會觸發此事件. 同時也測試 getSelected 與 getPanelIndex 方法, 前者會傳回被選擇之 Panel 物件, 後者則傳回指定 Panel 物件之索引, 如下列範例 8 所示 :

測試範例 8 : http://tony1966.xyz/test/easyuitest/easyui-accordion-8.htm [看原始碼]

<div id="acc1">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<script language="javascript">
$(document).ready(function(){
$("#acc1").accordion({
width:300,
height:200,
onSelect:function(){
var p=$("#acc1").accordion("getSelected"); //被選擇之選單 Panel
if (p){
var id=$("#acc1").accordion("getPanelIndex",p);
$.messager.alert("Info",id);
}
}
});
});
</script>

此例我們先呼叫 getSelected 方法取得被選擇選單之 Panel 物件, 再呼叫 getPanelIndex 方法, 並傳入此 Panel 物件, 即可取得該 Panel 的索引.

以上所有範例都是由網頁本身提供各選單內容, 可否用 Ajax 由遠端網頁或程式提供內容呢? 可以的, 這必須用到由 Panel 繼承而來的 refresh 方法才行, 既然 Accordion 的每一個選單都是用 Panel 做的, 只要用 getSelected 方法取得所選的選單 Panel 物件, 就可以呼叫其 refresh 方法了, 如下列範例 9 所示 :

測試範例 9 : http://tony1966.xyz/test/easyuitest/easyui-accordion-9.htm [看原始碼]

<div id="acc1">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<script language="javascript">
$(document).ready(function(){
$("#acc1").accordion({
width:300,
height:200,
onSelect:function(){
var p=$("#acc1").accordion("getSelected");
var href="hellosomebody-get.php?name=Tony&surname=Huang";
if (p){
p.panel("refresh",href);
}
}
});
});
</script>

可見網頁一載入時便會執行 onSelect 事件, 把預設的選單內容更新為後端程式所提供的資訊, 因為網頁載入時同時預設會選擇第一個選單, 會觸發 onSelect 事件. 此例中, 我們用到了上回測試 Panel 元件時所寫的後端 PHP 程式 hellosomebody-get.php 來提供選單內容, 利用 GET 方法傳入兩個參數 name 與 surname, 程式如下 :

<?php
header('Content-Type: text/html;charset=UTF-8');
$name=$_GET["name"];
$surname=$_GET["surname"];
echo "Hello! ".$name." ".$surname."<br>".
"The time is ".date("Y-m-d H:i:s");
?>

參考舊文 :

# jQuery EasyUI 測試 : Panel

注意, 範例 9 中等候內容載入的訊息是 Panel 元件預設的 "Loading ...", 要怎麼去修改為 "載入中..." 呢? 這要用到 options 方法, 作為 getter 方法時它會傳回 accordion 的全部屬性與方法, 但作為 setter 方法時則可以更改屬性內容, 如下列範例 10 所示 :

測試範例 10 : http://tony1966.xyz/test/easyuitest/easyui-accordion-10.htm [看原始碼]

<div id="acc1">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<script language="javascript">
$(document).ready(function(){
$("#acc1").accordion({
width:300,
height:200,
onSelect:function(){
var p=$("#acc1").accordion("getSelected");
var href="hellosomebody-get.php?name=Tony&surname=Huang";
if (p){
p.panel("options").loadingMessage="載入中...";
p.panel("refresh",href);
}
}
});
});
</script>

瞧, 這樣便將預設的載入訊息給改掉了. 參考 :

# http://www.jeasyui.com/forum/index.php?topic=4125.0

也可以將屬性物件傳入 Panel 物件, 但那樣會用單純的 Panel 蓋掉 Accordion 改造過的 Panel, 變成一定要點縮合/展開鈕才能變換選單, 而且打開中的選單標題不會變色, 如下範例 10-1 所示 :

測試範例 10-1 : http://tony1966.xyz/test/easyuitest/easyui-accordion-10-1.htm [看原始碼]

$(document).ready(function(){
$("#acc1").accordion({
width:300,
height:200,
onSelect:function(){
var p=$("#acc1").accordion("getSelected");
var href="hellosomebody-get.php?name=Tony&surname=Huang";
if (p){
p.panel({loadingMessage:"載入中..."});
p.panel("refresh",href);
}
}
});
});

雖然 accordion 功能不變, 但點標題卻不能縮合/展開較不方便, 因此不建議用這種方式.

接著要測試 add 與 remove 這兩個方法, 用來新增與移除選單. 新增的選單會放在所有既存選單的最後面, 預設會開啟新增的那個選單, 如果不要開啟它, 新增時要將 selected 屬性設為 false. 刪除時則會刪除目前打開的選單, 如下列範例 11 所示 :

測試範例 11 : http://tony1966.xyz/test/easyuitest/easyui-accordion-11.htm [看原始碼]

<a href="#" id="add">新增</a>
<a href="#" id="remove">刪除</a><br><br>
<div id="acc1" class="easyui-accordion" style="width:300px;">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<script language="javascript">
$(document).ready(function(){
$("#add").linkbutton({
iconCls:"icon-add"
});
$("#add").bind("click",function(){
$("#acc1").accordion("add", {
title:"新選單",
content:"Hello World!",
});
});
$("#remove").linkbutton({
iconCls:"icon-remove"
});
$("#remove").bind("click",function(){
var p=$("#acc1").accordion("getSelected");
if (p){
var id=$("#acc1").accordion("getPanelIndex",p);
$("#acc1").accordion("remove",id)
}
});
});
</script>

此例中我們放置了兩個連結按鈕, 按新增鈕時呼叫 accordion 的 add 方法加入新選單, 按下刪除鈕時先呼叫 accordion 的 getSelected 方法取得被選擇的選單 Panel 物件, 再呼叫 getPanelIndex 取得其索引, 最後傳給 remove 方法刪除之. 注意, 因為新增選單會讓長度增長, 所以 accordion 不設 height 屬性, 讓選單自動調整高度.

關於連結按鈕請參考 :

# jQuery EasyUI 測試 : LinkButton 連結按鈕

下面範例 12 要測試 select 與 unselect 這兩個方法, 我們修改上面範例 11, 把兩個連結按鈕改為全部展開與全部縮合, 最重要的是, 將 accordion 的 multiple 屬性設為 true, 允許開啟多個選單, 當按下全部展開鈕時, 所有選單都會開啟, 按下全部縮合鈕時則全部關閉 :

測試範例 12 : http://tony1966.xyz/test/easyuitest/easyui-accordion-12.htm [看原始碼]

<a href="#" class="easyui-linkbutton" id="select_all">全部展開</a>
<a href="#" class="easyui-linkbutton" id="unselect_all">全部縮合</a><br><br>
<div id="acc1">
<div title="標題 1" style="padding:10px;">內容 1</div>
<div title="標題 2" style="padding:10px;">內容 2</div>
<div title="標題 3" style="padding:10px;">內容 3</div>
</div>
<script language="javascript">
$(document).ready(function(){
$("#acc1").accordion({
width:300,
multiple:true
});
$("#select_all").bind("click",function(){
var p=$("#acc1").accordion("panels");
for (var i=0; i<p.length; i++) {
var id=$("#acc1").accordion("getPanelIndex",p[i]);
$("#acc1").accordion("select",id)
}
});
$("#unselect_all").bind("click",function(){
var p=$("#acc1").accordion("panels");
for (var i=0; i<p.length; i++) {
var id=$("#acc1").accordion("getPanelIndex",p[i]);
$("#acc1").accordion("unselect",id)
}
});
});
</script>

此例中先呼叫 accordion 的 panel 方法, 它會傳回全部選單的 Panel 物件陣列, 然後逐一拜訪這些 Panel 物件, 呼叫 getPanelIndex 方法取得其所以索引, 再呼叫 select 或 unselect 方法來展開或縮合該選單.

OK, 摺疊選單測試完畢.

2014年11月29日 星期六

哈哈哈

誰養大了鄭太吉

2014年11月28日 星期五