JQuery學習——標籤頁（Tabs）
標籤頁（Tabs）通常用於把內容分成多個部分，以便節省空間，就像摺疊面板（accordion）一樣。
$("#tabs").tabs({ tabPosition:'right', //標籤頁的位置在右邊 fit:true, //標籤頁容器的尺寸適應他的父容器 width:"100%", //設定標籤頁容器的寬度 height:"380", //設定標籤頁容器的高度 border:false, //不顯示標籤頁容器的邊框 onSelect:function(title,index){ //使用者選擇一個標籤頁面板（tab panel）時觸發事件 //alert(title+' is selected'); alert一下可以知道選擇的哪個標籤頁 if(title=="批示單"){ $(this).tabs("getTab", title).find("iframe").attr("src","${ctx }/manager/doc/view?type=Gwdl&docId=${vo.docId}&menuId=<%=request.getParameter("menuId") %>"); }else if(title=="資訊"){ if(${!empty file.fileId}){ //$(this).tabs("getTab", title).find("iframe").attr("src","${fileHost}/manager/file/view?save=true&id=${file.fileId}"); showOpenAllWindow("lookFileDiv", "編輯發文原文", "${fileHost}/manager/file/view?save=true&print=true&id=${file.fileId}&handleType=${vo.docTypeFW.typeNo}"); $("#tabs").tabs({selected:0}); }else{ window.top.$.messager.alert("提示資訊","無公文資訊"); } }else if(title=="附件"){ if(${!empty vo.docId}){ $(this).tabs("getTab", title).find("iframe").attr("src","${ctx }/jsp/manager/doc/gwfj/gwfjView.jsp?docId=${vo.docId}&menuId=<%=request.getParameter("menuId") %>"); }else{ window.top.$.messager.alert("提示資訊","請先儲存擬辦單！"); $("#tabs").tabs({selected:0}); } }else if(title=="備註"){ if(${!empty vo.docId}){ $(this).tabs("getTab", title).find("iframe").attr("src","${ctx }/manager/doc/bzqkView?docId=${vo.docId}&menuId=<%=request.getParameter("menuId") %>"); }else{ window.top.$.messager.alert("提示資訊","請先儲存擬辦單！"); $("#tabs").tabs({selected:0}); } } } });
<div title="批示單">
<iframe id="psd" src="" width="100%" height="100%" style="border: 0" scrolling="auto"></iframe>
</div>
$(this).tabs("getTab", title).find("iframe").attr("src","${ctx }/manager/doc/view?type=Gwdl&docId=${vo.docId}&menuId=<%=request.getParameter("menuId") %>");
$(this).tabs("getTab", title)：獲取指定的標籤頁面板。
find() 方法獲得當前元素集合中每個元素的後代。
attr() 方法設定或返回被選元素的屬性值。
| 語法 | 描述 |
|---|---|
| $(this) | 選擇當前 HTML 元素 |
方法
| 名稱 | 引數 | 描述 |
|---|---|---|
| tabs | none | 返回全部的標籤頁面板（tab panel）。 |
| getTab |
which | 獲取指定的標籤頁面板（tab panel），'which' 引數可以是標籤頁面板（tab panel）的標題（title）或索引（index）。 |
| select | which | 選擇一個標籤頁面板（tab panel），'which' 引數可以是標籤頁面板（tab panel）的標題（title）或索引（index）。 |
屬性
| 名稱 | 型別 | 描述 | 預設值 |
|---|---|---|---|
| width | number | 標籤頁（Tabs）容器的寬度。 | auto |
| height | number | 標籤頁（Tabs）容器的高度。 | auto |
| fit | boolean | 當設定為 true 時，就設定標籤頁（Tabs）容器的尺寸以適應它的父容器。 | false |
| border | boolean | 當設定為 true 時，就顯示標籤頁（Tabs）容器邊框。 | true |
| tabPosition | string | 標籤頁（tab）位置。可能的值：'top'、'bottom'、'left'、'right'。該屬性自版本 1.3.2 起可用。 | top |
事件
| 名稱 | 引數 | 描述 |
|---|---|---|
| onLoad | panel | 當一個 ajax 標籤頁面板（tab panel）完成載入遠端資料時觸發。 |
| onSelect | title,index | 當用戶選擇一個標籤頁面板（tab panel）時觸發。 |
.find() 方法
獲得當前元素集合中每個元素的後代，通過選擇器、jQuery 物件或元素來篩選。
舉例：搜尋所有段落中的後代 span 元素，並將其顏色設定為紅色：
$("p").find("span").css('color','red');
.attr() 方法
設定或返回被選元素的屬性值。
$(selector).attr(attribute) 返回被選元素的屬性值。
$(selector).attr(attribute,value) 設定被選元素的屬性和值。
$(this).attr(key); 獲取節點屬性名為key的值,相當於getAttribute(key)方法
$(this).attr(key,value); 設定節點屬性名為key的值,相當於setAttribute(key,value)方法
PS:
示例:
<input class="radio" name="orgType" id="dept">
var dept = $("#dept").attr("id"); //獲得屬性名為id的值:dept
---------------------------------------------------------------
$(this).val(); 獲取某個元素節點的value屬性的值,相當於$(this).attr("value"),value即是節點的屬性名
$(this).val(value); 設定某個元素節點的value屬性的值,相當於$(this).attr("value", value),後面value是要設定的值
示例:
<input value="1" id="dept">
var value = $("#dept").val(); //獲得元素節點value的值:1
var value = $("#dept").val("0"); //設定元素節點value的值:0
.val()已經指定是value屬性,也就相當於在.attr()基礎上進一步指定了value屬性。