Checkbox of jquery plug-in

Source: Internet
Author: User

Jquery. jcheckbox is a simulated checkbox plug-in developed based on jquery. *. It can display more beautiful UI effects in any system environment.

:

You can download the source code here: jquery. jcheckbox. js

Very small and easy to use:

1 $ ( ' # Chkfirst ' ). Jcheckbox ( {
2 Maxlength: 10 ,
3 Onchange: Function (E) {
4Window. Console&&Console. Log ('Value of % O is % s [checked = % s]',This, E. Val (), E. ATTR ('Checked'));
5}
6 } );

This example matches and beautifies the checkbox named "chkfirst. When its status changes (checked), The onchange event is triggered (parameter E is the actual checkbox object ).

Because the simulated checkbox is associated with the actual checkbox (including the value and checked attributes), you can directly view the original checkbox value (the original checkbox is hidden ).

PageCode:

1 < Input Type = "Checkbox" ID = "Chkfirst" Text = "I Am a checkbox" Value = "1"   />

When the checkbox status changes, you can observe the results in the console:

 

API description:

Normalcssname (string): Specifies the style name of the simulated checkbox. The default value is 'SP _ xjcheckbox ',
Hovercssname (string): Specifies the style name when the mouse is hovering over. The default value is 'SP _ xjcheckbox_h ',
Checkedcssname (string): name of the selected style. The default value is 'SP _ xjcheckbox_c ',
Plugcss (object): attaches a style to the simulated checkbox, for example, {'width': 300, height: 20 },
Maxlength (INT): Specifies the length of a string. When the text length is too long, it is cut (ended with '...'). The default value is 10,
Onchange (function): triggers an event when the status changes.

If you have any questions, you can view the demo in the source code package.

PS: Make sure this function is included:

 

1 String. Prototype. Cut =   Function (LEN) {
2 VaR Position =   0 ;
3 VaR Result = [];
4 VaR Tale =   '' ;
5 For ( VaR I =   0 ; I <   This . Length; I ++ ) {
6 If (Position > = Len) {
7Tale= '';
8Break;
9}
10 If ( This . Charcodeat (I) >   255 ) {
11Position+ = 2;
12Result. Push (This. Substr (I,1));
13}
14 Else   {
15Position++;
16Result. Push (This. Substr (I,1));
17}
18 }
19 Return Result. Join ( "" ) + Tale;
20 } ;

Online Demo: Live Demo

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.