Die Top-Neuheiten und neuen Beiträge


Hier könnte direkt auf eine separate Seite verwiesen werden
Mit Tipps, wie man diese Seite mitgestalten kann

Die Favoriten / auch Favoriten Anderer: besonders beliebt

Hier werden die Artikel im Warenkorb angezeigt

UIKIT

Aktuelle Version vom 29.06.2021: 3.7.0
Achtung: Canvas-Navi wird in der aktuellen Version nicht korrekt dargestellt. Die Pfeile werden nicht via float:right rechts positioniert, sondern direkt hinter dem Navi-Namen.
Verwenden Sie hierzu die Version: 3.6.22.

Zum Changelog und Download

Formulare mit UIKIT gestalten

Input

<div class="uk-width-1-1">
   <input class="uk-input" type="text" name="feldname" id="feldname" value="<?php echo $m1[feldname]; ?>" placeholder="feldname">
</div>

Mehrspaltige Inputfelder 

<div class="uk-width-1-2@s uk-margin-small-top">
    <label class="uk-form-label" for="feldname">Name</label>
    <div class="uk-form-controls">
        <input class="uk-input" type="text" name="feldname" id="feldname" value="<?php echo $m1[feldname]; ?>">
    </div>
</div>

Textarea

<div class="uk-width-1-1 uk-margin-small-top">
<textarea name="feldname" rows="5" class="uk-textarea uk-form-small uk-resize-vertical" placeholder="feldname"><?php echo $m1[feldname]; ?></textarea>
</div>

Checkboxen

<div class="uk-width-1-2@s uk-margin-small-top">
<?php if ($m1[feldname]=="1") { $auswahl="checked"; } else { $auswahl=""; } 	?>
<label>
  <input class="uk-checkbox" type="checkbox" name="feldname" id="feldname" value="1" <?php echo $auswahl; ?>> Name
</label>
</div>  

Select

<div class="uk-width-1-2@s uk-margin-small-top">
    <label class="uk-form-label" for="feldname">Name</label>
    <div class="uk-form-controls">
        <select name="feldname" id="feldname" class="uk-select">
        </select> 
    </div>
</div>

Submit

<div class="uk-width-1-1">
<input type="hidden" name="act" value="ACTNAME">
<input type="hidden" name="variable" value="<?php echo $variable; ?>">
<input type="submit" value="speichern" class="uk-button uk-button-primary" tabindex="-1">
</div>

 

UIKIT-Funktionsbeschreibung Formularfelder

.uk-input

Add this class to <input> elements.

.uk-select

Add this class to <select> elements.

.uk-textarea

Add this class to <textarea> elements.

.uk-radio

Add this class to <input type="radio"> elements to create radio buttons.

.uk-checkbox

Add this class to <input type="checkbox"> elements to create checkboxes.

.uk-range

Add this class to <input type="range"> elements to create range forms.

.uk-form-danger

Add this class to notify the user that the value is not validated.

.uk-form-success

Add this class to notify the user that the value is validated.

.uk-form-large

Add this class to make the element larger.

.uk-form-small

Add this class to make the element smaller.

.uk-form-width-large

Applies a width of 500px.

.uk-form-width-medium

Applies a width of 200px.

.uk-form-width-small

Applies a width of 130px.

.uk-form-width-xsmall

Applies a width of 40px.

.uk-form-blank

ohne Rahmen

.uk-form-stacked

Add this class to display labels on top of controls.

.uk-form-horizontal

Add this class to display labels and controls side by side.

.uk-form-label

Add this class to define form labels.

.uk-form-controls

Add this class to define form controls.

Elemente aufgrund Bildschirmbreite ein- und ausblenden

Um die Lesbarkeit auf kleineren Bildschirmen zu gewährleisten, sollten nicht zwingend benötigte Elemente ausgeblendet werden.
Mit UIkit bieten sich zwei Varianten an:

uk-visible@s
Element wird angezeigt, wenn das Browserfenster mindestens 640 Pixel breit ist.

uk-hidden@s
Element wird ausgeblendet, wenn das Browserfenster mindestens 640 Pixel breit ist.

Der Wert hinter @ gibt die Bildschirmbreite an:
s: >= 640px
m: >= 960px
l: >= 1200px;
xl: >= 1600px

Da mobile Geräte, wie z.B. das iPhone, lediglich 320 bis 375px aufweisen, ist die Nutzung nur dann sinnvoll,
wenn aus die Klassen uk-width-1-1 oder wk-width-1-2@s eingesetzt werden.

getuikit.com/docs/visibility

UIkit: Tabulator als Navigation einsetzen

Anwendungsbeispiel
<div class="uk-overflow-auto">
<ul class="uk-child-width-expand" uk-tab="animation: uk-animation-fade">
    <li <?php echo $tabaktiv1; ?>><a href="">1</a></li>
	<li <?php echo $tabaktiv2; ?>><a href="">2</a></li>
    <li <?php echo $tabaktiv3; ?>><a href="">3</a></li>
</ul>
<ul class="uk-switcher uk-margin">
<li>Inhalte 1<li>
<li>Inhalte 2<li>
<li>Inhalte 3<li>
</ul>
</div>

Bestimmten Tab aktiv schalten,
wenn Formular aktiviert wurde:

$tabaktiv1="";
$tabaktiv2="";
$tabaktiv3="";

