Javascript Module

Button

In Anwendungen für die ein veränderbarer Buttonstate, ein ToogleButton oder eine Button-Sectioned mit radio oder check Funktion benötigt werden, steht das jQuery-Plugin: button() zur Verfügung.

Dynamisch veränderbare Buttenstates

Für alle Buttonelemente ist es möglich die States active, disable, enable, default zusetzen so wie die States Active und Disabled mit toggleactive und toggledisable zu Togglen.

Anmerkung: Der State enable ermöglicht es Aktive Button die Disabled wurde wieder in den aktiven Zustand zu setzen. Der State default dient als Reset.

Die Einbindung für States ist wie folgt:

<button id="button-b" class="btn btn-default" >Active</button>
<button id="button-c" class="btn btn-default" >Disabled</button>

$(document).ready(function() {
  $('#button-a').button('default')
  $('#button-b').button('active')
  $('#button-c').button('disable')
  $('#button-d').button('enable')
})

Die Einbindung für Toogle das Toggeln von States ist wie folgt:

<button id="button-e" class="btn btn-default">Toggle Active</button>
<button id="button-f" class="btn btn-default">Toggle Disable</button>
<button id="button-g" class="btn btn-default">Button</button>

$(document).ready(function() {
  $('#button-e').click(function (e) {
    $('#button-g').button("toggleactive");
  })
  $('#button-f').click(function (e) {
    $('#button-g').button("toggledisable");
  })
})

Toogle Button

Durch das Verwenden des Data-Attributes data-toggle="button" erhällt ein Button automatisch ein Toggle-Verhalten. Zusätzlich kann durch das Data-Attribut data-callback="$meineFunktion" eine Callbackfunktion bestimmt werden die bei dem event on press aufgerufen wird. Übergeben werden hierbei das aufrufende Element und der state

Die Einbindung für einen Togglebutton ist wie folgt:

<button class="btn btn-default" data-toggle="button" >Togglebutton</button>
<button id="button-h" class="btn btn-default" data-toggle="button" data-callback="myFunction" >Togglebutton</button>

