cliquer)

Ce dont j'ai besoin: un bouton de jQuery UI framework comme celui qui se trouve ici: http://jqueryui.com/themeroller/ (regardez les icônes de cadre) dans un en-tête d'accordéon jQuery.

Exemple en direct: http://www.nikollr3.three.axc.nl/

(D'après ce que j'ai compris, un bouton peut également être imité par une étiquette Achor avec la bonne classe jQuery UI.)

Exigences: Je ne souhaite pas que le bouton / l'icône s'affiche lorsque l'en-tête n'est PAS actuellement sélectionné. D'autre part, si l'en-tête est sélectionné, et donc aussi, le DIV est affiché, je veux que l'icône / le bouton s'affiche. Regardez la première image de gauche, dans cet état, je ne veux pas que le bouton "+" soit affiché. Dans toutes les autres images (où il est concentré / sélectionné), je le souhaite. Ce n'est PAS actuellement implémenté; Comment faire cela?

-> Si le bouton est cliqué, je veux que statProp soit affiché, j'ai une fonction showStatProp () pour cela.

Problèmes que j'ai actuellement: le bouton «sur le bouton» ne fait rien , car actuellement, lorsque l'en-tête est sélectionné, le même css est en quelque sorte appliqué au bouton comme à l'en-tête (regardez la couleur croisée du bouton: gris foncé À noir) (il n'y a pas de bas de page).

Comment s'y rendre? Je suis actuellement bloqué car il existe une documentation / une information limitée sur Internet concernant cette chose spécifique que j'essaie.

function showStatProp() { if(document.getElementById("statProp").style.display == "none") { document.getElementById("statProp").style.display = 'block'; } else { document.getElementById("statProp").style.display = 'none'; } }

HTML:

 <body onkeydown="controlCheck(event)" onkeyup="clearPress()" > <div id="application" style="position:absolute"> <div id="accordion"> <h3 id="clickStat">Stations <span style="float:right;" class="ui-state-default ui-corner-all"> <a class="ui-icon ui-icon-plusthick btpad" href="/getPunten.php">Edit</a> </span></h3> <div id="stations"> <input type="text" id="stations_ac" onclick="this.value='';" /> <div id="selectedStationDiv"> </div> <hr> <div id="statProp" style="display:none;"> <p>Name: <input type="text" style="float:right; clear:right" size="19" id="statNam" onclick="this.value='';" /></p> <p style="margin-top:15px"> Type: <select id ="statTyp" style ="float:right" onchange=""> <option></option> <option title="Test">T</option> </select> </p> <p style="margin-top:15px"> Admtyp: <select id ="admtyp" style ="float:right" onchange="FilterByToestanden()"> <option></option> <option title="Alarm">A</option> <option title="Alarm">D</option> <option title="Urgent alarm">U</option> </select> </p> <p>Image: <input type="text" id="statBildnam" size="12" style ="float:right;text-transform: uppercase"></p> <p id="devText">Text: <input type="text" style="float:right; clear:right" id="texts_ac" onclick="this.value='';" /></p> <p> <p id ="respLine">Responsible: <select id="statResp" style="margin-bottom:10px;margin-top:6px;"><option>WERKHUIS-EMG-WEVELGEM</option></select></p> <button id="btnCrtStat" onClick="createStation()" type="button" style="margin-left:26px;margin-top:-3px">Create</button> </div> </div> <h3 id="clickImages" onclick="listImages()">Images</h3> <div id="imagesList" style="overflow:auto"> <ul id='imagesUL'></ul> <button onClick="addImage()" type="button" style="margin-left:26px;margin-top:-3px">Add image</button> </div>

Entrez la description de l'image ici

Je suppose que vous voulez quelque chose comme ceci:

http://jsfiddle.net/mali303/gxemn34h/

J'ai ajouté un «bouton d'action» de classe CSS au bouton. Pour masquer le bouton en état effondré, utilisez ce CSS:

 #accordion .action-button { float: right; display: none; } #accordion .ui-state-active .action-button { display: inline; }

Pour ajouter un effet de survoltage:

 $('#accordion .action-button').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } );

Pour que le bouton soit cliquable, utilisez quelque chose comme ceci:

 $('#accordion .action-button a').click(function () { self.location.href = $(this).attr("href"); });

Modifier:

Pour corriger les états par défaut et par défaut du bouton, utilisez ce CSS: http://jsfiddle.net/mali303/vf4q0eox/1/

 #accordion .action-button .ui-icon { background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_888888_256x240.png); } #accordion .action-button.ui-state-hover .ui-icon { background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_454545_256x240.png); }

Il est important lorsque quelque chose de javascript ne fonctionne pas pour inspecter la console pour des erreurs en premier.

Lors de l'inspection de la console sur votre démo liée, j'ai observé une erreur:

Uncaught SyntaxError: jeton inattendu ILLÉGAL

Il a souligné cette ligne de code (ligne 1000 par inspection)

 var jDescriptions= ["<br /> <b>Warning</b>: implode() [<a href='function.implode'>function.implode</a>]: Invalid arguments passed in <b>/home/nikollr3/domains/nikollr3.three.axc.nl/public_html/index.php</b> on line <b>1007</b><br /> "];

L'implication est que vous avez une sorte de caractère unicode qui cause le problème. Peut-être que cela entraîne une rupture de ligne. Quoi qu'il en soit, le résultat est une chaîne à extrémité ouverte et une erreur qui annule le code examiné après cette ligne. Le code suivant qui ne s'exécute pas est la majorité des scripts pour la page.

Je suggère que vous dactylographiez manuellement cette ligne afin de s'assurer que l'unicode est parti, ou vous pouvez toujours essayer de l'exécuter via jsbeautifier.org/ . Gardez à l'esprit que les erreurs de console sont toujours un bon point de départ.

Vous pouvez faire une seule solution basée sur CSS.

Si vous inspectez le code HTML généré à partir de la bibliothèque que vous utilisez, vous remarquerez que lorsqu'un bouton est:

Passé, la classe ui-state-hover est utilisée
Sélectionné, la classe ui-state-active est utilisée
Non sélectionné, aucune des deux classes ci-dessus n'est utilisée

À l'aide de la compréhension ci-dessus, vous pouvez cacher le bouton Modifier la station (icône plus) par défaut, et ne le rendre visible que sur le vol stationnaire ou lorsque sélectionné:

 #clickStat span.ui-state-default { display: none; } #clickStat.ui-state-hover span.ui-state-default, #clickStat.ui-state-active span.ui-state-default { display: block; }