# j-Edit

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

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: el
Content-SHA256: 390eb69c74ae3c02a8a5a195054ac7cbd6ecab5e804cec169f1f0574c6e4829f
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Το συστατικό επιτρέπει το χαρακτηριστικό `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 άδεια.

```html 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>
```