if ($_POST[tab]=="2"){
$tabaktiv2="class=\"uk-active\"";
} else if ($_POST[tab]=="3"){
$tabaktiv3="class=\"uk-active\"";
} else {
$tabaktiv1="class=\"uk-active\"";
}

 

Elemente ein-/ausklappen

<div class="toggle1">
   <p>Diesen Bereich sofort anzeigen</p>
   <button class="uk-button uk-button-link" type="button" uk-toggle="target: .toggle1">
      mehr ...
   </button>
</div>
<div class="toggle1" hidden>
   <p>Diesen Bereich bei Bedarf einblenden</p>
   <button class="uk-button uk-button-link" type="button" uk-toggle="target: .toggle1">
      ausblenden
   </button>
</div>

 

UIkit: Schatten

UIkit bietet mehrere Möglichkeiten, Boxen mit Schatten zu versehen.
Hier die schönsten Varianten.

Box shadow bottom

Auffälliger Schatten unterhalb der Box lässt das Element schweben.

<div class="uk-box-shadow-bottom uk-box-shadow-small uk-width-1-2@s uk-text-center">
    <div class="uk-background-default uk-padding-large">
        Box shadow bottom
    </div>
</div>

getuikit.com


Hover

Animation per Mouseover

<div class="uk-child-width-1-2@s uk-text-center" uk-grid>
  <div>
    <div class="uk-box-shadow-small uk-box-shadow-hover-large uk-padding">
    Small + Hover Large
    </div>
  </div>
  <div>
    <div class="uk-box-shadow-xlarge uk-box-shadow-hover-medium uk-padding">
    XLarge + Hover Medium
    </div>
  </div>
</div>

 

Elemente sortieren mit uk-sortable

Mit Hilfe von UIKIT können Elemente durch Click und Pull sortiert werden.
Hier erfährst Du, wie DU uk-sortable einsetzen kannst und die Änderung in der Datenbank speicherst.

1. Elemente markieren

<ul id="sortable" class="uk-child-width-1-2@s uk-child-width-1-2@m uk-child-width-1-3@l 
uk-grid-medium uk-text-left" 
<?php if ($mobileversion!=1) { ?>
uk-sortable="handle: .KLASSE; cls-custom: uk-card-default" 
<?php } ?>
uk-grid="masonry: true">

	<?php
	$sql="SELECT * FROM `TABELLE` 
	WHERE `FELDNAME` = 'WERT' ORDER BY `FELDNAME-POS` ASC"; 
	foreach ($pdo->query($sql) as $sort) {
		?>
		<li id="<?php echo $sort['FELDNAME-ID']; ?>">
			<div class="KLASSE">
				INHALT
			</div>
		</li>
		<?php
	}
	?>
</ul>

Erforderliche Werte:

  • id="sortable" => Bereich der Sortierung, wird auch im nachfolgenden Script verwendet
  • uk-sortable => Einstellungen

2. Ajax-Script einbinden

<script>
UIkit.util.on('sortable', 'moved', function (item) {
   const new_order = item.detail[0].items.map(el => el.id);
   $.ajax({
      type: "POST",
      url: "/pfad/zur/php-sortier-datei.php",
      data: "action=ACTNAME&wert1=<?php echo $wert1; ?>
            &wert2=<?php echo $wert2; ?>
            &order=" + new_order
   });
});
</script>

Erforderliche Werte:

  • sortable => Bereich, der sortiert werden soll. Siehe hierzu auch Punkt 1.
  • url: Pfad zur Datei, in welcher die Änderung gespeichert wird
  • data: alle Werte die zur Ermittlung der Sortierreihenfolge übermittelt werden müssen

3. PHP-Script php-sortier-datei.php

switch ($_POST['action']) {
   case "ACTNAME":
      $sql="SELECT `FELD-ID` FROM `TABELLE` 
      WHERE `FELDNAME1` = '$_POST[WERT1]' AND `FELDNAME2`='$_POST[WERT1]'";
      $statement = $pdo->prepare($sql);
      $statement->execute(); 
      $anzahl = $statement->rowCount();
      $elemid = explode(",", $_POST['order']);
      for ( $c = 0; $c < $anzahl; $c++ ) {
         $sortelem = $elemid[$c];
         $sql="UPDATE `TABELLE` SET `FELDNAME-POS`='$c' WHERE `FELDNAME-ID`='$sortelem'";
         $statement = $pdo->prepare($sql);
         $statement->execute();
      }
      return;
      break;
}

Erforderliche Werte:

  • Berücksichtigung ACTNAME
  • Anzahl der zu sortierenden Felder berechnen

iFrame responsive anpassen

Einfach bei UIkit-unterstützten Seiten, die Klasse uk-responsive angeben!

Es ist uns wichtig, Ihre Daten zu schützen

Wir verwenden Cookies, um Ihnen ein optimales Webseiten-Erlebnis zu bieten. Das sind einerseits für den Betrieb der Seite notwendige Cookies, andererseits solche, die für Statistikzwecke, für die Anzeige von Videos und Kartenmaterial gesetzt werden. Sie können selbst entscheiden, welche davon Sie zulassen möchten. Bitte beachten Sie, dass auf Basis Ihrer Einstellungen eventuell nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.
Datenschutzeinstellungen anpassen