ساخت tab های تو در تو

سعید شعبانی · بهمن 91

سلام دوستان بالاخره با کمک دوست خوبم kasra تونستم که tab ها را بسازم حالا یک کاری دیگه می خواهم بکنم اون هم اینکه می خواهم یک tab را در tab دیگه بگذارم.

می خواهم اینجوری بشه

پربیننده ترین مطالب

ماه

پربیننده ترین مطالب ماه

سال

پربیننده ترین مطالب سال

آخرین مطالب

این کد html است که خودم بدون هیچ دانش برنامه نویسی tab های tab1-1 و tab1-2 را اضافه کره ام اما tab1 همیشه display : none است (لطفا این مشکل را حل کنید)

<ul>

<li><a id="myfavorite" rel="tab1" href="#" class="selected">پربیننده ترین مطالب</a>

<ul>

</ul>

</li>

<li><a rel="tab2" href="#" class="">آخرین ها</a></li>

</ul>

</div>

<li style="display: block;" id="tab1-1" class="tab_content">پربیننده ترین مطالب ماه</li>

<li style="display: none;" id="tab1-2" class="tab_content">پربیننده ترین مطالب سال</li>

</ul>

<div class="tab_content" id="tab2" style="display: none;"><ul>آخرین مطالب</ul> </div>

</div>

var mypets=new ddtabcontent("tabs")

mypets.setpersist(true)

mypets.setselectedClassTarget("link")

mypets.init(0)

</script>

این هم جاوا اسکریپتی هست که در هدر قرار دادم - لینک آنلاین

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.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array

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

},

cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )

if (dir=="next"){

var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0

}

else if (dir=="prev"){

var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1

}

if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function

this.cancelautorun() //stop auto cycling of tabs (if running)

this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])

},

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

},

urlparamselect:function(tabinterfaceid){

var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL

return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index

},

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)

this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array

},

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)? "inline-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)? "inline-block" : "none"

}

},

setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)

for (var i=0; i<this.hottabspositions.length; i++){

if (tabposition==this.hottabspositions[i]){

this.currentTabIndex=i

break

}

},

autorun:function(){ //function to auto cycle through and select tabs based on a set interval

this.cycleit('next', true)

},

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 selectedtab=-1 //Currently selected tab index (-1 meaning none)

var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index

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 (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){

selectedtab=i //Selected tab index, if found

}

} //END for loop

if (selectedtab!=-1) //if a valid default selected tab index is found

this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)

else //if no valid default selected index found

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.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)

}

} //END int() function

} //END Prototype assignment

ویرایش شده بهمن 91 توسط Morteza

mehral · بهمن 91

تب درواقع کاربردشون مثل هدر ها هست یعنی چی یه تب توی تب دیگه باشه ؟؟

NESTED · بهمن 91

متوجه نشدیم چی گفتید این که گفتید خاصیت شاخه و زیر شاخه هست که خود وردپرس اینکار رو انجام میده

سعید شعبانی · بهمن 91

دوستان ببخشید یکم گنگ موضوع را مطرح کدم چون برای خودم هم درکش یکم سخت بود. بگذارید یک جور دیگه بگم

من می خواهم دو تب داشته باشم یکی مطالب پر بازدید و دیگری آخرین مطالب در زیر مطالب پربازدید هم دو تب دیگه باشه یکی برای نمایش مطالب پربازدید سال و دیگری برای نمایش مطالب پر بازدید ماه . تب دوم هم که برای آخرین مطالب هست.

در دو عکس زیر کاملا مشخص هست منظورم چی هست

تا حدودی هم پیش رفتم ولی درست کار نمی کنه اینجا دو جا را چک کنید 1 - 2

**Morteza** · بهمن 91

شما میخواید چند تب در یک بخش از تب مادر قرار بدید.

خوب اول یک تب ایجاد کنید.

بعد هم کدهای همون تب رو توی یک یکی از li های تب اصل قرار بدید.

همین کار رو کردید؟

