`
提烟而过
  • 浏览: 118213 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

tabcontent

阅读更多

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

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    鸿蒙语言 listitem和tabcontent +页面传参

    在鸿蒙操作系统(HarmonyOS)的开发过程中,`listitem` 和 `tabcontent` 是两个重要的组件,常用于构建用户界面。`listitem` 通常用于展示列表数据,而 `tabcontent` 则用于实现多标签页切换,提供丰富的交互体验。...

    同一页面多个Tab选项卡嵌套显示实例

    &lt;div id="tab2" class="tab-content" style="display:none;"&gt; &lt;!-- Tab2的内容 --&gt; &lt;div id="tab3" class="tab-content" style="display:none;"&gt; &lt;!-- Tab3的内容 --&gt; // 使用JavaScript进行Tab切换 // ....

    jQuery 实现tab切换效果

    &lt;div id="tab1" class="tabContent"&gt;Content for Tab 1 &lt;div id="tab2" class="tabContent"&gt;Content for Tab 2 &lt;div id="tab3" class="tabContent"&gt;Content for Tab 3 ``` 接下来,我们可以使用jQuery来添加...

    Angular 动态添加 Tab 标签

    @ViewChild('tabContent', { read: ViewContainerRef }) tabContent: ViewContainerRef; private componentFactoryResolver: ComponentFactoryResolver; constructor(resolver: ComponentFactoryResolver) { ...

    js Tab选项卡特效

    tabContent[tabTitle.indexOf(tab)].className = "selectContent"; } } ``` #### 五、关键点总结 1. **CSS 定制**:通过 CSS 设置了 Tab 的样式,如背景颜色、字体大小等。 2. **DOM 操作**:利用 `...

    利用jquery作的tab页

    在这个例子中,`.active`类用于标记当前选中的tab按钮,而`.tabContent`的`display: none`属性使得所有面板默认处于隐藏状态。 提供的压缩包文件列表包括多个ASP文件(如`demoTab.asp`、`test3.asp`、`test4.asp`、...

    Jquery實現的tab切換

    &lt;div id="tab1" class="tabContent"&gt;Content for Tab 1 &lt;div id="tab2" class="tabContent"&gt;Content for Tab 2 &lt;div id="tab3" class="tabContent"&gt;Content for Tab 3 ``` 现在我们编写jQuery代码来实现Tab切换...

    表单切换tab

    $('.tabContent').eq(index).show().siblings().hide(); // 显示相应内容,隐藏其他内容 }); }); ``` 在这个例子中,当用户点击某个tab时,该tab会被加上`active`类,同时显示对应的内容区。如果希望支持鼠标...

    jQuery动态增删tab选项卡

    var tabContent = '&lt;div id="' + id + '" class="tabContent"&gt;' + content + '&lt;/div&gt;'; $('#tabsContainer .tabs').append(tabLink); $('#tabsContainer').append(tabContent); // 更新选项卡点击事件 ...

    jquery tab 选项卡效果

    &lt;div id="tab1" class="tabContent"&gt; &lt;!-- 内容1 --&gt; &lt;div id="tab2" class="tabContent"&gt; &lt;!-- 内容2 --&gt; &lt;div id="tab3" class="tabContent"&gt; &lt;!-- 内容3 --&gt; ``` 接着,`css.css` 文件负责样式设计...

    Jquery制作的蓝色TAB菜单

    &lt;div id="content1" class="tabContent"&gt;内容1 &lt;div id="content2" class="tabContent"&gt;内容2 &lt;div id="content3" class="tabContent"&gt;内容3 ``` 2. **CSS样式**:为了实现蓝色主题,我们需要为选项卡和内容...

    android的tab布局简单例子

    android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="5dp" /&gt; ``` 接下来,我们需要在Java代码中初始化TabHost并添加Tab。...

    javascript tab菜单

    &lt;div id="tab1" class="tabContent"&gt;Content for Tab 1 &lt;div id="tab2" class="tabContent"&gt;Content for Tab 2 &lt;div id="tab3" class="tabContent"&gt;Content for Tab 3 ``` 接着,我们需要用JavaScript来添加交互...

    jquery 通用tab 切换效果

    $(".tabContent").hide(); // 显示与当前Tab对应的内容 var contentId = $(this).attr("data-content"); // 获取数据属性值,假设每个Tab按钮有"data-content"属性指向对应的内容ID $("#" + contentId).show()...

    android 多个Tab的切换

    android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="5dp" /&gt; ``` 然后,在对应的Activity中初始化TabHost并添加Tab: ```...

    android 实现tab页切换

    这里我们使用`FragmentTransaction`来替换`TabContent`中的`Fragment`。例如: ```java TabHost tabHost = (TabHost) findViewById(android.R.id.tabhost); tabHost.setup(); TabSpec tab1Spec = tabHost....

    jQuery Tab选项卡制作单片叶子样式的选项卡切换

    &lt;div id="tab1" class="tabContent"&gt;内容1 &lt;div id="tab2" class="tabContent"&gt;内容2 &lt;div id="tab3" class="tabContent"&gt;内容3 ``` 2. **CSS样式**: 为选项卡和内容区域添加基本样式,如颜色、布局和过渡...

    javascript实现简易的tab选项卡切换效果

    var tabContent = document.querySelectorAll('.tab-content .tab'); function activateTab(tabId) { // 隐藏所有内容 for (var i = 0; i &lt; tabContent.length; i++) { tabContent[i].classList.remove('active'...

    制作Tab菜单

    &lt;section id="content2" class="tabContent hidden"&gt;内容2 &lt;section id="content3" class="tabContent hidden"&gt;内容3 ``` 在CSS中,我们可以设置初始状态为只有第一个内容区域显示,其余隐藏: ```css .tabContent...

    JavaScript实现的tab标签自动切换效果源码(jQuery)

    tabContent.eq(index).addClass('active').siblings().removeClass('active'); }); }); ``` 4. 响应式设计: 为了让这个tab切换效果在不同设备上都能正常工作,我们可能需要考虑响应式设计。这可以通过使用CSS...

Global site tag (gtag.js) - Google Analytics