Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to achieve self-made ruler style in jQuery". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to achieve self-made ruler style in jQuery" can help you solve the problem.

Effect picture

Extend method in jQuery

Here I refer to the older generation's blog, in the senior blog can carry on the further study:

The explanation given in the document is that the jQuery.extend () function is mainly used to merge the contents of one or more objects into the target object, and this function can copy the member properties and methods of one or more objects to the specified object.

Extend is also a common method when we write plug-ins.

1. The prototype of the extension method

Extend (param,dparam...), which means to merge dparam into param

It is important to note that if multiple objects have this property, the latter will override the property value of the former.

In other words, var result = $.extend ({}, {name: 'JSoso',age:17}, {name: "okaychen", sex: "boy"})

Finally, result = {name: "okaychen", age:17,sex: "boy"}

2. Case where there is only one parameter

When there is only one parameter, the change method is merged into the global object of jQuery.

For example:

Extend ({hello:function () {console.log ('hello extend')}})

The hello method will eventually be added to the jQuery global object.

3. The case with Boolean value

Extend in jQuery also has an overloaded prototype.

Syntax: $.extend (boolean,dest,src1,src2...)

The first Boolean parameter indicates whether to use depth copy, which defaults to false (can be explicitly specified as true, but cannot be explicitly specified as false)

So what is deep copy? In fact, it is not difficult to understand that a deep copy is the "attribute" of the "attribute object" that will also be copied in the target object.

Var result = $.extend (true, {name:'JSoso',abstract: {age:17,country:'USA'}}, {last: "Amor", abstract: {state:'student',country:'China'}})

Then the result of the merger is:

Result = {name:'JSoso', last:'Amor', abstract: {age:17,state:'student',country:'China'}}

So if the parameter is false, what will the result be?

Result = {name: "JSoso", last: "Amor", abstract: {state: "student", country: "China"}}

You will see that the attributes in the first abstract are not copied, because no deep copy is performed, so the abstract will be overwritten by the latter.

I summed up the above three points about the method of extend copying. In fact, there is still a lot of knowledge that we need to explore.

Process analysis

I think at present, the Internet is almost full of horizontal sliding scale plug-ins, almost no vertical plug-ins, in fact, it is more or less the same. Because of the need to do this thing, so I need to make a vertical scale (and I don't like to use plug-ins myself, I want to realize my plug-in dream one day).

My first step in making this plug-in is to write the general effect statically in HTML+ CSS (at the same time, I think I have an intuitive idea of the general structure of this thing), such as doing it at 010, then calculating the spacing, and then writing about it later.

When we are clear about the structure of this scale, all we need to do is insert it into the specified location using the append method (the jQuery I use here) (because by this time your scale css code is almost complete).

Then we need to deal with the intermediate flag (that is, the initial position of the curve)

Var firstRand = true;if (firstRand) {pTop = $(".rulerPointer"). Position (). Bottom;} var rulerLNo = 0 for (var z = 0; z

PTop) {limitTop = pTop-z * setHeight; rulerLNo = z; break;}}

Change the position of the curve

If (param.value & & param.value > = param.minUnit & & param.value = rulerLNo & & idx < setLen) {$(ele) .html ((idx-rulerLNo) * param.minUnit * param.unitSet);}})

At this point, the code for our scale has been completed (I have only shown part of the code).

Initialization

When we finish encapsulating the plug-in, we just need to create an instantiated object.

Var measureRuler = new MeasureRuler ({wrapperId: "rulerWrapper", / / ID max:110 of the scale container, / / maximum scale minUnit:1, / / minimum scale unitset:10, / / scale unit length value:60, / / initialization value, initial position of the curve mult:1 / / scale multiple The default is 10px}) this is the end of the introduction about "how to realize the self-made ruler style in jQuery". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.