Slidesjs (Carousel Support touch screen)--Official website ( http://slidesjs.com )
1. Introduction
SLIDESJS is a 1.7.1+ response slide plugin based on jquery. Support keyboard, touch, CSS3 conversion.
2. Code
<!doctype html>
Introduction to APIs
1. Set the height of the carousel (the default value is Auto)
$ ("#slides"). Slidesjs ({
width:700,
height:393
2. Set starting from that one (default is 1)
$ ("#slides"). Slidesjs ({
Start:3//Here Note the value starting from 1, not 0; default value 0
});
3. Set up and down toggle button
You can customize the style:
<a class= "slidesjs-previous slidesjs-navigation" href= "#" title= "previous" >Previous</a>
<a class = "Slidesjs-next slidesjs-navigation" href= "#" title= "Next" >Next</a>
$ ("#slides"). Slidesjs ({
Navigation: {
active:true,//Show or hide the previous toggle button; The default value is True,
effect: "Slide"//Set Toggle mode, Slide: Smooth, fade: fade ; Default value Slide
}
4. Set Paging switch
You can customize the style:
<ul class= "Slidesjs-pagination" > <li class= "slidesjs-pagination-item" ><a href= "#" Data-slidesjs-item = "0" class= "active" >1</a></li> <li class= "Slidesjs-pagination-item" ><a href= "#" data-slidesjs-item= "1" >2</a></li> <li class= "Slidesjs-pagination-item" ><a href= "#" Data-slidesjs-item= "2" >3</a></li> <li class= "Slidesjs-pagination-item" ><a href= "#" Data-slidesjs-item= "3" >4</a></li></ul>
$ ("#slides"). Slidesjs ({
pagination: {
Active:true,//Show or hide pagination; The default value
is true effect: "Slide"//Here you can set the switching mode, the same as the upper and lower pages, but does not conflict with the next page; default value Slide
}
5. Auto Play
You can customize the style:
<a class= "Slidesjs-play slidesjs-navigation slidesjs-playing" href= "title=" Play "style=" Display:none; >Play</a>
<a class= "Slidesjs-stop slidesjs-navigation" href= "#" title= "Stop" style= "" >stop</a >
$ ("#slides"). Slidesjs ({
play: {
active:true,//Start AutoPlay function; The default value is True
effect: "Slide",//Toggle mode, No conflicts with the above two toggle modes; default value slide
interval:5000,//time spent on each slide; default value 5000
auto:false,//start AutoPlay; default value false
Swap:true ,//Show or hide the AutoPlay and stop buttons; The default value
is True pauseonhover:false,//mouse cursor is paused, default value false
restartdelay:2500//Restart delay, default value 2500
}
6. Effect Configuration
$ ("#slides"). Slidesjs ({effect: {
slide: {
speed:200//switch time spent; default value of
fade: {
speed:300 ,//switching time spent; default value of
crossfade:true//Cross switch, set to False, you will see background color; Default value True
}
}
7. Callback function
$ ("#slides"). Slidesjs ({
callback: {
loaded:function (number) {
//Slide load Complete
},
start:function ( Number) {/
/toggle at Start
},
complete:function (number) {
//Toggle at End}}}
);
validation (form verification)--official website ( http://jqueryvalidation.org )
The following is for: JQuery Validation plugin-v1.15.0-2/24/2016 version
Note: jquery vaildation Engine is not the same plugin as follows
Example:
<form action= "" Id= "Demo" > <label for= "username" > Username </label><input type= "text" name= "username" Id= "username" ><br/> <label for= "password" > Password </label><input type= "text" name= "password" id= " Password "><br/> <label for=" password_confirm "> Confirm password </label><input type=" text "Name=" Password_confirm "><br/> <label for=" email ">email</label><input type=" text "name=" email " ><br/> <input type= "Submit" value= "submitted" > </form> <script> $ (function () {$ (' #demo '). Validate ({rules: {//Rule username: {//username on this side, get the value required:true of name in form. Required minlength:2,//Minimum length remote: "http://taojiaqu.com"//url verify pairing, can only return TRUE or false}, password: {required:true , Minlength:5}, Password_confirm: {required:true, Minlength:5, Equalto: "#password"}, Email: {required:true, email : True, Remote: "Http://taojiaqu.com"}}, messages: { Error display, with the above one by one corresponding, there is no setting, will display the default username: {required: ' Please enter username ', minlength: ' username is min 2 ', Remote: "The username is used"}, password: {r equired: ' Please enter password ', minlength: ' Password minimum length is 5 '}, Password_confirm: {required: ' Please confirm password ', minlength: ' Password minimum length is 5 ', Equalto: "Two times password inconsistent "}, Email: {Required: ' Please enter the mailbox ', email: ' You entered the wrong mailbox ', Remote: ' This mailbox has been applied '}, Errorelement:" B ",//Set error label B errorplacement: function (Error, Element) {//Wrong operation, error error message, element error input object Element.after (error);}, Submithandler:function () {//Click submit Form callback function, if there is also validation does not pass the optional error message, do not execute the function}, Success:function (label,element) {//Validate the passed function/ /element:input Object//labal: The object of the cue message}, highlight:function (element, Errorclass, Validclass) {//previous validation not pass , execute the function//element:input Object//errorclass: Error class class name//validclass: Confirm Class class name}, Unhighlight : function (element, Errorclass, Validclass) {//Last validated via, execute this function}}) </script>
Api
1.1 Method
Validate () –validates Core method
$ (' #demo ') validate ({
rules: {
//...)
},
messages: {
//...
}
})
Valid () – Verifies that the form passes, returns TRUE or False
$ (' #taojiaqu '). Validate ()
alert ($ (' #taojiaqu '). valid ());
Rules () – The rule $ ("#myinput") for reading, adding, and deleting an element
. Regulations (); Returns a Rule object $ ("#myinput"). Rules ("Add", {
required:true,
minlength:2,
messages: {
required: " Required input ",
Minlength:jQuery.validator.format (" Please, at least {0} characters are necessary ")
}
});
$ ("#myinput"). Rules ("Remove");//Remove All
$ ("#myinput"). Rules ("Remove", "Min Max");//Remove Min max
1.2 Public methods
Validator.form () – Verifies the form
validator.element () – Verifies the specified input
validator.element ("#myselect");
Validator.resetform () – Reset Form
validator.showerrors () – Display error message
validator.numberofinvalids () – Return the wrong number of fields
1.3 Static methods
JQuery.validator.addMethod (name, method [, Message]) – Add custom validation methods
//returns TRUE or FalsejQuery.validator.addMethod (" Domain ", function (value, Element) {return
this.optional (element) | |/^http:\/\/taojiaqu.com/.test (value);
} , "error message");
JQuery.validator.format (template, argument, argumentn ...) – format string
var Format=jquery.validator.format ("{0}--{1}-- {2} ");
Console.log (Format ("A", "B", "C")); A--b--c
JQuery.validator.setDefaults () – Modify the default settings
jQuery.validator.setDefaults ({
debug:true// All set debug mode
});
JQuery.validator.addClassRules () – Uniform addition of a validation rule for a class
//Add a checksum rule with name class: required, minimum length of 2jquery.validator.addclassrules ("name", {
required:true,
minlength:2
2. Selector
: blank– Select input with an empty value value
: filled– Select value-Valued input
: unchecked– Select a checkbox that is not selected
3. Validation rules
required– Required, default True
remote– Remote request verification, the request address returns TRUE or False
minlength– minimum length, medium text count 1 characters
maxlength– Maximum Length
rangelength– given length range, example: [2,5]
min– minimum value, numeric type
max– Max Value
range– given the maximum minimum range of values, for example: [2,100]
step– Setup Steps
email– must be a mailbox email format
url– must be an address URL
date– must enter a date in the correct format
dateiso– must enter the correct format of the date (ISO), for example: 2009-06-23, 1998/01/22 only verify the format, does not verify the validity
number– must enter a valid number (negative, decimal)
digits– must enter an integer
Equalto: ' #abc ' – input values must be the same as #abc
The following validation rules need to be loaded--additional-methods.min.js
accept– Verify uploaded file mine type, example: Accept: "image"; multiple types of commas (,) separated
creditcard– Verify credit card number
extension– Verify the suffix of uploaded file, example: extension: "Dll|exe"; Multiple types of commas (|) separated
phoneus– Verify if it is an American number
require_from_group– Settings class has n is required
Mobile_phone: {
require_from_group: [1, ". Phone-group"]//This 1 indicates that only one entry is required in three items, followed by the class name
},
Home_phone: {
Require_from_group: [1, '. Phone-group ']
},
work_phone: {
require_from_group: [1, '. Phone-group ']
}
Configuration items for the 4.validate () method
debug-Turn off debug mode to prevent submission
$ (". Selector"). Validate ({
debug:true
submithandler-functions that run after validation can be added with the form's submission method
$ (". Selector"). Validate ({
submithandler:function (form) {
$ (form). Ajaxsubmit ();
}
});
$ (". Selector"). Validate ({
submithandler:function (form) {
form.submit ();
}
});
invalidhandler-validation failed, method of triggering when submitting
$ (". Selector"). Validate ({
invalidhandler:function (event, validator) {
//event: Custom Event Object
//validator : The currently validated instance
}
});
Ignore-Some elements are not validated
$ ("#myform"). Validate ({
ignore: ". Ignore")
rules-defines a checksum rule with a hidden parameter depends: What conditions are met to validate the secondary rule
$ (". Selector"). Validate ({
rules: {
Name: "Required",
email: {
required:true,
email:true
}
}
}); $ (". Selector"). Validate ({
rules: {
name: {depends:function (Element) {Reruen true;}//returns True to verify that name is required} ,
email: {
email:true, min:{param:15,//individual value words with param instead of depends:function (element) {Reruen true;} }
}
}
messages-Define hint Information
$ (". Selector"). Validate ({
rules: {
Name: "Required",
email: {
required:true,
email:true
}
,
messages: {
name: "Please enter your name",
email: {
required: "Please enter the mailbox",
email: " Please enter the correct mailbox address "
}
}"
groups-the validation of a set of elements, using an error hint to control the location of the error message with Errorplacement
$ ("#myform"). Validate ({
groups: {
username: "FName lname"
},
errorplacement:function (Error, Element) {
if (element.attr ("name") = = "FName" | | element.attr ("name") = = "LName") {
error.insertafter ("# LastName ");
} else {
error.insertafter (element);
}
}
onsubmit-whether to validate at commit time
onfocusout-whether to validate when the focus is being obtained
onkeyup-whether to verify when tapping the keyboard
onclick-whether the number of mouse clicks is verified
Focusinvlid-submits the form and does not validate the form for the focus (default first)
focuscleanup-submits the form, the form that is not validated is removed from the error message
errorclass-specifies the class name of the error hint
validclass-specifies the class name through which validation is passed
What tag error tags errorelement-use
$ (". Selector"). Validate ({
errorelement: "em"
});
wrapper-use what label to wrap the errorelement above
errorlablecontainer-the wrong message in a container
errorcontainer-Display or hide validation information, you can automatically implement the error message occurs when the container properties into a display, no error hidden
Showerrors-can display the total number of failed validations
Errorplacement:function (error,element)-Custom error message location, error: Error message, element: validated elements
Success-the element to be validated through a validated callback
Highlight-can add effects to an element that is not passed
Unhighlight-can add effects to the passed elements
The above is a small set to introduce the jquery plug-in Learning Tutorial Slidesjs +validation Verification, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
