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