Drupal Technical

[Drupal] Adding Spinner style to textboxes in Drupal 7

Sarath.mohan | | 2 min read

Forms can be considered as an integral part of websites. Forms can be included to a Drupal website using Form API. Form API is so extendable that we can customize almost all of the form API elements. In this article I will be explaining 'how to increase the "coolness" of your form elements by adding "spinner" style.

Spinner textboxes allows easy inputting of numerical values. We can directly add values to the textbox, change the values using the keyboard navigation keys or by using the mousewheel. It provides faster inputting in smart phones rather than clicking the textbox and typing in the keypad.

Spinner can be used for date and currency fields also. For that we can specify the number format of spinner. In order to user the spinner textbox, we need to use the spinner jQuery which can be downloaded from the github: "https://github.com/btburnett3/jquery.ui.spinner". After adding the jQuery in drupal, we can use the spinner() javascript function for the required textboxes to make it a spinner textbox.

The following code sows the usage of spinner function by adding a drupal behavior. It adds the spinner style to the class 'spinner_textfield'


  (function ($) {
  Drupal.behaviors.responsive_blog_tabs_menu_change = {
    attach: function(context, settings) {
      $('.spinner_textfield').spinner();
    }
  }
  })(jQuery);

The important attributes for the spinner function includes the following:

  • max: the maximum value of the spinner textbox. ie it can be spinned up to 'max'.
  • min: the minimum value of the spinner textbox. ie it can be spinned down to 'min'.
  • step: the step value specifies the value to be incremented/decremented on each spin.
  • numberFormat: specifies the different numerical formats like currency or date. This value is passed to the globalize jQuery which handles the formatting of number and dates.

Drop your comments below about this cool feature!

References:

  1. https://github.com/btburnett3/jquery.ui.spinner
 

 

Related Topics