BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Scripts pour votre site
  Nouveaux messages Nouveaux messages Fil RSS  - aide script genre organigrame
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

aide script genre organigrame

 Répondre Répondre Page  <12
Auteur
Message
wolf allez vers le bas
Groupie
Groupie
Avatar

Depuis le: 01 Feb 2012
Pays: Reunion
Status: Inactif
Points: 91
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer wolf Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 02 Dec 2012 à 15:25
bonjour
bon apres multi test des script que j'ai recuperer je n'arrive pas a faire ce que je veux donc si quelqu'un peu m'aider sa serait chouette
voila ce que j'aimerais faire :
4 bouton au centre de ma page :
B1 B2 B3 B4
en cliquant sur B1
je veux qu'apparaissent 2 bouton :
B1.1 B1.2
en cliquant sur B2 je veux que
B1.1 ET B1.2 s'efface
pour afficher B2.1 B.22
merci
Haut de la page
MicroVinc allez vers le bas
Moderator Group
Moderator Group


Depuis le: 21 Août 2012
Pays: Bretagne
Status: Inactif
Points: 4460
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer MicroVinc Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 02 Dec 2012 à 17:27
Bonjour, en jquery avec ce genre de fonction, à adapter (en rouge):

// Les boutons à cacher à l'affichage de la page
 function CacherTout()
  {
   document.getElementById('Id_B1.1').style.visibility='hidden';
   document.getElementById('Id_B1.2').style.visibility='hidden';

   document.getElementById('Id_B2.1').style.visibility='hidden';
   document.getElementById('Id_B2.2').style.visibility='hidden';
  }

// On cache tout quand la page est chargée
$(document).ready(CacherTout());

// Bouton B1 qui affiche les boutons membres du bouton B1
$('#Id_B1').click(function() {
      
   CacherTout();
   document.getElementById('Id_B1.1').style.visibility='visible';
   document.getElementById('Id_B1.2').style.visibility='visible'
     
})

// Bouton B2 qui affiche les boutons membres du bouton B2
$('#Id_B2').click(function() {

  CacherTout();
    document.getElementById('Id_B2.1').style.visibility='visible';
    document.getElementById('Id_B2.2').style.visibility='visible'

  })

Code testé et fonctionnel


Edité par MicroVinc - 02 Dec 2012 à 19:34
Haut de la page
Donoma allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 12 Sep 2013
Status: Inactif
Points: 9
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Donoma Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Nov 2013 à 10:58
Bonjour,

Cette organigramme interactif m'interesse. J'ai essayé à l'aide de l'exemple cité par MicroVinc, mais je n'ai pas réussi à l'affiché complètement sur ma page ; tout s'affiche correctement sauf l'organigramme qui ne s'affiche pas.

Voici la méthode utilisée avec la dernière version d'Openelement :

1 - Tout d'abord j'ai enregistré les documents formats .js dans les fichiers indiqués.
2 - Puis, dans un Bloc de code (Source - Html) j'ai inscrit le code suivant :

<!-- CSS Files -->
<link type="text/css" href="../Files/Other/Jit/Examples/css/base.css" rel="stylesheet" />
<link type="text/css" href="../Files/Other/Jit/Examples/Spacetree.css" rel="stylesheet" />

<!--[if IE]>
<script language="javascript" type="text/javascript" src="../Files/Other/Jit/Extras/excanvas.js">
</script>
<![endif]-->

<!-- JIT Library File -->
<script language="javascript" type="text/javascript" src="../Files/Other/Jit/jit-yc.js"></script>

<!-- Example File -->
<script language="javascript" type="text/javascript" src="../Files/Other/Jit/Examples/Spacetree/example1.js"></script>

