aide script genre organigrame |
Répondre | Page <12 |
Auteur |
Sujet Recherche Options des sujets
|
wolf
Groupie Depuis le: 01 Feb 2012 Pays: Reunion Status: Inactif Points: 91 |
Options des messages
Thanks(0)
|
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 |
|
MicroVinc
Moderator Group Depuis le: 21 Août 2012 Pays: Bretagne Status: Inactif Points: 4460 |
Options des messages
Thanks(0)
|
Bonjour, en jquery avec ce genre de fonction, à adapter (en rouge):
Code testé et fonctionnel
Edité par MicroVinc - 02 Dec 2012 à 19:34 |
|
Donoma
Newbie Depuis le: 12 Sep 2013 Status: Inactif Points: 9 |
Options des messages
Thanks(0)
|
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"> |
|
Marie OE
Admin Group Depuis le: 05 Dec 2008 Pays: France Status: Inactif Points: 876 |
Options des messages
Thanks(0)
|
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.
|
|
Répondre | Page <12 |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |