Drag the mouse to select a specified number of code instances, and drag to select a number instance

Drag the mouse to select a specified number of code instances, and drag to select a number instance

Drag the mouse to select an instance of the specified number:

In many applications, when selecting numbers, you can drag them with the mouse to achieve a user-friendly effect.

The following is a plug-in that implements this function. This is jRange, which is implemented using jQuery.

I. HTML code:

First, load the jQuery library file and the jRange-related css file: jquery.range.css and plug-in: jquery. range. js.

<script src="jquery.js"></script> <link rel="stylesheet" href="jquery.range.css"> <script src="jquery.range.js"></script>

Then place the following code at the position where the slider selector needs to be displayed:

<input type="hidden" class="slider-input" value="23" />

Use the hiiden text field and set the default value, for example, 23.

Ii. jQuery code:

Calling the jRange plug-in is very simple. Use the following code:

$('.single-slider').jRange({   from: 0,   to: 100,   step: 1,   scale: [0,25,50,75,100],   format: '%s',   width: 300,   showLabels: true,   showScale: true});

3. The plug-in jRange also provides some necessary options to meet various requirements:

(1). from: the minimum value of the sliding range, such as 0.

(2). to: the maximum value of the sliding range, number, such as 100.

(3). step: The step size. The size of each slide. The default value is 1.

(4). scale: the scale label at the bottom of the slider, which is of the array type, for example, [100,].

(5). showLabels: Boolean. Whether to display the size label below the slide bar. The default value is true.

(6). showScale: Boolean. Whether to display the value label above the slider. The default value is true.

(7). format: numeric format.

(8). width: the slider width. The default value is 300.

(9). isRange: whether to select a range. The default value is false.

Original address: http://www.51texiao.cn/jqueryjiaocheng/2015/0525/2452.html

The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 17185.