j-Edit

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

Το συστατικό επιτρέπει το χαρακτηριστικό contenteditable για τα στοιχεία με τάξεις edit ή edit2.

Σιγκλέτο
Το στοιχείο που περιέχεται κάτω από το στοιχείο <body, όπως το j-Directory ή το j-DatePicker.

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

Κάθε στοιχείο με την κατηγορία edit μπορεί να επεξεργαστεί με ένα κλικ
Κάθε στοιχείο με την κατηγορία edit2 μπορεί να επεξεργαστεί με ένα διπλό κλικ

ΕΠΙΤΡΟΦΗ:

dateformat {String} μια προεπιλεγμένη μορφή για τις ημερομηνίες αναχώρησης (προεπιλογή: yyyy-MM-dd)
exec {String} προαιρετική, μια προεπιλεγμένη διαδρομή για το function(opt, accept(boolean/html_value_for_the_element))
Το floating {Boolean} είναι προαιρετικό, μπορεί να επιτρέπει την πλοήγηση κατά προεπιλογή (προεπιλεγμένο: false)
minwidth {Number} επιλογή, ένα λεπτό πλάτος
offsetX {Number} Εναλλακτικά, X offset
offsetY {Number} Εναλλακτικά, Y offset

Το data-edit υποστηρίζει:

required {Boolean} προαιρετική, επιτρέπει «αναγκαία» (προεπιλεγμένη: false)
type {String} Εναλλακτικά, μπορεί να string (από προεπιλογή date, number, boolean, email, urlή html
check {String} Επιλεκτικά, ένας δρόμος για function(opt, el) Πρέπει να επιστρέψουμε booleanΑυτό σημαίνει Can the user edit that field?
exec {String} προαιρετική, ένα μονοπάτι προς το function(opt, accept(boolean/html_value_for_the_element))
format {String} επιλογή, μορφή για date, προεπιλεγμένη: yyyy-MM-dd
maxlength {Number} με μέγιστο μήκος
Η τιμή του minvalue {Number} είναι ένα λεπτό για τον τύπο αριθμού (προεπιλεγμένη τιμή: undefined)
maxvalue {Number}: μέγιστη τιμή για τον τύπο αριθμού (προεπιλεγμένη τιμή: undefined)
bind {Boolean} αν το true ανασυνδέει το data-bind μόνο σε αυτό το στοιχείο (προεπιλεγμένο: true)
multiline {Boolean} προαιρετική, επιτρέπει multiline + appends τάξη editable-multiline (inline-block + width:100%) όταν είναι επεξεργασία (προεπιλογή: false)
floating {Boolean/String} προαιρετικά, επιτρέπει το παράθυρο για το στοιχείο (προεπιλογή: false, string μπορεί να περιέχει τιμές position ή offset)
offsetX {Number} επιλογή, πρόσθετο X offset για το πλωτό παράθυρο
offsetY {Number} επιλογή, πρόσθετη Y αποζημίωση για το παράθυρο
offsetWidth {Number} προαιρετική, πρόσθετη πλάτος για το παράθυρο
width {Number} επιλογή, ένα σταθερό πλάτος για το πλωτό πάνελ
parent {String} προαιρετικό, ένα επιλεκτικό για την απόκτηση του offset (μπορεί να περιέχει τον επιλεκτή parent ή jQuery για τη μέθοδο .closest())
selectall {Boolean} επιλογή, επιλέξτε ολόκληρο το κείμενο
cursor {String} προαιρετική, μια θέση διαιτητή beg ή end (προεπιλεγμένη)
notify {String} προαιρετική, μια διαδρομή προς το function(opt) που θα ειδοποιηθεί μετά από επιτυχημένη αλλαγή
Εναλλακτικά, το prevent {Boolean} εκτελεί το .preventDefault() και το .stopPropagation() στο γεγονός κλικ
align {String} προαιρετική, θέτει ένα valeu για την ιδιότητα ισοδύναμη με το κείμενο μόνο για τη λειτουργία πλωτή
focus {String} προαιρετική, μια σύνδεση με το function(opt, el) όταν επικεντρώνεται
blur {String} προαιρετική, μια σύνδεση με το function(opt, el) όταν είναι μπλε
NEW: attr {String} προαιρετική, ένα όνομα data-{attr} για να πάρει την μη μορφοποιημένη τιμή

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

Το opt.set(value) μπορεί να χρησιμοποιηθεί για να προσδιορίσει την αξία

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

example.html

<ui-component name="edit"></ui-component>

<ui-plugin path="form" style="width:500px;padding:10px;border:1px solid #E0E0E0">

	<div class="row m">
		<div class="col-xs-3">
			Name:
		</div>
		<div class="col-xs-9">
			<ui-bind class="edit2 block" data-edit="required:1;floating:1" path="?.name" config="html" style="height:24px;background-color:#E0E0E0"></ui-bind>
		</div>
	</div>
	<div class="row m">
		<div class="col-xs-3">
			Email:
		</div>
		<div class="col-xs-9">
			<div class="edit" data-edit="required:1;type:email;exec:save_email" style="height:24px;background-color:#E0E0E0">@</div>
		</div>
	</div>
	<div class="row m">
		<div class="col-xs-3">
			HTML:
		</div>
		<div class="col-xs-9">
			<ui-bind  class="edit block" data-edit="multiline:1;floating:1;type:html" path="form.html" config="html" style="min-height:24px;background-color:#E0E0E0"></ui-bind>
		</div>
	</div>
	<pre><ui-bind path="?" config="html:JSON.stringify(value, null, '  ')"></ui-bind></pre>
</ui-plugin>

<script>

	function save_email(opt, next) {
		SET('form.email', opt.value);
		// next(true);
		// next(false) OR next(null) cancels the change
		next(opt.value.toUpperCase());
	}

	var form = {};
	form.html = '<b>Hello world!</b>';
	form.name = 'UI components';

</script>