Tutorial jQuery - Toggle - NOF 2013 in HTML5 - ich beschreibe hier genau meinen Einbau. Alle Style-Anweisungen können natürlich geändert werden

Bitte fügt zunächst die notwendigen Links zu den jQuery-Dateien ein. Es ist notwendig diese Dateien in den <>Code Editor der jeweiligen Seite einzufügen, den Ihr unten links auf jeder Arbeitsseite findet. Diese Skripte korrespondieren nicht mit den NOF eigenen Javascripts. Fügt diese Verlinkungen dort in den [customs4] Bereich ein, damit diese unter den JS-Dateien von NOF stehen.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Nun fügt Ihr folgende Style-Anweisung in die HTML des Layouts ein.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen.

<style>
   .toggler {
      width: 500px;
      height: 200px;
   }
   #button {
      padding: .5em 1em;
      text-decoration: none;
   }
   #effect {
      position: relative;
      width: 240px;
      height: 135px;
      padding: 0.4em;
   }
   #effect h3 {
      margin: 0;
      padding: 0.4em;
      text-align: center;
   }
</style>

Zieht Euch ein Textfeld an der Position, wo dieses Skript angezeigt werden soll, auf und fügt das Skript unten in den “HTML-Code Editor” des Textfeldes ein.

<script>
    $(function() {
     // run the currently selected effect
     function runEffect() {
      // get effect type from
      var selectedEffect = $( "#effectTypes" ).val();
      // most effect types need no options passed by default
      var options = {};
      // some effects have required parameters
      if ( selectedEffect === "scale" ) {
       options = { percent: 0 };
       } else if ( selectedEffect === "size" ) {
        options = { to: { width: 200, height: 60 } };
       }
       // run the effect
       $( "#effect" ).toggle( selectedEffect, options, 500 );
      };
      // set effect from select menu value
      $( "#button" ).click(function() {
      runEffect();
      return false;
     });
    });
</script>

<div class="toggler">
    <div id="effect" class="ui-widget-content ui-corner-all">
     <h3 class="ui-widget-header ui-corner-all">Toggle</h3>
     <p>
     Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
     </p>
    </div>
</div>

<select name="effects" id="effectTypes">
    <option value="blind">Blind</option>
    <option value="bounce">Bounce</option>
    <option value="clip">Clip</option>
    <option value="drop">Drop</option>
    <option value="explode">Explode</option>
    <option value="fold">Fold</option>
    <option value="highlight">Highlight</option>
    <option value="puff">Puff</option>
    <option value="pulsate">Pulsate</option>
    <option value="scale">Scale</option>
    <option value="shake">Shake</option>
    <option value="size">Size</option>
    <option value="slide">Slide</option>
</select>
<a href="#" id="button" class="ui-state-default ui-corner-all">Zeige Effekt</a>

Guckt bitte für weiter Einstellungen hier: jqueryui.com/toggle/

Viel Erfolg!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik