j-WizardExpert

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

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

ΕΠΙΤΡΟΦΗ

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

Σχεδίαση:

{
	'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 άδεια.

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>