سعید شعبانی 2047 ارسال شده در بهمن 91 گزارش بازنشر ارسال شده در بهمن 91 (ویرایش شده) سلام دوستان بالاخره با کمک دوست خوبم kasra تونستم که tab ها را بسازم حالا یک کاری دیگه می خواهم بکنم اون هم اینکه می خواهم یک tab را در tab دیگه بگذارم.می خواهم اینجوری بشهپربیننده ترین مطالب ماه پربیننده ترین مطالب ماه سال پربیننده ترین مطالب سالآخرین مطالب آخرین مطالباین کد html است که خودم بدون هیچ دانش برنامه نویسی tab های tab1-1 و tab1-2 را اضافه کره ام اما tab1 همیشه display : none است (لطفا این مشکل را حل کنید) <div class="tab"><div class="tab_title" id="tabs"><ul><li><a id="myfavorite" rel="tab1" href="#" class="selected">پربیننده ترین مطالب</a><ul><li><a id="myfavorite" rel="tab1-1" href="#" class="selected">ماه</a><li><a id="myfavorite" rel="tab1-2" href="#" class="">سال</a></ul></li><li><a rel="tab2" href="#" class="">آخرین ها</a></li></ul></div><div class="tab_container"><ul style="display: inline-block;" id="tab1" class="tab_content"><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><script type="text/javascript">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 containerthis.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within containerthis.enabletabpersistence=truethis.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within containerthis.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] arraythis.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 pairif (document.cookie.match(re)) //if cookie foundreturn document.cookie.match(re)[0].split("=")[1] //return its valuereturn ""}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 peersthis.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" attrtabref=document.getElementById(tabid_or_position)else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attrtabref=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 parameterthis.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() functionthis.cancelautorun() //stop auto cycling of tabs (if running)this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])},setpersist:function(bool){ //PUBLIC function to toggle persistence featurethis.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 toreturn (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 URLreturn (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 throughvar 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 peersddtabcontent.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.revcontentidsfor (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 itdocument.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=ibreak}}},autorun:function(){ //function to auto cycle through and select tabs based on a set intervalthis.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=indexthis.automodeperiod=automodeperiod || 0for (var i=0; i<this.tabs.length; i++){this.tabs[i].tabposition=i //remember position of tab relative to its peersif (this.tabs[i].getAttribute("rel")){var tabinstance=thisthis.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peersthis.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 loopif (selectedtab!=-1) //if a valid default selected tab index is foundthis.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)else //if no valid default selected index foundthis.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attrif (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 785 ارسال شده در بهمن 91 گزارش بازنشر ارسال شده در بهمن 91 تب درواقع کاربردشون مثل هدر ها هست یعنی چی یه تب توی تب دیگه باشه ؟؟ نقل قول لینک به ارسال
NESTED 4295 ارسال شده در بهمن 91 گزارش بازنشر ارسال شده در بهمن 91 متوجه نشدیم چی گفتید این که گفتید خاصیت شاخه و زیر شاخه هست که خود وردپرس اینکار رو انجام میده 1 نقل قول لینک به ارسال
سعید شعبانی 2047 ارسال شده در بهمن 91 مالک گزارش بازنشر ارسال شده در بهمن 91 دوستان ببخشید یکم گنگ موضوع را مطرح کدم چون برای خودم هم درکش یکم سخت بود. بگذارید یک جور دیگه بگممن می خواهم دو تب داشته باشم یکی مطالب پر بازدید و دیگری آخرین مطالب در زیر مطالب پربازدید هم دو تب دیگه باشه یکی برای نمایش مطالب پربازدید سال و دیگری برای نمایش مطالب پر بازدید ماه . تب دوم هم که برای آخرین مطالب هست.در دو عکس زیر کاملا مشخص هست منظورم چی هستتا حدودی هم پیش رفتم ولی درست کار نمی کنه اینجا دو جا را چک کنید 1 - 2 نقل قول لینک به ارسال
Morteza 34190 ارسال شده در بهمن 91 گزارش بازنشر ارسال شده در بهمن 91 شما میخواید چند تب در یک بخش از تب مادر قرار بدید.خوب اول یک تب ایجاد کنید.بعد هم کدهای همون تب رو توی یک یکی از li های تب اصل قرار بدید.همین کار رو کردید؟ 1 نقل قول لینک به ارسال
سعید شعبانی 2047 ارسال شده در بهمن 91 مالک گزارش بازنشر ارسال شده در بهمن 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 34190 ارسال شده در بهمن 91 گزارش بازنشر ارسال شده در بهمن 91 بله عنوان دو تب رو قرار دادید. درسته.اگر مشکل دارید کدها و فایلهای تب رو اینجا قرار بدید تا یک نمونه قرار بدم. 3 نقل قول لینک به ارسال
سعید شعبانی 2047 ارسال شده در بهمن 91 مالک گزارش بازنشر ارسال شده در بهمن 91 بله عنوان دو تب رو قرار دادید. درسته.اگر مشکل دارید کدها و فایلهای تب رو اینجا قرار بدید تا یک نمونه قرار بدم.بله مشکل دارم زمانی که همون دو تب اول فقط هستند هیچ مشکلی نیست و تب ها به درستی کار می کنند ولی زمانی که اون دو تب را قرار می دهم محتویات دو تب جیدی نشان داده نمی شوند و فقط محتویات تب دوم اصلی نشان داده می شود.من در هدر این کد را می گذارم<script src="http://sdsdsd.clouds...noj4/js/tab.js" type="text/javascript"></script>که کدش را اینجا هم قرار می دهم function ddtabcontent(tabinterfaceid){this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main containerthis.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within containerthis.enabletabpersistence=truethis.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within containerthis.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] arraythis.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 pairif (document.cookie.match(re)) //if cookie foundreturn document.cookie.match(re)[0].split("=")[1] //return its valuereturn ""}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 peersthis.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" attrtabref=document.getElementById(tabid_or_position)else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attrtabref=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 parameterthis.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() functionthis.cancelautorun() //stop auto cycling of tabs (if running)this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])},setpersist:function(bool){ //PUBLIC function to toggle persistence featurethis.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 toreturn (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 URLreturn (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 throughvar 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 peersddtabcontent.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.revcontentidsfor (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 itdocument.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=ibreak}}},autorun:function(){ //function to auto cycle through and select tabs based on a set intervalthis.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=indexthis.automodeperiod=automodeperiod || 0for (var i=0; i<this.tabs.length; i++){this.tabs.tabposition=i //remember position of tab relative to its peersif (this.tabs.getAttribute("rel")){var tabinstance=thisthis.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peersthis.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 loopif (selectedtab!=-1) //if a valid default selected tab index is foundthis.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)else //if no valid default selected index foundthis.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attrif (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 34190 ارسال شده در اسفند 91 گزارش بازنشر ارسال شده در اسفند 91 کد کلا برای من درست کار نمیکنه:http://jsfiddle.net/gpwwZ/ 2 نقل قول لینک به ارسال
سعید شعبانی 2047 ارسال شده در اسفند 91 مالک گزارش بازنشر ارسال شده در اسفند 91 مرتضی جان من که دیگه بیخیال این نوع تب شدم. اگر شما یا دوستان کد چنین تبی را دارید لطفا اون را قرار بدید. متشکرم نقل قول لینک به ارسال
Morteza 34190 ارسال شده در اسفند 91 گزارش بازنشر ارسال شده در اسفند 91 من توی کارهام از تب های jquery ui استفاده میکنم.http://jqueryui.com/tabs/ 2 نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .