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属性。