DG Spinner

Demo

Bookmark and Share

Overview

This is free(LGPL), highly customizable javascript/dhtml spinner/spinbox widget.

Download

Files in package:

  • js/Spinner.js - Main javascript file for the widget
  • js/tests/* - JS Unit tests for the widget
  • images/ - Images.
  • css/ - CSS file for the widget.

You will also have to download the mootools library and include it on your page(s) with a script tag.

If you like my script, please rate it at HotScripts.com

How to use this script

You can use this script to create a spinner/spinbox via Javascript or from existing html markup on your page

Create Spinner from markup

All you have to do is to include the js and css file used by this widget(Spinner.js and Spinner.css) as done in the demo and create one or more text inputs and assign them to the CSS class "DG-spinner".

Example:

<input class="DG-spinner" maxlength="5" value="3" type="text">

When the Spinner.js file is included, it will search for input boxes of class "DG-spinner" and turn them into spinboxes.

Create Spinner dynamically via Javascript

This is an example:

HTML:

<TABLE>
  <tr>
    <td><label for="dynamicSpinner" id="labelDynamicSpinner">Dynamically created spinner: </td>
    <td id="spinboxcontainer"></td>
  </tr>
</TABLE>

We want to render our dynamically created spinbox inside TD with id "spinboxcontainer". We also want to "connect" it to the label with id "labelDynamicSpinner" in order to be able to nudge the label to change spinbox values. By nudging, I mean holding down the mousebutton on the label and move the mouse to the left or right to change the value of the spin box.

To accomplish this, we write this piece of code:

<script type="text/javascript">
var spinner = new DG.Spinner( {
  renderTo : 'spinboxcontainer',
  id:'dynamicSpinner',
  name: 'dynamicSpinner',
  label: 'labelDynamicSpinner',
  increment:0.1,
  shiftIncrement:1,
  decimals:1,
  minValue:5,
  maxValue:50,
  value:25,
  disableWheel:true,
  disableArrowKeys:true,
  styles: {
    width:'40px'
  }
});
</script>

Here, we have created a new DG.Spinner Object with these properties:

  • renderTo: Where we want to render/display the spinner
  • id: Id of Spinners input element
  • name: Name of the input element. <input name="dynamicSpinner"...
  • label: Reference to an element used as a label. It doesn't have to be a <label> tag.
  • increment: How much to increment when you use the mouse wheel or click on the arrow buttons. (default = 1)
  • shiftIncrement: Increment value when the shift key is pressed down.
  • decimals: How many decimals to show (default = 0).
  • minValue: Minimum allowed value.
  • maxValue: Maximum allowed value.
  • value: Initial value.
  • disableWheel: true = Disable mouse wheel functionality. (default = false)
  • disableArrowKeys: true = Disable changing of values by using the up and down arrows from the keyboard. (default = false)
  • disabled: true = Disabling the component. (default = false)
  • styles: Custom styling you want to add to the input element.
  • buttonAlign: Alignment of buttons ("left" or "right") - Default = "left".

Comments

J!P
I like this spinner control, it is something I have always found an incomprehensible widget omission in html. However, if someone could tell me how to control the box' width while creating it from markup I can remove the small addition I just had to write to do that.Simply adding something like adding 'style: {anykey:somevalue}' to the properties property will fail for various reasons
J!P at 01:06PM, 2011/08/12.
J!P
Never mind, actually, when investigating further, it was just a matter of including an inline style attribute in the <input> tag.Tx...
J!P at 01:28PM, 2011/08/12.
HebrikdVaw
Отличную обувь всегда трудно искать. Связано это прежде всего с тем, что качественные кроссовки дорого стоят, а подобрать что-то модное по низкой цене всегда трудно. Если вы не знаете, в каком магазине заказать кроссовки, советуем рассмотреть шанс заказа кроссовок в интернет-магазинах.

Интернет-магазин брендовых кроссовок Balenciaga Sneakers-Top.ru

На данный момент стильные кроссовки вы можете найти на [url=https://sneakers-top.ru/]кроссовки баленсиага интернет магазин[/url] где доступно большое количество кроссовок любых размеров и цветов. Интернет-магазин считается дисконтным, из-за этого цены в нём низкие. На сайте есть достаточно кроссовок для мужчин и девушек. Вы найдёте отклики покупателей, которые приобретали разные модели Nike и Puma.

Если вас заинтересовала какая-то конкретная модель, вы можете позвонить по телефону 8-(800)-111-22-33, где вам всё подскажут. На портале находится много кроссовок разных моделей. Вы можете выбрать в интернет-магазине кроссы для бега или классические варианты.

На портале [url=https://sneakers-top.ru/]интернет магазин мужских кроссовок[/url] есть возможность заказать кроссы разных брендов. Вы можете также пройти регистрацию и дать одобрение на рассылку. Благодаря этому вы сможете узнавать сразу о всех акциях ресурса.

Купить брендовые мужские и женские кроссовки в МО

Сегодня купить оригинальные кроссовки в МО не так уж и просто. Нужно ехать в ТЦ, где цены очень сильно высокие. Чтобы не переплачивать в фирменных магазинах, оригинальные кроссовки можно приобрести и через интернет. В фирме очень много вариантов разных брендов. Если вас интересует определенная модель из новой коллекции, вам её помогут выбрать.

Если вы хотите купить по скидке модель из старой коллекции, это также можно сделать. В компании моментальная доставка. После того, как вы оформите заказ, с вами установит связь администратор и уточнит адрес доставки. Важно выделить, что доставка по столице происходит в день заказа.

На оригинальные кроссовки Adidas и New Balance часто проходят акции. Заказать кроссовки Nike вы можете на ресурсе со скидкой. На кое-какие модели скидка может составлять до -50%. Более точную цену подсказать вам смогут консультанты интернет-магазина. Если вам не понравятся какая-то конкретная модель после доставки, вы её можете также вернуть. Возврат кроссовок проходит невероятно быстро.

Оплату вы можете провести через Visa или MasterCard. При желании оформить заказ можно позвонив в контакт-центр или через сайт, перейдя на Sneakers-Top.ru, где оформление товаров проходит сразу же.
HebrikdVaw at 02:09PM, 2018/12/18.
f88tw|Wacoal
f88tw|Wacoal|I appreciate your kind assistance.
http://mypaper.pchome.com.tw/f88tw
http://mypaper.pchome.com.tw/f88tw/P1
http://mypaper.pchome.com.tw/f88tw/post/1379131888
http://mypaper.pchome.com.tw/f88tw/post/1378915496
http://mypaper.pchome.com.tw/f88tw/post/1377153372
http://mypaper.pchome.com.tw/f88tw/post/1376815127
http://mypaper.pchome.com.tw/f88tw/post/1376478820
http://mypaper.pchome.com.tw/f88tw/post/1376374671
http://mypaper.pchome.com.tw/f88tw/post/1374349018
http://mypaper.pchome.com.tw/f88tw/post/1374353877
http://mypaper.pchome.com.tw/f88tw/post/1373187437
http://mypaper.pchome.com.tw/f88tw/post/1371719766
http://mypaper.pchome.com.tw/f88tw/post/1370868817
http://mypaper.pchome.com.tw/f88tw/post/1370804491
http://mypaper.pchome.com.tw/f88tw/post/1370927756
http://mypaper.pchome.com.tw/f88tw/post/1370961380
http://mypaper.pchome.com.tw/f88tw/post/1370901511
http://mypaper.pchome.com.tw/f88tw/post/1370821089
http://mypaper.pchome.com.tw/f88tw/post/1370820567
http://mypaper.pchome.com.tw/f88tw/post/1370820447
http://mypaper.pchome.com.tw/f88tw/post/1370820408
http://mypaper.pchome.com.tw/f88tw/post/1370815618
http://mypaper.pchome.com.tw/f88tw/post/1370781143
http://mypaper.m.pchome.com.tw/f88tw/post/1370781143
Wacoal http://mypaper.pchome.com.tw/f88tw/post/1370961380
f88tw|Wacoal at 07:29AM, 2019/12/23.
f88tw
http://web.tuat.ac.jp/~morichan/cgi-bin/spboard/board.cgi?id=naibu&action=view&gul=401&page=1&go_cnt=0

http://www.khampia.go.th/board/show_webboard_question_detial.php?wqid=MDAwMTQ5&s_page=0  

http://www.khampia.go.th/board/show_webboard_question_detial.php?wqid=MDAwMTQ2&s_page=0

http://web.tuat.ac.jp/~morichan/cgi-bin/spboard/board.cgi?id=naibu&action=view&gul=391&page=1&go_cnt=0
f88tw at 07:49AM, 2019/12/31.
f88tw|Wacoal
http://web.tuat.ac.jp/~morichan/cgi-bin/spboard/board.cgi?id=naibu&action=view&gul=401&page=1&go_cnt=0

http://www.khampia.go.th/board/show_webboard_question_detial.php?wqid=MDAwMTQ5&s_page=0  

http://www.khampia.go.th/board/show_webboard_question_detial.php?wqid=MDAwMTQ2&s_page=0

http://web.tuat.ac.jp/~morichan/cgi-bin/spboard/board.cgi?id=naibu&action=view&gul=391&page=1&go_cnt=0


http://web.tuat.ac.jp/~morichan/cgi-bin/spboard/board.cgi?id=naibu&action=print_view&gul=401 
http://web.tuat.ac.jp/~morichan/cgi-bin/spboard/board.cgi?id=naibu&action=print_view&gul=391 
f88tw|Wacoal at 06:49AM, 2020/01/07.
Jeffreyhox
Не знаете, где брать потенциальных покупателей? Смотрите результаты продвижения сайта обуви за 4 месяца - https://tinyurl.com/tkh6op5
Jeffreyhox at 02:06PM, 2020/03/13.
Michaeltok
Продвинем ваш сайт на первую страницу Google по запросам "Обувь", "Женская Обувь", "Мужская Обувь" за 100 дней. Звоните 0506238751
Michaeltok at 07:46AM, 2020/03/16.
Michaeltok
Продвинем ваш сайт на первую страницу Google по запросам "Обувь", "Женская Обувь", "Мужская Обувь" за 100 дней. Звоните 0506238751
Michaeltok at 07:09AM, 2020/05/18.
f88tw
f88tw|Wacoal|I appreciate your kind assistance.
http://mypaper.pchome.com.tw/f88tw
http://mypaper.pchome.com.tw/f88tw/P1
http://mypaper.pchome.com.tw/f88tw/post/1379131888
http://mypaper.pchome.com.tw/f88tw/post/1378915496
http://mypaper.pchome.com.tw/f88tw/post/1377153372
http://mypaper.pchome.com.tw/f88tw/post/1376815127
http://mypaper.pchome.com.tw/f88tw/post/1376478820
http://mypaper.pchome.com.tw/f88tw/post/1376374671
http://mypaper.pchome.com.tw/f88tw/post/1374349018
http://mypaper.pchome.com.tw/f88tw/post/1374353877
http://mypaper.pchome.com.tw/f88tw/post/1373187437
http://mypaper.pchome.com.tw/f88tw/post/1371719766
http://mypaper.pchome.com.tw/f88tw/post/1370868817
http://mypaper.pchome.com.tw/f88tw/post/1370804491
http://mypaper.pchome.com.tw/f88tw/post/1370927756
http://mypaper.pchome.com.tw/f88tw/post/1370961380
http://mypaper.pchome.com.tw/f88tw/post/1370901511
http://mypaper.pchome.com.tw/f88tw/post/1370821089
http://mypaper.pchome.com.tw/f88tw/post/1370820567
http://mypaper.pchome.com.tw/f88tw/post/1370820447
http://mypaper.pchome.com.tw/f88tw/post/1370820408
http://mypaper.pchome.com.tw/f88tw/post/1370815618
http://mypaper.pchome.com.tw/f88tw/post/1370781143
http://mypaper.m.pchome.com.tw/f88tw/post/1370781143
Wacoal http://mypaper.pchome.com.tw/f88tw/post/1370961380
f88tw at 07:10AM, 2020/05/19.
f88tw
https://mypaper.pchome.com.tw/f88tw/post/1370781143
https://mypaper.m.pchome.com.tw/f88tw/post/1370781143
https://mypaper.pchome.com.tw/f88tw
https://mypaper.pchome.com.tw/f88tw/P1
https://mypaper.pchome.com.tw/f88tw/post/1379131888
https://mypaper.pchome.com.tw/f88tw/post/1378915496
https://mypaper.pchome.com.tw/f88tw/post/1377153372
https://mypaper.pchome.com.tw/f88tw/post/1376815127
https://mypaper.pchome.com.tw/f88tw/post/1376478820
f88tw at 01:22PM, 2021/04/10.
f88tw
f88tw|Wacoal|I appreciate your kind assistance.
https://mypaper.pchome.com.tw/f88tw
https://mypaper.pchome.com.tw/f88tw/P1
https://mypaper.pchome.com.tw/f88tw/post/1379131888
https://mypaper.pchome.com.tw/f88tw/post/1378915496
https://mypaper.pchome.com.tw/f88tw/post/1377153372
https://mypaper.pchome.com.tw/f88tw/post/1376815127
https://mypaper.pchome.com.tw/f88tw/post/1376478820
https://mypaper.pchome.com.tw/f88tw/post/1376374671
https://mypaper.pchome.com.tw/f88tw/post/1374349018
https://mypaper.pchome.com.tw/f88tw/post/1374353877
https://mypaper.pchome.com.tw/f88tw/post/1373187437
https://mypaper.pchome.com.tw/f88tw/post/1371719766
https://mypaper.pchome.com.tw/f88tw/post/1370868817
https://mypaper.pchome.com.tw/f88tw/post/1370804491
https://mypaper.pchome.com.tw/f88tw/post/1370927756
https://mypaper.pchome.com.tw/f88tw/post/1370961380
https://mypaper.pchome.com.tw/f88tw/post/1370901511
https://mypaper.pchome.com.tw/f88tw/post/1370821089
https://mypaper.pchome.com.tw/f88tw/post/1370820567
https://mypaper.pchome.com.tw/f88tw/post/1370820447
https://mypaper.pchome.com.tw/f88tw/post/1370820408
https://mypaper.pchome.com.tw/f88tw/post/1370815618
https://mypaper.pchome.com.tw/f88tw/post/1370781143
https://mypaper.m.pchome.com.tw/f88tw/post/1370781143
Wacoal https://mypaper.pchome.com.tw/f88tw/post/1370961380
f88tw at 10:42AM, 2021/04/29.
f88tw|Wacoal
f88tw|Wacoal|I appreciate your kind assistance.
http://mypaper.pchome.com.tw/f88tw/P1
http://mypaper.pchome.com.tw/f88tw/post/1379131888
http://mypaper.pchome.com.tw/f88tw/post/1378915496
http://mypaper.pchome.com.tw/f88tw/post/1377153372
http://mypaper.pchome.com.tw/f88tw/post/1376815127
http://mypaper.pchome.com.tw/f88tw/post/1376478820
http://mypaper.pchome.com.tw/f88tw/post/1376374671
http://mypaper.pchome.com.tw/f88tw/post/1374349018
http://mypaper.pchome.com.tw/f88tw/post/1374353877
http://mypaper.pchome.com.tw/f88tw/post/1373187437
http://mypaper.pchome.com.tw/f88tw/post/1371719766
http://mypaper.pchome.com.tw/f88tw/post/1370868817
http://mypaper.pchome.com.tw/f88tw/post/1370804491
http://mypaper.pchome.com.tw/f88tw/post/1370927756
http://mypaper.pchome.com.tw/f88tw/post/1370961380
http://mypaper.pchome.com.tw/f88tw/post/1370901511
http://mypaper.pchome.com.tw/f88tw/post/1370821089
http://mypaper.pchome.com.tw/f88tw/post/1370820567
http://mypaper.pchome.com.tw/f88tw/post/1370820447
http://mypaper.pchome.com.tw/f88tw/post/1370820408
http://mypaper.pchome.com.tw/f88tw/post/1370815618
http://mypaper.pchome.com.tw/f88tw/post/1370781143
Wacoal http://mypaper.pchome.com.tw/f88tw/post/1370961380
http://mypaper.pchome.com.tw/f88tw
http://mypaper.m.pchome.com.tw/f88tw/post/1379131888
http://mypaper.m.pchome.com.tw/f88tw/post/1378915496
http://mypaper.m.pchome.com.tw/f88tw/post/1377153372
http://mypaper.m.pchome.com.tw/f88tw/post/1376815127
http://mypaper.m.pchome.com.tw/f88tw/post/1376478820
http://mypaper.m.pchome.com.tw/f88tw/post/1376374671
http://mypaper.m.pchome.com.tw/f88tw/post/1374349018
http://mypaper.m.pchome.com.tw/f88tw/post/1374353877
http://mypaper.m.pchome.com.tw/f88tw/post/1373187437
http://mypaper.m.pchome.com.tw/f88tw/post/1371719766
http://mypaper.m.pchome.com.tw/f88tw/post/1370868817
http://mypaper.m.pchome.com.tw/f88tw/post/1370804491
http://mypaper.m.pchome.com.tw/f88tw/post/1370927756
http://mypaper.m.pchome.com.tw/f88tw/post/1370961380
http://mypaper.m.pchome.com.tw/f88tw/post/1370901511
http://mypaper.m.pchome.com.tw/f88tw/post/1370821089
http://mypaper.m.pchome.com.tw/f88tw/post/1370820567
http://mypaper.m.pchome.com.tw/f88tw/post/1370820447
http://mypaper.m.pchome.com.tw/f88tw/post/1370820408
http://mypaper.m.pchome.com.tw/f88tw/post/1370815618
http://mypaper.m.pchome.com.tw/f88tw/post/1370781143
Wacoal http://mypaper.m.pchome.com.tw/f88tw/post/1370961380
http://mypaper.m.pchome.com.tw/f88tw

https://mypaper.pchome.com.tw/f88tw/P1
https://mypaper.pchome.com.tw/f88tw/post/1379131888
https://mypaper.pchome.com.tw/f88tw/post/1378915496
https://mypaper.pchome.com.tw/f88tw/post/1377153372
https://mypaper.pchome.com.tw/f88tw/post/1376815127
https://mypaper.pchome.com.tw/f88tw/post/1376478820
https://mypaper.pchome.com.tw/f88tw/post/1376374671
https://mypaper.pchome.com.tw/f88tw/post/1374349018
https://mypaper.pchome.com.tw/f88tw/post/1374353877
https://mypaper.pchome.com.tw/f88tw/post/1373187437
https://mypaper.pchome.com.tw/f88tw/post/1371719766
https://mypaper.pchome.com.tw/f88tw/post/1370868817
https://mypaper.pchome.com.tw/f88tw/post/1370804491
https://mypaper.pchome.com.tw/f88tw/post/1370927756
https://mypaper.pchome.com.tw/f88tw/post/1370961380
https://mypaper.pchome.com.tw/f88tw/post/1370901511
https://mypaper.pchome.com.tw/f88tw/post/1370821089
https://mypaper.pchome.com.tw/f88tw/post/1370820567
https://mypaper.pchome.com.tw/f88tw/post/1370820447
https://mypaper.pchome.com.tw/f88tw/post/1370820408
https://mypaper.pchome.com.tw/f88tw/post/1370815618
https://mypaper.pchome.com.tw/f88tw/post/1370781143
Wacoal https://mypaper.pchome.com.tw/f88tw/post/1370961380
https://mypaper.pchome.com.tw/f88tw

https://mypaper.m.pchome.com.tw/f88tw/post/1379131888
https://mypaper.m.pchome.com.tw/f88tw/post/1378915496
https://mypaper.m.pchome.com.tw/f88tw/post/1377153372
https://mypaper.m.pchome.com.tw/f88tw/post/1376815127
https://mypaper.m.pchome.com.tw/f88tw/post/1376478820
https://mypaper.m.pchome.com.tw/f88tw/post/1376374671
https://mypaper.m.pchome.com.tw/f88tw/post/1374349018
https://mypaper.m.pchome.com.tw/f88tw/post/1374353877
https://mypaper.m.pchome.com.tw/f88tw/post/1373187437
https://mypaper.m.pchome.com.tw/f88tw/post/1371719766
https://mypaper.m.pchome.com.tw/f88tw/post/1370868817
https://mypaper.m.pchome.com.tw/f88tw/post/1370804491
https://mypaper.m.pchome.com.tw/f88tw/post/1370927756
https://mypaper.m.pchome.com.tw/f88tw/post/1370961380
https://mypaper.m.pchome.com.tw/f88tw/post/1370901511
https://mypaper.m.pchome.com.tw/f88tw/post/1370821089
https://mypaper.m.pchome.com.tw/f88tw/post/1370820567
https://mypaper.m.pchome.com.tw/f88tw/post/1370820447
https://mypaper.m.pchome.com.tw/f88tw/post/1370820408
https://mypaper.m.pchome.com.tw/f88tw/post/1370815618
https://mypaper.m.pchome.com.tw/f88tw/post/1370781143
Wacoal https://mypaper.m.pchome.com.tw/f88tw/post/1370961380
https://mypaper.m.pchome.com.tw/f88tw
f88tw|Wacoal at 10:43AM, 2021/08/18.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com