function ddtabcontent(tabinterfaceid){
this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
this.enabletabpersistence=true
this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
}
ddtabcontent.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}
ddtabcontent.setCookie=function(name, value){
document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
}
ddtabcontent.prototype={
expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
this.cancelautorun() //stop auto cycling of tabs (if running)
var tabref=""
try{
if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
tabref=document.getElementById(tabid_or_position)
else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
tabref=this.tabs[tabid_or_position]
}
catch(err){alert("Invalid Tab ID or position entered!")}
if (tabref!="") //if a valid tab is found based on function parameter
this.expandtab(tabref) //expand this tab
},
setpersist:function(bool){ //PUBLIC function to toggle persistence feature
this.enabletabpersistence=bool
},
setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
this.selectedClassTarget=objstr || "link"
},
getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
},
expandtab:function(tabref){
var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""
this.expandsubcontent(subcontentid)
this.expandrevcontent(associatedrevids)
for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
}
if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
},
expandsubcontent:function(subcontentid){
for (var i=0; i<this.subcontentids.length; i++){
var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
}
},
expandrevcontent:function(associatedrevids){
var allrevids=this.revcontentids
for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface
//if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
}
},
autorun:function(){ //function to auto cycle through and select tabs based on a set interval
var currentTabIndex=this.automode_currentTabIndex //index within this.hottabspositions to begin
var hottabspositions=this.hottabspositions //Array containing position numbers of "hot" tabs (those with a "rel" attr)
this.expandtab(this.tabs[hottabspositions[currentTabIndex]])
this.automode_currentTabIndex=(currentTabIndex<hottabspositions.length-1)? currentTabIndex+1 : 0 //increment currentTabIndex
},
cancelautorun:function(){
if (typeof this.autoruntimer!="undefined")
clearInterval(this.autoruntimer)
},
init:function(automodeperiod){
var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
var persisterror=true //Bool variable to check whether persisted tab position is valid (can become invalid if user has modified tab structure)
this.automodeperiod=automodeperiod || 0
for (var i=0; i<this.tabs.length; i++){
this.tabs[i].tabposition=i //remember position of tab relative to its peers
if (this.tabs[i].getAttribute("rel")){
var tabinstance=this
this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
this.tabs[i].onclick=function(){
tabinstance.expandtab(this)
tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
return false
}
if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/))
}
if (this.enabletabpersistence && parseInt(persistedtab)==i || !this.enabletabpersistence && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
this.expandtab(this.tabs[i]) //expand current tab if it's the persisted tab, or if persist=off, carries the "selected" CSS class
persisterror=false //Persisted tab (if applicable) was found, so set "persisterror" to false
//If currently selected tab's index(i) is greater than 0, this means its not the 1st tab, so set the tab to begin in automode to 1st tab:
this.automode_currentTabIndex=(i>0)? 0 : 1
}
}
} //END for loop
if (persisterror) //if an error has occured while trying to retrieve persisted tab (based on its position within its peers)
this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
this.automode_currentTabIndex=this.automode_currentTabIndex || 0
this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
}
} //END int() function
分享到:
相关推荐
在鸿蒙操作系统(HarmonyOS)的开发过程中,`listitem` 和 `tabcontent` 是两个重要的组件,常用于构建用户界面。`listitem` 通常用于展示列表数据,而 `tabcontent` 则用于实现多标签页切换,提供丰富的交互体验。...
<div id="tab2" class="tab-content" style="display:none;"> <!-- Tab2的内容 --> <div id="tab3" class="tab-content" style="display:none;"> <!-- Tab3的内容 --> // 使用JavaScript进行Tab切换 // ....
<div id="tab1" class="tabContent">Content for Tab 1 <div id="tab2" class="tabContent">Content for Tab 2 <div id="tab3" class="tabContent">Content for Tab 3 ``` 接下来,我们可以使用jQuery来添加...
@ViewChild('tabContent', { read: ViewContainerRef }) tabContent: ViewContainerRef; private componentFactoryResolver: ComponentFactoryResolver; constructor(resolver: ComponentFactoryResolver) { ...
tabContent[tabTitle.indexOf(tab)].className = "selectContent"; } } ``` #### 五、关键点总结 1. **CSS 定制**:通过 CSS 设置了 Tab 的样式,如背景颜色、字体大小等。 2. **DOM 操作**:利用 `...
在这个例子中,`.active`类用于标记当前选中的tab按钮,而`.tabContent`的`display: none`属性使得所有面板默认处于隐藏状态。 提供的压缩包文件列表包括多个ASP文件(如`demoTab.asp`、`test3.asp`、`test4.asp`、...
<div id="tab1" class="tabContent">Content for Tab 1 <div id="tab2" class="tabContent">Content for Tab 2 <div id="tab3" class="tabContent">Content for Tab 3 ``` 现在我们编写jQuery代码来实现Tab切换...
$('.tabContent').eq(index).show().siblings().hide(); // 显示相应内容,隐藏其他内容 }); }); ``` 在这个例子中,当用户点击某个tab时,该tab会被加上`active`类,同时显示对应的内容区。如果希望支持鼠标...
var tabContent = '<div id="' + id + '" class="tabContent">' + content + '</div>'; $('#tabsContainer .tabs').append(tabLink); $('#tabsContainer').append(tabContent); // 更新选项卡点击事件 ...
<div id="tab1" class="tabContent"> <!-- 内容1 --> <div id="tab2" class="tabContent"> <!-- 内容2 --> <div id="tab3" class="tabContent"> <!-- 内容3 --> ``` 接着,`css.css` 文件负责样式设计...
<div id="content1" class="tabContent">内容1 <div id="content2" class="tabContent">内容2 <div id="content3" class="tabContent">内容3 ``` 2. **CSS样式**:为了实现蓝色主题,我们需要为选项卡和内容...
android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="5dp" /> ``` 接下来,我们需要在Java代码中初始化TabHost并添加Tab。...
<div id="tab1" class="tabContent">Content for Tab 1 <div id="tab2" class="tabContent">Content for Tab 2 <div id="tab3" class="tabContent">Content for Tab 3 ``` 接着,我们需要用JavaScript来添加交互...
$(".tabContent").hide(); // 显示与当前Tab对应的内容 var contentId = $(this).attr("data-content"); // 获取数据属性值,假设每个Tab按钮有"data-content"属性指向对应的内容ID $("#" + contentId).show()...
android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="5dp" /> ``` 然后,在对应的Activity中初始化TabHost并添加Tab: ```...
这里我们使用`FragmentTransaction`来替换`TabContent`中的`Fragment`。例如: ```java TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost); tabHost.setup(); TabSpec tab1Spec = tabHost....
<div id="tab1" class="tabContent">内容1 <div id="tab2" class="tabContent">内容2 <div id="tab3" class="tabContent">内容3 ``` 2. **CSS样式**: 为选项卡和内容区域添加基本样式,如颜色、布局和过渡...
var tabContent = document.querySelectorAll('.tab-content .tab'); function activateTab(tabId) { // 隐藏所有内容 for (var i = 0; i < tabContent.length; i++) { tabContent[i].classList.remove('active'...
<section id="content2" class="tabContent hidden">内容2 <section id="content3" class="tabContent hidden">内容3 ``` 在CSS中,我们可以设置初始状态为只有第一个内容区域显示,其余隐藏: ```css .tabContent...
tabContent.eq(index).addClass('active').siblings().removeClass('active'); }); }); ``` 4. 响应式设计: 为了让这个tab切换效果在不同设备上都能正常工作,我们可能需要考虑响应式设计。这可以通过使用CSS...