2013-12-12 9 views
11

Co jest mi potrzebne: przycisk struktury jQuery UI, taki jak ten, który można znaleźć tutaj: http://jqueryui.com/themeroller/ (spójrz na ikony ramek) w nagłówku akordeonu jQuery .Nagłówek jQuery Accordion z ikoną przycisku jQuery UI (ukryj/pokaż + najedź/kliknij)

żywo próbki: http://www.nikollr3.three.axc.nl/

(Z tego co zrozumiałem, przycisk może być naśladowane przez tag Achor z prawej klasy jQuery UI.)

Wymagania: nie chcę przycisku/ikona wyświetlana, gdy nagłówek NIE jest aktualnie wybrany. Z drugiej strony, jeśli nagłówek jest zaznaczony, a więc również pokazany jest DIV, chcę wyświetlić ikonę/przycisk. Spójrz na pierwszy obraz z lewej strony, w tym stanie nie chcę, aby przycisk "+" był wyświetlany. We wszystkich innych obrazach (gdzie jest skupiony/wybrany) chcę, żeby to było pokazane. To obecnie NIE jest realizowane; jak to zrobić?

-> Jeśli przycisk jest kliknięty, chcę, aby wyświetlał się statProp, i mam do tego funkcję showStatProp().

Problemy ja mam obecnie: Najedź „przycisk” nie robi nic, ponieważ obecnie, gdy wybrano nagłówek, te same css jest jakoś stosowane do przycisku jak do nagłówka (patrzeć na krzyż kolor przycisku: od ciemnoszarego do czarnego) (nie ma oddzielnego zawisu).

Jak się do tego dostać? obecnie utknąłem, ponieważ istnieje ograniczona dokumentacja/informacja, którą można znaleźć w Internecie na temat tej konkretnej rzeczy, którą próbuję.

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> 

enter image description here

+0

Żywo Przykładem może być całkowicie pomocny –

+0

@ZachSaucier Wszelkie wskazówki w ogóle byłoby mile widziane – Faarbhurtz

+0

nie jestem zupełnie w stanie zrozumieć pytanie, aby ci pomóc (i przyjąć także innych). Czy możesz rozwinąć to, co masz na myśli przez "Nie chcę, aby przycisk/ikona była wyświetlana, gdy nagłówek NIE jest aktualnie wybrany". Czy istnieje możliwość narysowania modelu krawędziowego pożądanego rozwiązania końcowego? – Hady

Odpowiedz

8

Chyba chcesz coś takiego:

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

Dodałem klasę CSS „działanie przycisku” przycisku.przycisk, aby ukryć w zwiniętym użytku państwowego to CSS:

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

Aby dodać efekt najechania:

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

Aby przycisk klikalne, użyć czegoś takiego:

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

Edit:

Aby naprawić stan domyślny i stan hover przycisk, użyj 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); 
} 
+0

Hej człowieku, to wygląda świetnie !, jedna uwaga, chociaż znak plus jest czarny, gdy nie jest skupiony, a nie szary (lub ciemnozielony) (spójny z nieostrym nagłówkiem akordeonu) Powinien być czarny tylko, gdy jest skupiony, jest to łatwe naprawić? – Faarbhurtz

+0

@Faarbhurtz Sprawdź zaktualizowaną wersję tutaj: http://jsfiddle.net/DAaRw/10/ – mali303

+0

Doceniam pracę, którą wykonałeś w tej sprawie, jest na najwyższym poziomie! Jednak jakoś moja witryna odmawia podania stanu .ui-state-hover do przycisku akcji, podczas gdy robi to tylko dla nagłówka H3 .. nie rozumiem tego! – Faarbhurtz

2

Ważne jest, kiedy coś javascript związany nie działa wglądu do konsoli za błędy w pierwszej kolejności.

Podczas sprawdzania konsolę na połączonego demo, zauważyłem błąd:

Uncaught SyntaxError: Unexpected token ILLEGAL

Wskazano na tej linii kodu (linia 1000 przez 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 /> 
"]; 

Konsekwencją jest to, że ciebie mają jakiś rodzaj znaków unicode, które powodują problem. Być może powoduje to podział wiersza. Tak czy inaczej, wynik jest łańcuchem otwartym i błędem, który unieważnia sprawdzany kod po tej linii. Poniższy kod, który nie jest wykonywany, stanowi większość skryptów dla strony.

Proponuję, abyś ręcznie wypisał ten wiersz, aby upewnić się, że nie ma już kodu Unicode lub zawsze możesz go uruchomić przez jsbeautifier.org/. Pamiętaj, że błędy konsoli zawsze są dobrym miejscem do rozpoczęcia.

+0

Hej, usunąłem część mojego kodu php, ponieważ nie mogę udostępnić tego fragmentu kodu, z pewnością zapomniałem usunąć odniesienie do zmiennej php. Z pewnością nie stanowi to dla mnie problemu. Dziś wieczorem usunę referencje. dzięki – Faarbhurtz

2

można zrobić tylko rozwiązanie oparte CSS.

Jeśli skontrolować HTML, który zostanie wygenerowany z biblioteki używasz, można zauważyć, że gdy przycisk jest:

  • unosił klasa ui-state-hover służy
  • Wybrana klasa ui-state-active jest wykorzystywane
  • nie zostanie wybrana, żadna z powyższych dwóch klas są wykorzystywane

Stosując powyższą wiedzę, można ukryć Edit station ale ton (plus ikona) domyślnie, a tylko żeby było widoczne przy aktywowaniu lub po wybraniu:

#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; 
}