« »

xCollapsible permet de basculer d'un Ã©lÃ©ment Â«affichageÂ» de propriÃ©tÃ© quand un Â«dÃ©clencheurÂ» est l'Ã©lÃ©ment cliquÃ©. Ce problÃ¨me est appliquÃ© Ã l'ensemble des Ã©lÃ©ments de l'Ã©lÃ©ment imbriquÃ©. Il fonctionne avec 2 HTML diffÃ©rentes structures. La premiÃ¨re dÃ©monstration est faite de ULS imbriquÃ©es, et la seconde est faite de nested DIVs avec un H prÃ©cÃ©dant chaque Ã©lÃ©ment DIV (je l'utiliser sur certaines des principales pages de mon site). Seuls les ultrapÃ©riphÃ©riques UL (ou DIV) a besoin d'un ID.

xMenu5 est une version expÃ©rimentale de la xCollapsible avec plus de fonctionnalitÃ©s.

Étiquette: xCollapsible, xMenu5, DIV, afficher

Rapport de nous cette erreur JavaScript

Demo
Agrandir
Recharger
New window

Gratuit iPage hébergement Web pour la première année MOMENT

Si vous êtes toujours à la recherche d'un fournisseur d'hébergement Web fiable avec des tarifs abordables, pourquoi vous ne prenez pas un peu de temps pour essayer iPage, seulement avec $1.89/month, inclus $500+ Crédits supplémentaires gratuites pour le paiement de 24 mois ($45)?

Plus de 1.000.000 de clients + existisng peuvent pas avoir tort, vraiment vous n'êtes pas aussi! Plus important encore, lorsque vous enregistrez l'hébergement web à iPage grâce à notre lien, nous allons être heureux de renvoyer un plein remboursement. C'est génial! Vous devriez essayer iPage hébergement web GRATUITEMENT maintenant! Et contactez-nous pour tout ce que vous devez savoir sur iPage. Essayez iPage GRATUIT première année MOMENT

Code
Files
CSS
JavaScript
HTML
Imprimer

Copy All x2

<LINK href="xmenu5.css" type=text/css rel=stylesheet />

Copy All x2

<SCRIPT type=text/javascript>
window.onload = function()
{
    if (window.winOnLoad) window.winOnLoad();
}
window.onunload = function()
{
    if (window.winOnUnload) window.winOnUnload();
}
</SCRIPT>
<SCRIPT src="x_core.js" type=text/javascript></SCRIPT>

<SCRIPT src="x_dom.js" type=text/javascript></SCRIPT>

<SCRIPT src="xcollapsible.js" type=text/javascript></SCRIPT>

<SCRIPT src="xmenu5.js" type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>

// xMenu5/xCollapsible Demo
var mnu = new Array();
window.onload = function()
{
  mnu[0] = new xCollapsible('clpsUL1');
  mnu[1] = new xMenu5('xm5', 'xMenuBtn', 'xAutoOpen');
  mnu[2] = new xCollapsible('clpsDIV1', true);
  mnu[3] = new xCollapsible('clpsUL2id');
}
window.onunload = function()
{
  for (var i = 0; i < mnu.length; ++i) {
    mnu[i].onUnload();
  }
}
// end demo

// debugging/testing stuff not related to the xMenu5 demo:
function doWalkTest()
{
  xWalkEleTree(xGetElementById('clpsUL1'), fnVisit);
  xWalkEleTree(xGetElementById('xm5'), fnVisit);
}
function fnVisit(node, level, branch)
{
  if (node.className == 'xMenuLbl' || node.nodeName == 'SPAN') {
    node.innerHTML = 'Label: Branch ' + branch + ', Level ' + level;
  }
  else if (node.nodeName == 'A') {
    node.innerHTML = 'Item: Branch ' + branch + ', Level ' + level;
  }
  return 1;
}
// debugging/testing stuff not related to the xMenu5 demo:
var s;
function doGenTest()
{
  s = '';
  xGetHtml(xGetElementById('rightColumn'));
  xGetElementById('dbg').value = s;
}
function xGetHtml(oNode, iLevel) {
  if (typeof iLevel == 'undefined') iLevel = 0;
  var thisName = oNode.nodeName.toLowerCase();
  var oneLiner = isOneLiner(thisName);
  for (var i=0; i<iLevel; ++i) s += '  ';
  s += '<' + thisName;
  if (oNode.id.length) s += " id='" + oNode.id + "'";
  if (oNode.className.length) s += " class='" + oNode.className + "'";
  s += '>';
  if (!oneLiner)  s += 'n';
  for (var c = oNode.firstChild; c; c = c.nextSibling) {
    if (c.nodeType == 1) {
      !xGetHtml(c, iLevel + 1);
    }
  }
  if (!oneLiner) for (var i=0; i<iLevel; ++i) s += '  ';
  s += '</' + thisName + '>n';
}
function isOneLiner(eleNodeName)
{
  if (eleNodeName.charAt(0)=='h' && eleNodeName.length==2) {
    return true;
  }
  switch(eleNodeName) {
    case 'a':
    case 'span':
    case 'input':
    case 'b':
    case 'i':
    case 'script':
    case 'iframe':
      return true;
      break;
    default:
      return false;
  }
}
</SCRIPT>

Copy All x2

<DIV id=demoContainer>
<DIV id=clpsUL1Container>
<H2>xCollapsible - ULs #1</H2>
<UL class=xMenu id=clpsUL1><!-- Main Label 1 -->

  <LI><!-- as a test, this newline and comment creates text and comment nodes before the span --><SPAN>
	Label</SPAN> 
<!-- as a test, this newline and comment creates text and comment nodes after the span -->
  <UL>
    <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
    <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
    <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
    <LI><SPAN>Label</SPAN> 
    <UL>

      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><SPAN>Label</SPAN> 
      <UL>
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        </LI></UL></LI></UL>

    <LI><SPAN>Label</SPAN> 
    <UL>
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><SPAN>Label</SPAN> 
      <UL>
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        </LI></UL></LI></UL></LI></UL><!-- end Main Label 1 --><!-- Main Label 2 -->

  <LI><SPAN>Label</SPAN> 
  <UL>
    <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
    <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
    <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
    <LI><SPAN>Label</SPAN> 
    <UL>
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><SPAN>Label</SPAN> 
      <UL>

        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        </LI></UL></LI></UL>
    <LI><SPAN>Label</SPAN> 
    <UL>
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><SPAN>Label</SPAN> 
      <UL>

        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        </LI></UL></LI></UL></LI></UL><!-- end Main Label 2 --></LI></UL><!-- end clpsUL1 --></DIV><!-- end clpsUL1Container -->
<DIV id=xm5Container>
<H2>xMenu5</H2>
<UL class=xMenu id=xm5><!-- Main Label 1 -->
  <LI><!-- as a test, this newline and comment creates text and comment nodes before the span -->
  <DIV class=xMenuBtn>+</DIV>

  <DIV class=xMenuLbl>Label</DIV><!-- as a test, this newline and comment creates text and comment nodes after the span -->
  <UL>
    <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
    <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
    <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
    <LI>
    <DIV class=xMenuBtn>+</DIV>
    <DIV class=xMenuLbl>Label</DIV>

    <UL>
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI>
      <DIV class=xMenuBtn>+</DIV>
      <DIV class=xMenuLbl>Label</DIV>
      <UL>

        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        </LI></UL></LI></UL>
    <LI>
    <DIV class=xMenuBtn>+</DIV>
    <DIV class=xMenuLbl>Label</DIV>
    <UL>

      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI>
      <DIV class=xMenuBtn>+</DIV>
      <DIV class=xMenuLbl>Label</DIV>
      <UL>
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        </LI></UL></LI></UL></LI></UL><!-- end Main Label 1 --><!-- Main Label 2 -->

  <LI>
  <DIV class=xMenuBtn>+</DIV>
  <DIV class=xMenuLbl>Label</DIV>
  <UL>
    <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
    <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
    <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
    <LI>

    <DIV class=xMenuBtn>+</DIV>
    <DIV class=xMenuLbl>Label</DIV>
    <UL>
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI>
      <DIV class=xMenuBtn id=xAutoOpen>+</DIV>

      <DIV class=xMenuLbl>Label (xAutoOpen)</DIV>
      <UL>
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        </LI></UL></LI></UL>
    <LI>
    <DIV class=xMenuBtn>+</DIV>

    <DIV class=xMenuLbl>Label</DIV>
    <UL>
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
      <LI>
      <DIV class=xMenuBtn>+</DIV>
      <DIV class=xMenuLbl>Label</DIV>

      <UL>
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        <LI><A href="http://www.cross-browser.com/x/menus/xmenu5.php#">Item</A> 
        </LI></UL></LI></UL></LI></UL><!-- end Main Label 2 --></LI></UL><!-- end xm5 --></DIV><!-- end xm5Container --></DIV>

Commentaire (0)
Écrire

par Avant-première

Annuler réponse

Écrivez votre commentaire

Commentaires du client sera publié avant previwed
Donnez votre email réel pour obtenir des réponses notification ou commentaire sera supprimé

Votre nom *
Votre e-mail^g *
~~Votre site~~

Comment's Titre

J'assure à 100% je suis humain réel
Je le répète, je ne suis pas bot

Sent (0)
Nouveau

BBCode
HTML
URL
JID

Déposer jours:
Auteur:
Previews:
Commentaire:
Votes:
Sent:
Taille:
Rang:

30/01/2007
Cross-Browser [more]
4,778
0
13
0
0.13 KBytes

JavaScript - Langue: Française

4.5/5 13 votes / 4,778 previews / 0 commentaire 30/01/2007 xCollapsible permet de basculer d'un Ã©lÃ©ment Â«affichageÂ» de propriÃ©tÃ© quand un Â«dÃ©clencheurÂ» est l'Ã©lÃ©ment cl...JavaScript - - Langue: Française

evaore[4] hoavdp taitu_matrix nothing_special[2] hoivv stone18k phamtrungtri minhtl nkhactien[2] vicNguyen