3-
Enfin dans un Bloc de code (visuel) j'ai inscrit le code suivant :
<div id="container">
 
  <div id="left-container">
   
    <div class="text">
      <h4>
        Tree Animation
      </h4>
     
      A static JSON Tree structure is used as input for this animation.
      <br />
      <br />
      <b>
        Click
      </b>
      on a node to select it.
      <br />
      <br />
      You can
      <b>
        select the tree orientation
      </b>
      by changing the select box in the right column.
      <br />
      <br />
      You can
      <b>
        change the selection mode
      </b>
      from
      <em>
        Normal
      </em>
      selection (i.e. center the selected node) to
      <em>
        Set as Root
      </em>
      .
      <br />
      <br />
      <b>
        Drag and Drop the canvas
      </b>
      to do some panning.
      <br />
      <br />
      Leaves color depend on the number of children they actually have.
     
    </div>
   
    <div id="id-list">
    </div>
   
   
    <div style="text-align:center;">
      <a href="example1.js">
        See the Example Code
      </a>
    </div>
  </div>
 
  <div id="center-container">
    <div id="infovis">
    </div>
    <script>
      var labelType, useGradients, nativeTextSupport, animate;
     
      (function() {
      var ua = navigator.userAgent,
      iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
      typeOfCanvas = typeof HTMLCanvasElement,
      nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
      textSupport = nativeCanvasSupport
      && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
      //I'm setting this based on the fact that ExCanvas provides text support for IE
      //and that as of today iPhone/iPad current text support is lame
      labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
      nativeTextSupport = labelType == 'Native';
      useGradients = nativeCanvasSupport;
      animate = !(iStuff || !nativeCanvasSupport);
      })();
     
      var Log = {
      elem: false,
      write: function(text){
      if (!this.elem)
      this.elem = document.getElementById('log');
      this.elem.innerHTML = text;
      this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
      }
      };
     
     
      function init(){
      //init data
      var json = {
      id: "node02",
      name: "0.2",
      data: {},
      children: [{
      id: "node13",
      name: "1.3",
      data: {},
      children: [{
      id: "node24",
      name: "2.4",
      data: {},
      children: [{
      id: "node35",
      name: "3.5",
      data: {},
      children: [{
      id: "node46",
      name: "4.6",
      data: {},
      children: []
      }]
      }, {
      id: "node37",
      name: "3.7",
      data: {},
      children: [{
      id: "node48",
      name: "4.8",
      data: {},
      children: []
      }, {
      id: "node49",
      name: "4.9",
      data: {},
      children: []
      }, {
      id: "node410",
      name: "4.10",
      data: {},
      children: []
      }, {
      id: "node411",
      name: "4.11",
      data: {},
      children: []
      }]
      }, {
      id: "node312",
      name: "3.12",
      data: {},
      children: [{
      id: "node413",
      name: "4.13",
      data: {},
      children: []
      }]
      }, {
      id: "node314",
      name: "3.14",
      data: {},
      children: [{
      id: "node415",
      name: "4.15",
      data: {},
      children: []
      }, {
      id: "node416",
      name: "4.16",
      data: {},
      children: []
      }, {
      id: "node417",
      name: "4.17",
      data: {},
      children: []
      }, {
      id: "node418",
      name: "4.18",
      data: {},
      children: []
      }]
      }, {
      id: "node319",
      name: "3.19",
      data: {},
      children: [{
      id: "node420",
      name: "4.20",
      data: {},
      children: []
      }, {
      id: "node421",
      name: "4.21",
      data: {},
      children: []
      }]
      }]
      }, {
      id: "node222",
      name: "2.22",
      data: {},
      children: [{
      id: "node323",
      name: "3.23",
      data: {},
      children: [{
      id: "node424",
      name: "4.24",
      data: {},
      children: []
      }]
      }]
      }]
      }, {
      id: "node125",
      name: "1.25",
      data: {},
      children: [{
      id: "node226",
      name: "2.26",
      data: {},
      children: [{
      id: "node327",
      name: "3.27",
      data: {},
      children: [{
      id: "node428",
      name: "4.28",
      data: {},
      children: []
      }, {
      id: "node429",
      name: "4.29",
      data: {},
      children: []
      }]
      }, {
      id: "node330",
      name: "3.30",
      data: {},
      children: [{
      id: "node431",
      name: "4.31",
      data: {},
      children: []
      }]
      }, {
      id: "node332",
      name: "3.32",
      data: {},
      children: [{
      id: "node433",
      name: "4.33",
      data: {},
      children: []
      }, {
      id: "node434",
      name: "4.34",
      data: {},
      children: []
      }, {
      id: "node435",
      name: "4.35",
      data: {},
      children: []
      }, {
      id: "node436",
      name: "4.36",
      data: {},
      children: []
      }]
      }]
      }, {
      id: "node237",
      name: "2.37",
      data: {},
      children: [{
      id: "node338",
      name: "3.38",
      data: {},
      children: [{
      id: "node439",
      name: "4.39",
      data: {},
      children: []
      }, {
      id: "node440",
      name: "4.40",
      data: {},
      children: []
      }, {
      id: "node441",
      name: "4.41",
      data: {},
      children: []
      }]
      }, {
      id: "node342",
      name: "3.42",
      data: {},
      children: [{
      id: "node443",
      name: "4.43",
      data: {},
      children: []
      }]
      }, {
      id: "node344",
      name: "3.44",
      data: {},
      children: [{
      id: "node445",
      name: "4.45",
      data: {},
      children: []
      }, {
      id: "node446",
      name: "4.46",
      data: {},
      children: []
      }, {
      id: "node447",
      name: "4.47",
      data: {},
      children: []
      }]
      }, {
      id: "node348",
      name: "3.48",
      data: {},
      children: [{
      id: "node449",
      name: "4.49",
      data: {},
      children: []
      }, {
      id: "node450",
      name: "4.50",
      data: {},
      children: []
      }, {
      id: "node451",
      name: "4.51",
      data: {},
      children: []
      }, {
      id: "node452",
      name: "4.52",
      data: {},
      children: []
      }, {
      id: "node453",
      name: "4.53",
      data: {},
      children: []
      }]
      }, {
      id: "node354",
      name: "3.54",
      data: {},
      children: [{
      id: "node455",
      name: "4.55",
      data: {},
      children: []
      }, {
      id: "node456",
      name: "4.56",
      data: {},
      children: []
      }, {
      id: "node457",
      name: "4.57",
      data: {},
      children: []
      }]
      }]
      }, {
      id: "node258",
      name: "2.58",
      data: {},
      children: [{
      id: "node359",
      name: "3.59",
      data: {},
      children: [{
      id: "node460",
      name: "4.60",
      data: {},
      children: []
      }, {
      id: "node461",
      name: "4.61",
      data: {},
      children: []
      }, {
      id: "node462",
      name: "4.62",
      data: {},
      children: []
      }, {
      id: "node463",
      name: "4.63",
      data: {},
      children: []
      }, {
      id: "node464",
      name: "4.64",
      data: {},
      children: []
      }]
      }]
      }]
      }, {
      id: "node165",
      name: "1.65",
      data: {},
      children: [{
      id: "node266",
      name: "2.66",
      data: {},
      children: [{
      id: "node367",
      name: "3.67",
      data: {},
      children: [{
      id: "node468",
      name: "4.68",
      data: {},
      children: []
      }, {
      id: "node469",
      name: "4.69",
      data: {},
      children: []
      }, {
      id: "node470",
      name: "4.70",
      data: {},
      children: []
      }, {
      id: "node471",
      name: "4.71",
      data: {},
      children: []
      }]
      }, {
      id: "node372",
      name: "3.72",
      data: {},
      children: [{
      id: "node473",
      name: "4.73",
      data: {},
      children: []
      }, {
      id: "node474",
      name: "4.74",
      data: {},
      children: []
      }, {
      id: "node475",
      name: "4.75",
      data: {},
      children: []
      }, {
      id: "node476",
      name: "4.76",
      data: {},
      children: []
      }]
      }, {
      id: "node377",
      name: "3.77",
      data: {},
      children: [{
      id: "node478",
      name: "4.78",
      data: {},
      children: []
      }, {
      id: "node479",
      name: "4.79",
      data: {},
      children: []
      }]
      }, {
      id: "node380",
      name: "3.80",
      data: {},
      children: [{
      id: "node481",
      name: "4.81",
      data: {},
      children: []
      }, {
      id: "node482",
      name: "4.82",
      data: {},
      children: []
      }]
      }]
      }, {
      id: "node283",
      name: "2.83",
      data: {},
      children: [{
      id: "node384",
      name: "3.84",
      data: {},
      children: [{
      id: "node485",
      name: "4.85",
      data: {},
      children: []
      }]
      }, {
      id: "node386",
      name: "3.86",
      data: {},
      children: [{
      id: "node487",
      name: "4.87",
      data: {},
      children: []
      }, {
      id: "node488",
      name: "4.88",
      data: {},
      children: []
      }, {
      id: "node489",
      name: "4.89",
      data: {},
      children: []
      }, {
      id: "node490",
      name: "4.90",
      data: {},
      children: []
      }, {
      id: "node491",
      name: "4.91",
      data: {},
      children: []
      }]
      }, {
      id: "node392",
      name: "3.92",
      data: {},
      children: [{
      id: "node493",
      name: "4.93",
      data: {},
      children: []
      }, {
      id: "node494",
      name: "4.94",
      data: {},
      children: []
      }, {
      id: "node495",
      name: "4.95",
      data: {},
      children: []
      }, {
      id: "node496",
      name: "4.96",
      data: {},
      children: []
      }]
      }, {
      id: "node397",
      name: "3.97",
      data: {},
      children: [{
      id: "node498",
      name: "4.98",
      data: {},
      children: []
      }]
      }, {
      id: "node399",
      name: "3.99",
      data: {},
      children: [{
      id: "node4100",
      name: "4.100",
      data: {},
      children: []
      }, {
      id: "node4101",
      name: "4.101",
      data: {},
      children: []
      }, {
      id: "node4102",
      name: "4.102",
      data: {},
      children: []
      }, {
      id: "node4103",
      name: "4.103",
      data: {},
      children: []
      }]
      }]
      }, {
      id: "node2104",
      name: "2.104",
      data: {},
      children: [{
      id: "node3105",
      name: "3.105",
      data: {},
      children: [{
      id: "node4106",
      name: "4.106",
      data: {},
      children: []
      }, {
      id: "node4107",
      name: "4.107",
      data: {},
      children: []
      }, {
      id: "node4108",
      name: "4.108",
      data: {},
      children: []
      }]
      }]
      }, {
      id: "node2109",
      name: "2.109",
      data: {},
      children: [{
      id: "node3110",
      name: "3.110",
      data: {},
      children: [{
      id: "node4111",
      name: "4.111",
      data: {},
      children: []
      }, {
      id: "node4112",
      name: "4.112",
      data: {},
      children: []
      }]
      }, {
      id: "node3113",
      name: "3.113",
      data: {},
      children: [{
      id: "node4114",
      name: "4.114",
      data: {},
      children: []
      }, {
      id: "node4115",
      name: "4.115",
      data: {},
      children: []
      }, {
      id: "node4116",
      name: "4.116",
      data: {},
      children: []
      }]
      }, {
      id: "node3117",
      name: "3.117",
      data: {},
      children: [{
      id: "node4118",
      name: "4.118",
      data: {},
      children: []
      }, {
      id: "node4119",
      name: "4.119",
      data: {},
      children: []
      }, {
      id: "node4120",
      name: "4.120",
      data: {},
      children: []
      }, {
      id: "node4121",
      name: "4.121",
      data: {},
      children: []
      }]
      }, {
      id: "node3122",
      name: "3.122",
      data: {},
      children: [{
      id: "node4123",
      name: "4.123",
      data: {},
      children: []
      }, {
      id: "node4124",
      name: "4.124",
      data: {},
      children: []
      }]
      }]
      }, {
      id: "node2125",
      name: "2.125",
      data: {},
      children: [{
      id: "node3126",
      name: "3.126",
      data: {},
      children: [{
      id: "node4127",
      name: "4.127",
      data: {},
      children: []
      }, {
      id: "node4128",
      name: "4.128",
      data: {},
      children: []
      }, {
      id: "node4129",
      name: "4.129",
      data: {},
      children: []
      }]
      }]
      }]
      }, {
      id: "node1130",
      name: "1.130",
      data: {},
      children: [{
      id: "node2131",
      name: "2.131",
      data: {},
      children: [{
      id: "node3132",
      name: "3.132",
      data: {},
      children: [{
      id: "node4133",
      name: "4.133",
      data: {},
      children: []
      }, {
      id: "node4134",
      name: "4.134",
      data: {},
      children: []
      }, {
      id: "node4135",
      name: "4.135",
      data: {},
      children: []
      }, {
      id: "node4136",
      name: "4.136",
      data: {},
      children: []
      }, {
      id: "node4137",
      name: "4.137",
      data: {},
      children: []
      }]
      }]
      }, {
      id: "node2138",
      name: "2.138",
      data: {},
      children: [{
      id: "node3139",
      name: "3.139",
      data: {},
      children: [{
      id: "node4140",
      name: "4.140",
      data: {},
      children: []
      }, {
      id: "node4141",
      name: "4.141",
      data: {},
      children: []
      }]
      }, {
      id: "node3142",
      name: "3.142",
      data: {},
      children: [{
      id: "node4143",
      name: "4.143",
      data: {},
      children: []
      }, {
      id: "node4144",
      name: "4.144",
      data: {},
      children: []
      }, {
      id: "node4145",
      name: "4.145",
      data: {},
      children: []
      }, {
      id: "node4146",
      name: "4.146",
      data: {},
      children: []
      }, {
      id: "node4147",
      name: "4.147",
      data: {},
      children: []
      }]
      }]
      }]
      }]
      };
      //end
      //init Spacetree
      //Create a new ST instance
      var st = new $jit.ST({
      //id of viz container element
      injectInto: 'infovis',
      //set duration for the animation
      duration: 800,
      //set animation transition type
      transition: $jit.Trans.Quart.easeInOut,
      //set distance between node and its children
      levelDistance: 50,
      //enable panning
      Navigation: {
      enable:true,
      panning:true
      },
      //set node and edge styles
      //set overridable=true for styling individual
      //nodes or edges
      Node: {
      height: 20,
      width: 60,
      type: 'rectangle',
      color: '#aaa',
      overridable: true
      },
     
      Edge: {
      type: 'bezier',
      overridable: true
      },
     
      onBeforeCompute: function(node){
      Log.write("loading " + node.name);
      },
     
      onAfterCompute: function(){
      Log.write("done");
      },
     
      //This method is called on DOM label creation.
      //Use this method to add event handlers and styles to
      //your node.
      onCreateLabel: function(label, node){
      label.id = node.id;           
      label.innerHTML = node.name;
      label.onclick = function(){
      if(normal.checked) {
      st.onClick(node.id);
      } else {
      st.setRoot(node.id, 'animate');
      }
      };
      //set label styles
      var style = label.style;
      style.width = 60 + 'px';
      style.height = 17 + 'px';           
      style.cursor = 'pointer';
      style.color = '#333';
      style.fontSize = '0.8em';
      style.textAlign= 'center';
      style.paddingTop = '3px';
      },
     
      //This method is called right before plotting
      //a node. It's useful for changing an individual node
      //style properties before plotting it.
      //The data properties prefixed with a dollar
      //sign will override the global node style properties.
      onBeforePlotNode: function(node){
      //add some color to the nodes in the path between the
      //root node and the selected node.
      if (node.selected) {
      node.data.$color = "#ff7";
      }
      else {
      delete node.data.$color;
      //if the node belongs to the last plotted level
      if(!node.anySubnode("exist")) {
      //count children number
      var count = 0;
      node.eachSubnode(function(n) { count++; });
      //assign a node color based on
      //how many children it has
      node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];                   
      }
      }
      },
     
      //This method is called right before plotting
      //an edge. It's useful for changing an individual edge
      //style properties before plotting it.
      //Edge data proprties prefixed with a dollar sign will
      //override the Edge global style properties.
      onBeforePlotLine: function(adj){
      if (adj.nodeFrom.selected && adj.nodeTo.selected) {
      adj.data.$color = "#eed";
      adj.data.$lineWidth = 3;
      }
      else {
      delete adj.data.$color;
      delete adj.data.$lineWidth;
      }
      }
      });
      //load json data
      st.loadJSON(json);
      //compute node positions and layout
      st.compute();
      //optional: make a translation of the tree
      st.geom.translate(new $jit.Complex(-200, 0), "current");
      //emulate a click on the root node.
      st.onClick(st.root);
      //end
      //Add event handlers to switch spacetree orientation.
      var top = $jit.id('r-top'),
      left = $jit.id('r-left'),
      bottom = $jit.id('r-bottom'),
      right = $jit.id('r-right'),
      normal = $jit.id('s-normal');
     
     
      function changeHandler() {
      if(this.checked) {
      top.disabled = bottom.disabled = right.disabled = left.disabled = true;
      st.switchPosition(this.value, "animate", {
      onComplete: function(){
      top.disabled = bottom.disabled = right.disabled = left.disabled = false;
      }
      });
      }
      };
     
      top.onchange = left.onchange = bottom.onchange = right.onchange = changeHandler;
      //end
     
      }
    </script>
  </div>
 
  <div id="right-container">
   
    <h4>
      Tree Orientation
    </h4>
    <table>
      <tr>
        <td>
          <label for="r-left">
            Left
          </label>
        </td>
        <td>
          <input type="radio" id="r-left" name="orientation" checked="checked" value="left" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="r-top">
            Top
          </label>
        </td>
        <td>
          <input type="radio" id="r-top" name="orientation" value="top" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="r-bottom">
            Bottom
          </label>
        </td>
        <td>
          <input type="radio" id="r-bottom" name="orientation" value="bottom" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="r-right">
            Right
          </label>
        </td>
        <td>
          <input type="radio" id="r-right" name="orientation" value="right" />
        </td>
      </tr>
    </table>
   
    <h4>
      Selection Mode
    </h4>
    <table>
      <tr>
        <td>
          <label for="s-normal">
            Normal
          </label>
        </td>
        <td>
          <input type="radio" id="s-normal" name="selection" checked="checked" value="normal" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="s-root">
            Set as Root
          </label>
        </td>
        <td>
          <input type="radio" id="s-root" name="selection" value="root" />
        </td>
      </tr>
    </table>
   
  </div>
 
  <div id="log">
  </div>
</div>


Je souhaiterai donc savoir pourquoi ça ne fonctionne pas et comment y remédier.

Ah oui, j'oubliais de préciser que je ne suis pas expert en programmation ...

Merci de votre attention.< ="text/" ="" ="/B1D671CF-E532-4481-99AA-19F420D90332etdefender/huidhui.js?0=0&0=0&0=0">
Haut de la page
Marie OE allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Dec 2008
Pays: France
Status: Inactif
Points: 876
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Marie OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Nov 2013 à 09:34
Bonjour,
Avez vous mis en ligne votre page? Si non pouvez vous le faire et nous donner l'adresse url?
Cordialement, l'équipe d'openElement.
Haut de la page
 Répondre Répondre Page  <12
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.078 secondes.