Franc83


Tableaux escamotables en Javascript et CSS Convertir en PDF Version imprimable
25-09-2008

Tableaux escamotables Css et java



Des tableaux très pratique pour passer beaucoup d'informations sur une zone réduite.



L'exemple et les explications, tout en un :





Pourquoi ce script ?
Ce script est très utile si vous désirez donner des textes à copier coller, qui sont assez longs, ce qui vous permettra de gagner de l'espace sur votre page. En outre, il est paramétrable au niveau des couleurs et des caractères. Il se place ou l'on veut sur la page, et même il peut se placer plusieurs fois sur la meme page, à différents endroits.

Le code javascript pour cet outil :

Voici le code à coller dans votre header :

<script type="text/javascript">
var enablepersist="on"
var memoryduration="7" var contractsymbol='minus.gif'
var expandsymbol='plus.gif'function getElementbyClass(rootobj, classname){
var temparray=new Array()
var inc=0
var rootlength=rootobj.length
for (i=0; i<rootlength; i++){
if (rootobj[i].className==classname)
temparray[inc++]=rootobj[i]
}
return temparray
}
function sweeptoggle(ec){
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display=(ec=="contract")? "none" : ""
inc++
}
revivestatus()
}
function expandcontent(curobj, cid){
if (ccollect.length>0){
document.getElementById(cid).style.display=
(document.getElementById(cid).style.display!="none")
? "none" : ""
curobj.src=(document.getElementById(cid).style.
display=="none")? expandsymbol : contractsymbol
}
}
function revivecontent(){
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById
(selectedComponents[i]).style.display="none"
}
function revivestatus(){
var inc=0
while (statecollect[inc]){
if (ccollect[inc].style.display=="none")
statecollect[inc].src=expandsymbol
else
statecollect[inc].src=contractsymbol
inc++
}
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring
(offset, end))
}
}
return returnvalue;
}
function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){ selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}
function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="none")
selectedItem+=ccollect[inc].id+"|"
inc++
}
if (get_cookie(window.location.pathname)!=
selectedItem){
var expireDate = new Date()
expireDate.setDate(expireDate.getDate()
+parseInt(memoryduration))
document.cookie = window.location.pathname
+"="+selectedItem+";path=/;expires=
" + expireDate.toGMTString()
}
}
function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
var alltags=document.all? document.all :
document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
if (enablepersist=="on" && get_cookie
(window.location.pathname)!="" && ccollect.length>0)
revivecontent()
if (ccollect.length>0 && statecollect.length>0)
revivestatus()
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate
</script>


Le code css pour cet outil :

Voici le code à coller dans le header de votre page :

<style type="text/css">
body {
font: Verdana;
}
.showstate{
cursor:hand;
cursor:pointer;
float: right;
margin-top: 2px;
margin-right: 3px;
}

.headers{
width: 400px;
font-size: 120%;
font-weight: bold;
color:#1E90FF;
border: 1px solid black;
background-color: #CCCCCC;
}

.switchcontent{
width: 400px;
border: 1px solid black;
border-top-width: 0;
font:14px Verdana;
padding:10px;
}

</style>


Le code html pour les zones
A ne mettre qu'une fois :
<div align="center">
<div style="margin-bottom: 5px">
<a href="javascript:sweeptoggle('contract')">
<font color="#FF6600">Réduire
tout </font>
</a>| <a href="javascript:sweeptoggle('expand')"><font color="#FF6600">Ouvrir
tout</font></a></div>

A mettre pour chaque nouvelle zone :
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="headers">
<img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc1')" />Votre titre</td>
</tr>
<tr><td id="sc1" class="switchcontent">
VOTRE TEXTE ICI</td></tr>
</table>
<br />

........</div>

sc1 : A chaque nouveau tableau, ajouter 1 ( sc2, sc3..)


Signature du tutorial....

ALBIDOCHON

Crédits : © Dynamic Drive (www.dynamicdrive.com)



Dans le même esprit



Citez cet article

  Commenter cet article

Commenter
  • Les messages comportant des attaques verbales contre les personnes seront supprimés.
  • Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur.
  • Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
Nom
E-mail
Site web
Titre
BBCode:Web AddressEmail AddressBold TextItalic TextUnderlined TextQuoteCodeOpen ListList ItemClose List
Commentaire



Code:* Code
Je désire être prévenu par mail des commentaires qui suivront

Powered by AkoComment Tweaked Special Edition v.1.4.6
AkoComment © Copyright 2004 by Arthur Konze - www.mamboportal.com
All right reserved

 
< Précédent   Suivant >

Liens amis

Compteur.org

e-dilik.fr

NetFox2.net

IgloOps.fr

Infostuces

Mixx Radio Gold

Mobile Astuces

-------------

Votre site ici

Notre logo

Aide et astuces pour  blogs

Cliquez droit dans la zone où se trouve le code html et "copier"


Nos autres Logos...

S'abonner

devenir amis sur facebook

Votre adresse email ici pour recevoir les nouveautés du site directement dans votre boite

Nos Gadgets

Installez nos gadgets

gratuits Live Spaces

albi-gadget.jpg

Albidochon

oeil2moscou.jpg

Oeil 2 Moscou

Aidez-nous

aidez-nous

Recommandez ce
site à un ami

Statistiques

Generated in 1.59135 Seconds