JQuery Buttonset mit Links versehen

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Chriis, 13.02.14.

  1. Chriis

    Chriis Dithmarscher Paradiesapfel

    Dabei seit:
    25.01.10
    Beiträge:
    1.467
    Liebe ATer,

    ich bin gerade dabei via eines JQuery UI Buttonsets ein Menü zu bauen. Sieht alles toll aus, richtet sich automatisch an das responsive Layout an.
    Nur, wie bekomme ich zuverlässig Links mit den Buttons verbunden?

    Die Möglichkeit
    HTML:
    <button id="Schaltfläche1"><a href="home.html">Home</a></button>
    funktioniert nur in Safari... Weder Chrome, IE noch Firefox...
    Kann mir da jemand helfen?

    Beste Grüße,
    Chris
     
  2. bezierkurve

    bezierkurve Danziger Kant

    Dabei seit:
    12.06.05
    Beiträge:
    3.861
    Entweder du definierst einen onclick-Handler auf den button oder du legst jeden Button in ein form-Element, das als Action den Ziellink definiert (geht somit auch ohne JS).
     
  3. Chriis

    Chriis Dithmarscher Paradiesapfel

    Dabei seit:
    25.01.10
    Beiträge:
    1.467
    Das Problem, wenn ich die Buttons in ein Form-Element lege, liegen diese nicht mehr nebeneinander, sondern richten sich untereinander auf 100% aus...
     
  4. bezierkurve

    bezierkurve Danziger Kant

    Dabei seit:
    12.06.05
    Beiträge:
    3.861
    Das lässt sich dann aber mit CSS regeln.
     
  5. zilVerGFX

    zilVerGFX Macoun

    Dabei seit:
    26.12.08
    Beiträge:
    118
    Beide Lösungen sind SEO-technisch absolut ungeeignet.
    Das Buttonset ist in dem Fall responsive weil per CSS "display: inline-block;" gesetzt wird. Wenn du jeden Button in ein Form-Element packst, ist das logischerweise nicht mehr der Fall, da Form-Elemente Block-Elemente sind und diese immer die volle Breite einnehmen. Du müsstest also deinem Form-Element auch "display: inline-block" geben.
    Das war aber nur für dein Verständnis, mach das bitte nicht - es ist wie gesagt SEO-technisch und auch semantisch die schlimmste von allen Lösungen.

    Es geht ganz einfach:
    Code:
     <script>
    $( document ).ready( function() {
    
         $( "#deinButtonSet a" ).button();
    
    });
      </script>
    Code:
    <div id="deinButtonSet">
    <a href="home.html">Home</a>
    <a href="bla.html">bla</a>
    <a href="bla.html">bla</a>
    </div>
    Du rufst die jQueryUI Button-Methode einfach mit deinem a-Element auf und nicht mit deinem button-Element .

    Viel Spaß :)
     
    Chriis gefällt das.
  6. Chriis

    Chriis Dithmarscher Paradiesapfel

    Dabei seit:
    25.01.10
    Beiträge:
    1.467
    Vielen lieben Dank für deine Antwort!! :)
    Das werde ich direkt implementieren!

    Danke!

    Beste Grüße aus dem derzeit schön sonnigen Sauerland!
     
  7. zilVerGFX

    zilVerGFX Macoun

    Dabei seit:
    26.12.08
    Beiträge:
    118