# j-WizardExpert

> Μια απλή λύση για τη δημιουργία προηγμένων μάγισσων. το Wizard κατεβάζει τα βήματα (όπως τμήματα HTML) σύμφωνα με το σχήμα. τα βήματά τους είναι ενσωματωμένα σε προσαρμοσμένες κλίσεις, έτσι ώστε να είναι υπό επικύρωση.

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

Μια απλή λύση για τη δημιουργία προηγμένων μάγισσων. το Wizard κατεβάζει τα βήματα (όπως τμήματα HTML) σύμφωνα με το σχήμα. τα βήματά τους είναι ενσωματωμένα σε προσαρμοσμένες κλίσεις, έτσι ώστε να είναι υπό επικύρωση.

__ΕΠΙΤΡΟΦΗ__

- `output {String}` ένα μονοπάτι για την έξοδο, το αντικείμενο θα περιέχει ολόκληρη την έκδοση (τα βήματα θα είναι ιδιότητες)
- `exec {String}` ένα μονοπάτι προς το `method(output_object)`, εκτελείται εάν ο μάγος δεν περιέχει κανένα επόμενο βήμα
- `next {String}` ένα μονοπάτι, εδώ θα ανατεθεί το επόμενο βήμα με την ιδιοκτησία `enabled {Boolean}`
- `back {String}` ένα μονοπάτι, εδώ θα ανατεθεί το προηγούμενο βήμα με την ιδιοκτησία `enabled {Boolean}`
- `validate {Boolean}` επιτρέπει την επικύρωση (προεπιλεγμένη: `true`)

__Σχεδίαση__:

```js
{
	'step1': { url: 'step1.html', next: 'step2', validate: false },
	'step2': { url: 'step2.html', next: 'step3' },
	'step3': { url: 'step3.html' }
}
```

- Το συστατικό επεκτείνει κάθε βήμα προσθέτοντας νέες ιδιότητες `enabled {Boolean}`, `id {String}`, `prev {String}`

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

```html example.html
<style>
	button { background-color: white; border: 1px solid #E0E0E0; font-size: 12px; padding: 5px 15px; }
	button:hover { background-color: #F8F8F8; }
	button:disabled { background-color: #F0F0F0; cursor: not-allowed; color: #A0A0A0; }
</style>

<div style="border:1px solid #E0E0E0;width:300px;height:150px;padding:20px;margin-bottom:20px">
	<ui-component name="wizardexpert" path="currentstep" config="output:currentoutput;next:nextstep;back:prevstep;exec:steps_finish">
		<script type="text/plain">
			{
				'step1': { url: 'step1.html', next: 'step2', validate: false },
				'step2': { url: 'step2.html', next: 'step3' },
				'step3': { url: 'step3.html' }
			}
		</script>
	</ui-component>

</div>

<nav>
	<ui-component name="validation" path="outputdata">
		<button is="is-button" path="prevstep" config="enabled:value && value.enabled;click:steps_back" disabled>Back</button>
		<button is="is-button" path="nextstep" config="enabled:!value||value.enabled;html:value?'Next':'Finish';click:steps_next" disabled>Next</button>
	</ui-component>
</nav>


<script type="text/html" id="step1">
	WELCOME
</script>

<script type="text/html" id="step2">
	<ui-component name="input" path="?.name" config="required:1">Type your name</ui-component>
</script>

<script type="text/html" id="step3">
	FINISH
</script>

<script>

	var currentstep = 'step1';
	var currentoutput = {};

	ON('request', function(options) {
		// Hijack response
		if (options.url.indexOf('step') !== -1)
			options.respond($('#' + options.url.replace('.html', '')).html());
	});

	function steps_next() {
		SET('currentstep', 'NEXT');
	}

	function steps_back() {
		SET('currentstep', 'BACK');
	}

	function steps_finish() {
		alert('DONE: ' + STRINGIFY(currentoutput));
	}

</script>
```