$(document).ready(function() {
  myFunction = function (element, event) {

  }
}

Radio Button-Sectioned

Durch das Verwenden des Data-Attribut data-toggle="buttonsectioned-radio" erhält eine ButtonSectioned automatisch ein Radio-Button verhalten. Zusätzlich kann durch das Data-Attribut data-callback="$meineFunktion" eine Callback-Funktion eine Callback-Funktion aufgerufen werden. Übergeben werden hierbei das aufrufende Element und der state.

Tipp: Durch das Verwenden des Data-Attribut data-callback-states="all" in dem umschließenden Element können die States aller Elemente die sich bei der Interaktion verändern ausgegeben werden.

Die Einbindung für einen Buttongroup mit Radio Verhalten ist wie folgt:

<div class="btn-sectioned" data-toggle="buttonsectioned-radio">
  <button class="btn btn-default" data-callback="myFunctionA">Button 1</button>
  <button class="btn btn-default" data-callback="myFunctionA">Button 2</button>
  <button class="btn btn-default" data-callback="myFunctionA" disabled>Button 3</button>
  <button class="btn btn-default" data-callback="myFunctionA">Button 4</button>
</div>

$(document).ready(function() {
  var text = ''
  myFunctionA = function (element, event) {
    text += 'callback from ' + element.text() + ' '+ event + '<br/>'
    $('#callbackOutput-a').html(text)
  }
}

Die Einbindung für einen Button-Sectioned mit Checkbox Verhalten ist wie folgt:

<div class="btn-sectioned" data-toggle="buttonsectioned" data-callback-states="all">
  <button class="btn btn-default" data-callback="myFunctionB">Button 1</button>
  <button class="btn btn-default" data-callback="myFunctionB">Button 2</button>
  <button class="btn btn-default" data-callback="myFunctionB" disabled>Button 3</button>
  <button class="btn btn-default" data-callback="myFunctionB">Button 4</button>
</div>

$(document).ready(function() {
  var textB = ''
  myFunctionB = function (element, event) {
    textB += 'callback from ' + element.text() + ' '+ event + '<br/>'
    $('#callbackOutput-b').html(textB)
  }
}

Expandable

In Anwendungen für die Expandable Elemente benötigen dynamisch ein und ausgeblendet werden müssen, steht das jQuery-Plugin: expandable() zur Verfügung.

Expandable

Eine Expandable Element wird durch einmal initialisiert und dann durch die Funktionen toggleVisibility, visible, hidden gesteuert.

Die Einbindung für Expandable ist wie folgt:

Expandable 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<button id="toggleBtn" class="btn btn-default active" aria-pressed="true" data-toggle="button" data-callback="expandSingle">Toogle Expandable</button>
<button id="exp-visible" class="btn btn-default btn-icon" title="Icon-Button">
  <i class="icon icon-maximize" aria-hidden="true"></i>
</button>
<button id="exp-hidden" class="btn btn-default btn-icon" title="Icon-Button">
  <i class="icon icon-minimize" aria-hidden="true"></i>
</button>

<div id="exp-single">
  <h4>Expandable 1</h4>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<img src="assets/play.jpg" width="252" height="168" alt="Beispielbild">
</div>

$(window).load(function() {
  $('#exp-single').expandable();

  $('#exp-visible').click(function (e) {
     $('#exp-single').expandable("visible")
     $('#toggleBtn').button('active')
  })
  $('#exp-hidden').click(function (e) {
    $('#exp-single').expandable("hidden");
    $('#toggleBtn').button('default')
  })
  expandSingle = function () {
    $('#exp-single').expandable("toggleVisibility");
  }
})

Expandable Group

Eine Expandable Group wird durch eine Klasse definiert, die jedem Gruppenelement gegeben wird und die einmalig als option initialisiert wird.

Tipp: Durch das Verwenden einer Klasse, um ein Expandable Element einer Gruppe zugehörig zu machen, müssen die Expandable Elemente nicht auf einander folgen. Zu dem können einzelne Expandable Elemente unabhängig von der Gruppenzugehörigkeit durch visible und hidden gesteuert werden.

Die Einbindung für eine Expandabe Group ist wie folgt:

Expandable 1

Expandable 2

Expandable 3

Expandable 4

<div class="btn-sectioned" data-toggle="buttonsectioned-radio">
  <button class="btn btn-default active" data-callback="myFunctionExpand">Button 1</button>
  <button class="btn btn-default" data-callback="myFunctionExpand">Button 2</button>
  <button class="btn btn-default" data-callback="myFunctionExpand" disabled>Button 3</button>
  <button class="btn btn-default" data-callback="myFunctionExpand">Button 4</button>
</div>
<p id="callbackOutput-a" class="text-xsmall"></p>

<div id="exp-a" class="expGroup">
  <h4>Expandable 1</h4>
  <p>Lorem ipsum dolor sit amet…</p>
</div>
<div id="exp-b" class="expGroup">
  <h4>Expandable 2</h4>
  <p>Lorem ipsum dolor sit amet…</p>
</div>

$(window).load(function() {
  $('.expGroup').expandable({option:{group:'expGroup'}});

  myFunctionExpand = function (element, event) {
    var elmTxt = element.text()
    switch (elmTxt) {
    case 'Text A':
      $('#exp-a').expandable("toggleVisibility");
      break
    case 'Text B':
      $('#exp-b').expandable("toggleVisibility");
      break
    }
  }
}

ToTop

In Anwendungen mit großen Seitenlängen, ist es oft nützlich eine Funktion anzubieten die dem Benutzer erlaubt mit einem Klick an den Seitenanfang zu scrollen. Zur Erstellung eines solchen Scrollverhaltens steht ein jQuery-Plugin: toTop() zur Verfügung. Die Einbindung ist wie folgt:

$(document).ready(function() {
  $('body').toTop()
})

Das jQuery-Plugin: toTop() verfügt zu dem über Optionen mit denen das verhalten und aussehen angepasst werden kann.

$(document).ready(function() {
  $('body').totop({
    option:{
      buttonText: { de:'Nach Oben', en:'To Top' },
      language: 'auto',
      smallButton: false,
      scrollOffset: 50,
      scrollTimeMax: 800,
      scrollTimeMin: 250,
      pixelPerSecond: 4000,
      mobileBreakpoint: 639,
      dynamicVisibility: true,
      dynamicVisibilityTime: 2000,
      theme: '',
      containerType: 'container-fixed'
    }
  })
})

Optionen
1	buttonText	Object	{ de:'Nach Oben', en:'To Top' }	Buttontext in den benötigten Sprachen
2	language*	String		Der Buttontext wird aus dem Doc-Header gelesen kann aber selber definiert werden!
3	smallButton	Bool	false	Desktop Buttontyp Icon Only oder Icon & Text Button
4	scrollOffset	Number	50	Offset in Px ab wann der Button angezeigt wird
5	scrollTimeMax	Number	800	Maximale Zeit die das scrollen benötigt
6	scrollTimeMin	Number	250	Minimale Zeit die das scrollen benötigt
7	pixelPerSecond	Number	4000	Pixel die pro Sekunde gescrollt werden
8	mobileBreakpoint	Number	639	Breakpoint in Px an dem der Icon Only Button angezeigt wird
8	dynamicVisibility	Bool	true	Interaktions basiertes Einblenden und Ausblenden. Nicht auf Mobile!
9	dynamicVisibilityTime	Number	2000	Delay in Millisekunden für interaktions basiertes Ausblenden
10	theme	String		Umschließende Css Klasse für optionales Styling Theme z.B. dark
11	containerType	String	container-fixed	container-fixed, container-liquid - Die Position des Button kann je nach GridTyp angepasst werden

Modal Dialog

Aufbau des Dialogs

<div class="modal fade" aria-labelledby="exampleModalLabel"
     aria-hidden="true" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">x</span>
              <span class="sr-only">Close</span>
            </button>
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel">Headline</h4>
            </div>
            <div class="modal-body">
                <p>Content...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">Schließen</button>
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

Initialisierung des Dialogs

<!-- Der Button öffnet den Modal-Dialog -->
<button type="button" class="btn btn-default" data-toggle="modal"
        data-target="#modal-init-demo">Modal-Dialog öffnen</button>

<!-- Der Modal-Dialog -->
<div class="modal fade" aria-labelledby="exampleModalLabel"
     aria-hidden="true" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">x</span>
              <span class="sr-only">Close</span>
            </button>
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel">Headline</h4>
            </div>
            <div class="modal-body">
                <p>Content...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">Schließen</button>
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

Datenmanagement

Oft sollen Daten im Modal-Dialog von außen beeinflussbar sein, beispielsweise wenn ein Formular im Dialog vorausgefüllt werden soll.

In einem zweiten Schritt sollen beim Absenden des Formulars die Daten verarbeitet werden können.

Das folgende Beispiel zeigt diese Fälle:

<!-- Der Button öffnet den Modal-Dialog -->
<button type="button" class="btn btn-default" data-toggle="modal" data-init-value="1"
  data-target="#modal-init-demo2">Modal-Dialog mit &lt;1&gt; öffnen</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-init-value="2"
  data-target="#modal-init-demo2">Modal-Dialog mit &lt;2&gt; öffnen</button>

<!-- Der Modal-Dialog -->
<div id="modal-init-demo2" class="modal fade"
     aria-labelledby="exampleModalLabel3" aria-hidden="true" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <form name="exampleModalForm3">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">x</span>
          <span class="sr-only">Close</span>
        </button>
        <div class="modal-header">
          <h4 class="modal-title" id="exampleModalLabel3">Headline</h4>
        </div>
        <div class="modal-body">
          <div class="form-input-set">
            <label for="text-modal">Value</label>
            <input type="text" class="form-input"
                   name="text-modal" id="text-modal">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default"
                  data-dismiss="modal">Schließen</button>
          <button type="submit" class="btn btn-default">Senden</button>
        </div>
      </form>
    </div>
  </div>
</div>

JavaScript:

// Daten übermitteln
$('#modal-init-demo2').on('show.tc.modal', function (event) {
  var $button = $(event.relatedTarget) // der betätigte Button
  var value = $button.data('init-value') // Wert aus HTML5-Data auslesen

  // Wert in Modal-Formuar übernehmen
  var $modal = $(this)
  $modal.find('input[name="text-modal"]').val(value)
})

// Daten abholen
$('form[name="exampleModalForm3"]').on('submit', function (event) {
  event.preventDefault() // Absenden des Formular unterdrücken

  var $modal = $('#modal-init-demo2')
  $modal.modal('hide') // den Modal-Dialog schließen

  var $form = $(this)
  alert($form.serialize()) // Daten aus dem Formular übernehmen
})

Größe

Die Größe des Modal-Dialogs kann mit den CSS-Klassen .modal-small und .modal-large beeinflusst werden:

<!-- groß -->
<div class="modal fade" aria-labelledby="exampleModalLabel4"
    aria-hidden="true" role="dialog">
  <div class="modal-dialog modal-large">
    ...
  </div>
</div>

<!-- klein -->
<div class="modal fade" aria-labelledby="exampleModalLabel4"
    aria-hidden="true" role="dialog">
  <div class="modal-dialog modal-small">
    ...
  </div>
</div>

Verwendung

Der Modal-Dialog kann derzeit über zwei Schnittstellen gestartet werden.

HTML Attribut

<button type="button" data-toggle="modal" data-target="#eg-modal">Modal-Dialog</button>

JavaScript

$('#eg-modal').modal(options)

Optionen
Name	Typ	Standard	Beschreibung
backdrop	Bool	true	Gibt an ob der Modal-Dialog durch einen Hintergrund abgesetzt werden soll. Der Modal-Dialog wird bei einem Klick auf den Hintergrund geschlossen.
keyboard	Bool	true	Gibt an, ob der Modal-Dialog durch drücken der ESC-Taste geschlossen wird.
show	Bool	true	Gibt an ob der der Modal-Dialog beim Initialisieren angezeigt werden soll.

// Initialisieren des Modal-Dialogs ohne direkte Anzeige
$('#eg-modal').modal({ show: false })

Events
Typ	Beschreibung
show.tc.modal	Dieses Event tritt noch vor dem eigentlichen Anzeigen des Modal-Dialogs auf.
shown.tc.modal	Dieses Event tritt auf, wenn der Modal-Dialog fertig angezeigt wird.
hide.tc.modal	Dieses Event tritt noch vor dem eigentlichen Schließen des Modal-Dialogs auf.
hidden.tc.modal	Dieses Event tritt auf, wenn der Modal-Dialog fertig geschlossen wurde.

$('#eg-modal').on('hide.tc.modal', function (event) {
  // ...
})

Tooltip

Tooltips sind immer dann nützlich, wenn zusätzliche Informationen vorliegen die beschreibend oder zweitrangig sind. Um diese Informationen im Kontext und bei Interaktion einzublenden kann das jQuery-Plugin qtip() verwendet werden.

Info: Es handelt sich dabei um das freie Plugin qTip2 (http://qtip2.com/). Alle Optionen, Events und andere Möglichkeiten können in der Dokumentation des Plugins nachgelesen werden.

Es wird direkt auf das Interaktionselement angewendet:

$(document).ready(function() {
  $('#my-tooltip').qtip()
})

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<a href="#" id="my-tooltip" title="This is a tooltip">labore</a>

Info-Flags

$(document).ready(function() {
  $('#my-info-flag').qtip({
      content: {
          title: 'Info Flag',
          text: 'Info Flags are plain text...'
      }
  })
})

<a href="#" id="my-info-flag">labore</a>

Anmerkung Barrierefreiheit: Da Tooltips meist nur über Maus-Interaktionen aktiv werden sollten darin nur unwichtige oder unterstützende Informationen hinterlegt sein. Tooltips sollten nicht Voraussetzung für die Benutzerführung sein.