Numericupdown, a numeric addition and subtraction component implemented by HTML + CSS + jquery

Source: Internet
Author: User

In the process of creating a project, you need to implement such a component as follows:

0. Function Analysis:

When you click the down and down buttons, the value on the left is increased or decreased. Of course, such components are everywhere on the Internet. I am still determined to try it on my own.

1. Cut the graph first.

The following figure shows the normal background on the left and the background on the right.

2. Determine the HTML structure.

As follows:

 
<Div id = "addsubtract1" class = "addsubtract"> <Div class = "addsubtract-left"> </div> <Div class = "addsubtract-Right CF"> <class = "ba addsubtract-right-top" href = "javascript :; "Title =" add "> Add </a> <a class =" ba addsubtract-right-bottom "href =" javascript :; "Title =" decrease "> decrease </a> </div>
3. Write CSS.

As follows:

/* Begin * addsubtract plugin */. addsubtract {width: 31px; Height: 18px; float: Left ;}. addsubtract. addsubtract-left {width: 17px; Height: 16px; float: Left; Background-color: # FFF; Border: 1px # abadb3 solid; text-align: center ;}. addsubtract. addsubtract-right {float: Left; Border: 1px # abadb3 solid; border-left: none ;}. addsubtract. addsubtract-right-top ,. addsubtract. addsubtract-right-bottom {width: 9px; Height: 8px; Background: URL ("images/icons.gif") No-repeat scroll 0-36px transparent ;}. addsubtract. addsubtract-right-bottom {background-position: 0-44px ;}. addsubtract. addsubtract-right-top: hover {background-position:-10px-36px ;}. addsubtract. addsubtract-right-bottom: hover {background-position:-10px-44px;}/* end * addsubtract plugin */
4. Add the interaction function.

Compiled using jquery plug-in for convenienceCodeUnified management and function expansion. As follows:

; (Function ($) {$. FN. extend ({/************************************ * *************************** @ author Russell CG. * @ author blog http://www.cnblogs.com/pinocchioatbeijing/ * @ 2012.7.23 * @ can be freely reproduced and used, however, please note that the copyright ownership is *********************************** * **************************/iaddsubtract: function (options) {var isetting = {El: $ (". addsubtract "), VAL :". addsubtract-left ", add :". addsubtract-Right>. addsubtract-right-top ", Sub :". addsubtract-Right>. addsubtract-right-bottom ", defaultvalue: 1, // default upperlimit: NULL, // maximum lowerlimit: NULL // lower limit}; Options = $. extend (isetting, options | |{}); Return isetting. el. each (function () {var $ this = $ (this), $ val = $ this. find (isetting. val), $ add = $ this. find (isetting. add), $ sub = descrithis.find(isetting.subscribedomainval.html (isetting. defaultvalue); $ add. click (function () {If (isetting. upperlimit = NULL | (isetting. upperlimit & typeof isetting. upperlimit = "Number" & isetting. defaultvalue <isetting. upperlimit) implements invalid val.html (++ isetting. defaultvalue) ;}}); $ sub. click (function () {If (isetting. lowerlimit = NULL | (isetting. lowerlimit & typeof isetting. lowerlimit = "Number" & isetting. defaultvalue> isetting. lowerlimit) implements invalid val.html (-- isetting. defaultvalue) ;}}); // lele.log({(this}.find(isetting.val}.html () ;}}) ;}( jquery );
5. Call.
 
$ (""). Iaddsubtract ({El: $ ("# addsubtract1"), defaultvalue: 0 });
6. Summary.

This plug-in can implement simple control functions, but it is not very familiar with the principles of plug-in writing, so it may not be noticed in many places. Anyway can be written down first and improved later. The provision of Preset option values and handling of unexpected situations also need to be further improved.

This article comes fromPinocchioatbeijing(Focus on front-end technologies to pursue the best life in the United States) blog in the blog Park,ArticleURL: Success.

Related Article

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.