سعید شعبانی · بهمن 91

من هم فکر کنم همین کار را کردم

یک بار دیگه همینجا کارو انجام می دهم ببینید درست هست

این کد اول هست که دارای دو تب می باشد


<div class="tab">
<div class="tab_title" id="tabs">
<ul>
<li><a id="myfavorite" rel="tab1" href="#" class="selected">محبوبترين ها</a></li>
<li><a rel="tab2" href="#" class="">آخرين ها</a></li>
</ul>
</div>
<div class="tab_container">
<div style="display: inline-block;" id="tab1" class="tab_content">محبوبترين ها</div>
<div class="tab_content" id="tab2" style="display: none;"><ul><?php get_archives('postbypost','10','custom','<li>','</li>'); ?></ul></div>
</div>
</div>

حال دو تب را در تب اول (محبوبترین ها) قرار می دهم


<div class="tab">
<div class="tab_title" id="tabs">
  <ul>
   <li><a id="myfavorite" rel="tab1" href="#" class="selected">محبوبترين ها</a></li>
    <li><a id="myfavorite" rel="tab1-1" href="#" class="selected">ماه</a></li>
    <li><a id="myfavorite" rel="tab1-2" href="#" class="">سال</a></li>
   <li><a rel="tab2" href="#" class="">آخرين ها</a></li>
  </ul>
</div>
<div class="tab_container">
  <div style="display: inline-block;" id="tab1" class="tab_content">
    <div style="display: block;" id="tab1-1" class="tab_content">ماه</div>
    <div style="display: none;" id="tab1-2" class="tab_content">سال</div>
  </div>
  <div class="tab_content" id="tab2" style="display: none;"><ul><?php get_archives('postbypost','10','custom','<li>','</li>'); ?></ul></div>
</div>
</div>

آیا تا اینجا درست عمل کردم؟

ویرایش شده بهمن 91 توسط سعید شعبانی

**Morteza** · بهمن 91

بله عنوان دو تب رو قرار دادید. درسته.

اگر مشکل دارید کدها و فایلهای تب رو اینجا قرار بدید تا یک نمونه قرار بدم.

سعید شعبانی · بهمن 91

بله عنوان دو تب رو قرار دادید. درسته.
اگر مشکل دارید کدها و فایلهای تب رو اینجا قرار بدید تا یک نمونه قرار بدم.

بله مشکل دارم زمانی که همون دو تب اول فقط هستند هیچ مشکلی نیست و تب ها به درستی کار می کنند ولی زمانی که اون دو تب را قرار می دهم محتویات دو تب جیدی نشان داده نمی شوند و فقط محتویات تب دوم اصلی نشان داده می شود.

من در هدر این کد را می گذارم

که کدش را اینجا هم قرار می دهم

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.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array

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

},

cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )

if (dir=="next"){

var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0

}

else if (dir=="prev"){

var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1

}

if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function

this.cancelautorun() //stop auto cycling of tabs (if running)

this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])

},

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

},

urlparamselect:function(tabinterfaceid){

var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL

return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index

},

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).className=(this.tabs.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)

this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array

},

expandsubcontent:function(subcontentid){

for (var i=0; i<this.subcontentids.length; i++){

var subcontent=document.getElementById(this.subcontentids) //cache current subcontent obj (in for loop)

subcontent.style.display=(subcontent.id==subcontentid)? "inline-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).style.display=(associatedrevids.indexOf(","+allrevids+",")!=-1)? "inline-block" : "none"

}

},

setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)

for (var i=0; i<this.hottabspositions.length; i++){

if (tabposition==this.hottabspositions){

this.currentTabIndex=i

break

}

},

autorun:function(){ //function to auto cycle through and select tabs based on a set interval

this.cycleit('next', true)

},

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 selectedtab=-1 //Currently selected tab index (-1 meaning none)

var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index

this.automodeperiod=automodeperiod || 0

