j-NavLayout

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

Μια απλή και πλήρως αντιδραστική πλοήγηση διάταξη.

Καλό να ξέρεις:

Το path {Boolean} εμφανίζει τον πίνακα πλοήγησης στις διατάξεις προβολής που καθορίζονται στην επιλογή επιλογής hide
<section> Πρέπει να υπάρχει πλοήγηση
Το <main> πρέπει να περιέχει περιεχόμενο

ΕΠΙΤΡΟΦΗ:

width {Number} ένα μέγεθος πλοήγησης (προεπιλεγμένο: 250)
Το hide {String} κρύβει την πλοήγηση σε καθορισμένους τρόπους προβολής (προεπιλογή: xs,sm)
Το autoresize {Boolean} επιτρέπει την αυτοαποχώρηση (προεπιλεγμένη: true)
Η θέση πλοήγησης position {String} (προεπιλεγμένη: left)
Το margin {Number} προσθέτει περιθώριο για το height (προεπιλεγμένο: 0)
Το parent {String} μπορεί να περιέχει τον επιλεκτή parent, window ή jQuery για τη μέθοδο closest (προεπιλογή: window)

Χρησιμοποιήστε το με <ui-component name="navlayout">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

example.html

<style>
	html, body { margin: 0; padding: 0; }
</style>

<ui-component name="navlayout" path="common.menu" config="parent:window;hide:xs" class="invisible">

	<section style="background-color:blue;color:#FFF">
		Navigation
	</section>

	<main style="background-color:red;color:#FFF">
		Main body
	</main>

</ui-component>

<script>

	var common = { menu: false };

	setInterval(function() {
		var path = 'common.menu';
		SET(path, !GET(path));
	}, 3000);

</script>