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
sorry, 'style: {anykey:somevalue}' should be 'styles: {anykey:somevalue}' (added s)
<a href="#comment818">J!P wrote:</a>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:09PM, 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.

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 - 2019 dhtmlgoodies.com