for (var i=0; i<this.tabs.length; i++){

this.tabs.tabposition=i //remember position of tab relative to its peers

if (this.tabs.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.getAttribute("rel") //store id of sub content ("rel" attr value)

this.tabs.onclick=function(){

tabinstance.expandtab(this)

tabinstance.cancelautorun() //stop auto cycling of tabs (if running)

return false

}

if (this.tabs.getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element

this.revcontentids=this.revcontentids.concat(this.tabs.getAttribute("rev").split(/\s*,\s*/))

}

if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs).className=="selected"){

selectedtab=i //Selected tab index, if found

}

} //END for loop

if (selectedtab!=-1) //if a valid default selected tab index is found

this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)

else //if no valid default selected index found

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.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)

}

} //END int() function

} //END Prototype assignment

بعد در مکان مورد نظر کد زیر را قرار می دهم


<div class="tab">
<div class="tab_title" id="tabs">
<ul>
<li><a id="myfavorite" rel="tab1" href="#" class="selected">محبوبترين ها</a></li>
<li><a id="myfavorite" rel="tab1-1" href="#" class="selected">ماه</a></li>
<li><a id="myfavorite" rel="tab1-2" href="#" class="">سال</a></li>
<li><a rel="tab2" href="#" class="">آخرين ها</a></li>
</ul>
</div>
<div class="tab_container">
<div style="display: inline-block;" id="tab1" class="tab_content">
<div style="display: block;" id="tab1-1" class="tab_content">ماه</div>
<div style="display: none;" id="tab1-2" class="tab_content">سال</div>
</div>
<div class="tab_content" id="tab2" style="display: none;"><ul><?php get_archives('postbypost','10','custom','<li>','</li>'); ?></ul></div>
</div>
</div>
<script type="text/javascript">
var mypets=new ddtabcontent("tabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(0)
</script>

این هم استایلش


.tab_title {
display: block;
}
.tab_title ul li a {
background: -moz-linear-gradient(right center , #814B93, #955FA7, #814B93) repeat scroll 0 0 transparent;
color: #FFFFFF;
float: right;
font-family: yekan;
font-size: 13px;
font-weight: lighter;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
width: 156px;
}
.tab_title .selected {
background: none repeat scroll 0 0 #EFEFEF;
color: #000000;
}
.tab_title .selected {
background: none repeat scroll 0 0 #EFEFEF;
color: #000000;
}
.tab_container {
background: -moz-linear-gradient(center bottom , #FFFFFF, #E8E8E8) repeat scroll 0 0 transparent;
display: block;
padding: 5px;
}
.tab_content li a {
display: block;
padding-bottom: 5px;
padding-right: 3px;
padding-top: 4px;
}

این هم عکسش

و این هم یک لینک آنلاین (فقط ببخشید که این صفحه بهم ریخته هست تنها برای امتحان ساختمش)

**Morteza** · اسفند 91

کد کلا برای من درست کار نمیکنه:

http://jsfiddle.net/gpwwZ/

سعید شعبانی · اسفند 91

مرتضی جان من که دیگه بیخیال این نوع تب شدم. اگر شما یا دوستان کد چنین تبی را دارید لطفا اون را قرار بدید. متشکرم

**Morteza** · اسفند 91

من توی کارهام از تب های jquery ui استفاده میکنم.

http://jqueryui.com/tabs/

ورود

ساخت tab های تو در تو

پست های پیشنهاد شده

سعید شعبانی 2047

لینک به ارسال

mehral 785

لینک به ارسال

NESTED 4295

لینک به ارسال

سعید شعبانی 2047

لینک به ارسال

Morteza 34190

لینک به ارسال

سعید شعبانی 2047

لینک به ارسال

Morteza 34190

لینک به ارسال

سعید شعبانی 2047

لینک به ارسال

Morteza 34190

لینک به ارسال

سعید شعبانی 2047

لینک به ارسال

Morteza 34190

لینک به ارسال

به گفتگو بپیوندید

فهرست بخش ها

فعالیت ها