j-FloatingBox

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

Υποστήριξη - Dark Mode

ΕΠΙΤΡΟΦΗ:

zindex {Number} ένας προεπιλεγμένος δείκτης z για τις φόρμες (προεπιλογή: 10)

Μέθοδοι:

Το component.show(opt) δείχνει ένα κουτί
- opt.id {String} απαιτείται - ένα αναγνωριστικό κουτί
- opt.element {HTML Element} απαιτείται - στοχευμένο στοιχείο
  - Μπορείτε να χρησιμοποιήσετε την απόλυτη θέση:
  - opt.x {Number}
  - opt.y {Number}
- Το opt.offsetX {Number} επηρεάζει το offset X
- Το opt.offsetY {Number} επηρεάζει το offset Y
- opt.align {String} σύγκλιση left (προεπιλεγμένη), center ή right
- opt.position {String} σύγκλιση top (προεπιλεγμένη), bottom
- opt.minwidth {Number}
- opt.maxwidth {Number}
- opt.mouseleave {String} ένα σύνδεσμο με τη μέθοδο, εκτελείται όταν ο κούκλες ποντικιού αφήνει το πλαίσιο function(e, close)}
- Το opt.autofocus {Boolean} προσπαθεί να επικεντρωθεί στην πρώτη εισαγωγή / κείμενο
- opt.hide {String} Σύνδεση με τη μέθοδο function(box_element)
- opt.show {String} Σύνδεση με τη μέθοδο function(box_element)
- Το opt.autohide {Boolean} σας επιτρέπει να κρύψετε ένα κουτί μετά την κλικ σε αυτό
- opt.delay {Number} μια απλή καθυστέρηση για την παράδοση (προεπιλεγμένη: 0)
- opt.scrolltop {Boolean} αποσπά την κορυφαία θέση από το τρέχον offset Y (προεπιλεγμένο: false)
- opt.url {String} προαιρετική, διεύθυνση URL για το περιεχόμενο
  - Το opt.path {String} θα αντικαταστήσει όλες τις φράσεις του ~PATH~ στο πρότυπο που έχει κατεβάσει
  - Το opt.ID {String} θα αντικαταστήσει όλες τις φράσεις του ~ID~ στο πρότυπο που έχει κατεβάσει
Το component.hide() κρύβει το τελευταίο ανοιχτό κουτί
Το component.hide([box_id]) κρύβει το συγκεκριμένο κουτί και όλα τα κουτιά του
Το component.hide(true) κρύβει όλα τα κουτιά

Κύπελλο

<div class="floatingbox" data-id="yourid" data-config="">
	Your content
</div>

ΕΠΙΤΡΟΦΗ:

init {String} μια σύνδεση με τη μέθοδο, εκτελείται όταν το κουτί αρχίζει για πρώτη φορά function(element)
reload {String} Σύνδεση με τη μέθοδο function(element)
hide {String} μια σύνδεση με τη μέθοδο, εκτελείται όταν το κουτί πρόκειται να κρύψει function(element)
scope {String}: Το όνομα του προσαρμοσμένου πεδίου / plugin
zindex {Number} ένα προσαρμοσμένο z-index για αυτό το κουτί

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

example.html

<ui-component name="exec"></ui-component>
<ui-component name="floatingbox" config="zindex:10"></ui-component>

<!-- Form templates -->

<div class="floatingbox" data-id="1" style="width:200px">
	<div class="padding">
		<div>Box 1</div>
		<br />
		<br />
		<br />
	</div>
</div>

<div class="floatingbox" data-id="2" data-config="init:box2init">
	<div class="padding">
		<div>Box 2</div>
		<br />
		<br />
		<br />
		<span class="exec" data-exec="showbox" data-id="3" style="color:#2A6CEC;cursor:pointer;text-decoration:underline">Show box 3</span>
	</div>
</div>

<div class="floatingbox" data-id="3">
	<div class="padding">
		Box 3
	</div>
</div>

<!-- Executors -->

<div class="row">
	<div class="col-xs-4">
		<span class="exec" data-exec="showbox" data-id="1" style="color:#2A6CEC;cursor:pointer;text-decoration:underline" class="block">Show box 1</span>
	</div>
	<div class="col-xs-4">
		<span class="exec" data-exec="showbox" data-id="2" style="color:#2A6CEC;cursor:pointer;text-decoration:underline" class="block">Show box 2</span>
	</div>
	<div class="col-xs-4">
		<span class="exec" data-exec="showbox" data-id="3" style="color:#2A6CEC;cursor:pointer;text-decoration:underline" class="block">Show box 3</span>
	</div>
</div>

<script>

	function showbox(el) {
		var opt = {};
		opt.element = el;
		opt.id = el.attrd('id');
		SETTER('floatingbox/show', opt);
	}

	function box2init(el) {
		console.log('Box 2 is initialized', el);
	}

</script>