Frontend Revolver v.1.0.8: forms fetch API introduction and new UI

Today I was able to update Revolver front-end library to version 1.0.8. This update includes new Form API with fetch based engine that allows you to submit form data with automatic configuring request.

Module $.fetchSubmit parse form options and collect field values. Than module automatically add $.event to submit and perform request in POST or GET variant. Than response will be returned to callback.

Example form markup:

<form action="post.php" method="post" accept-charset="utf-8" />
 
	<label>Text Field Required:
		<input type="text" name="text_1" placeholder="reqired text field contents" required />
	</label>
 
	<label>Email Field Required:
		<input type="email" name="email_1" placeholder="reqired email field contents" required />
	</label>
 
 
	<label>Password Field Required:
		<input type="password" name="password_1" placeholder="reqired password field contents" required />
	</label>
 
	<label>Date Field Required:
		<input type="date" name="date_1" placeholder="reqired date field contents" required />
	</label>
 
	<label>Time Field Required:
		<input type="time" name="time_1" placeholder="reqired time field contents" required />
	</label>
 
	<label>Number Field Required:
		<input type="number" name="number_1" placeholder="reqired number field contents" required />
	</label>
 
	<label>Telephone Field Required:
		<input type="tel" name="telephone_1" placeholder="reqired telephone field contents" required />
	</label>
 
	<label>URL Field Required:
		<input type="url" name="url_1" placeholder="reqired homepage field contents" required />
	</label>
 
	<fieldset>
		<legend>Textarea field:</legend>
 
		<textarea rows="10" name="textarea_1" placeholder="textarea contents"></textarea>
 
	</fieldset>
 
	<fieldset>
 
		<legend>Radio Group</legend>
 
		<label>
			<input type="radio" name="gender" value="male" checked> Male
		</label>
 
		<label>
			<input type="radio" name="gender" value="female"> Female
		</label>
 
		<label>
			<input type="radio" name="gender" value="other"> Other
		</label>
 
	</fieldset>
 
	<fieldset>
 
		<legend>Select Field</legend>
 
		<label>
			<select name="car_model">
				<option value="volvo">Volvo</option>
				<option value="saab" selected>Saab</option>
				<option value="mercedes">Mercedes</option>
				<option value="audi">Audi</option>
			</select>
		</label>
 
	</fieldset>
 
 
	<fieldset>
 
		<legend>Checkbox Field</legend>
 
		<label>
			<input type="checkbox" name="checkbox_1" value="agree" />I'm read and agree terms and conditions.
		</label>
 
		<label>
			<input type="checkbox" name="checkbox_2" value="remember" />Remember Me.
		</label>
 
	</fieldset>
 
	<input type="hidden" name="hidden_value" value="hidden_value_1" />
 
	<label>Text Field:
		<input type="text" name="text_2" placeholder="unreqired text field contents" />
	</label>
 
	<input type="submit" value="Submit" />
	<input type="button" value="Click Me!">
	<input type="reset" />
 
</form>

Example Fetch Submit API:

$.fetchSubmit('form', 'text', function(){
   $.modal('Form API test :: sended variables', $.findHTMLByTag('pre', this)[0].outerHTML, [800, 300]);
});

Added new module for finding some HTML contents in some HTML string contents named $.findHTMLByTag and replaced hard parsing of $.fetch module thats find only HTML contents inside body tag. Now we can find any Node or tag, or HTML element with any CSS selector in any HTML string.

For example:

$.findHTMLByTag('#root .selector div', OuterHTMLData); // func(selector, data) :: returns HTML element Node

For now UI was updated to new beautiful styles. There are no more than I want but it's a start of developing Revolver bootstrap. Look at styles(hints, tubs, modal windows and forms):

Modal window Revolver UI

Hints UI

Hint Revolver UI

Tabs UI

Tabs Revolver UI

Form fields

Form fields Revolver UI

Other fields style UI

Extra forms style Revolver UI

Action elements styles UI

Action elements Revolver UI

Conclusion

And now I want hear what did you like to see en Revolver in next releases? I have to little ideas but now have not any big plans.

Code: https://github.com/xShiftx/RevolveR

Добавить комментарий