daily pastebin goal
28%
SHARE
TWEET

Tweeked version of Enhancing forms

a guest Dec 16th, 2010 503 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // JavaScript Document
  2.  
  3. (function ($) {
  4. $.widget("ui.form", {
  5.   _init:function() {
  6.     var object = this;
  7.     var form = this.element;
  8.     var inputs = form.find("input , select ,textarea");
  9.  
  10.     form.find("fieldset").addClass("ui-widget-content");
  11.     form.find("legend").addClass("ui-widget-header ui-corner-all");
  12.     form.addClass("ui-widget");
  13.  
  14.     $.each(inputs, function() {
  15.       $(this).addClass('ui-state-default ui-corner-all');
  16.       $(this).wrap("<label />");
  17.  
  18.       if ($(this).is(":reset ,:submit"))
  19.         object.buttons(this);
  20.       else if ($(this).is(":checkbox"))
  21.         object.checkboxes(this);
  22.       else if ($(this).is("input[type='text']") || $(this).is("textarea") || $(this).is("input[type='password']"))
  23.         object.textelements(this);
  24.       else if ($(this).is(":radio"))
  25.         object.radio(this);
  26.       else if ($(this).is("select"))
  27.         object.selector(this);
  28.  
  29.       if ($(this).hasClass("date")) {
  30.         $(this).datepicker();
  31.  
  32.  
  33.       }
  34.  
  35.  
  36.     });
  37.     $(".hover").hover(function() {
  38.       $(this).addClass("ui-state-hover");
  39.     }, function() {
  40.       $(this).removeClass("ui-state-hover");
  41.     });
  42.  
  43.   },
  44.   textelements:function(element) {
  45.  
  46.     $(element).bind({
  47.  
  48.       focusin: function() {
  49.         $(this).toggleClass('ui-state-focus');
  50.       },
  51.       focusout: function() {
  52.         $(this).toggleClass('ui-state-focus');
  53.       }
  54.     });
  55.  
  56.   },
  57.   buttons:function(element) {
  58.     if ($(element).is(":submit")) {
  59.       $(element).addClass("ui-priority-primary ui-corner-all ui-state-disabled hover");
  60.       $(element).bind("click", function(event) {
  61.         event.preventDefault();
  62.       });
  63.     }
  64.     else if ($(element).is(":reset"))
  65.       $(element).addClass("ui-priority-secondary ui-corner-all hover");
  66.     $(element).bind('mousedown mouseup', function() {
  67.       $(this).toggleClass('ui-state-active');
  68.     }
  69.  
  70.       );
  71.   },
  72.  
  73.   checkboxes:function(element) {
  74.     $(element).parent("label").after("<span />");
  75.     var parent = $(element).parent("label").next();
  76.     $(element).addClass("ui-helper-hidden");
  77.     parent.css({width:16,height:16,display:"block"});
  78.  
  79.     parent.wrap("<span class='ui-state-default ui-corner-all' style='display:inline-block;width:16px;height:16px;margin-right:5px;'/>");
  80.  
  81.     parent.parent().addClass('hover');
  82.  
  83.  
  84.     parent.parent("span").click(function(event) {
  85.       $(this).toggleClass("ui-state-active");
  86.       parent.toggleClass("ui-icon ui-icon-check");
  87.       $(element).click();
  88.  
  89.     });
  90.  
  91.   },
  92.   radio:function(element) {
  93.     $(element).parent("label").after("<span />");
  94.     var parent = $(element).parent("label").next();
  95.     $(element).addClass("ui-helper-hidden");
  96.     parent.addClass("ui-icon ui-icon-radio-off");
  97.     parent.wrap("<span class='ui-state-default ui-corner-all' style='display:inline-block;width:16px;height:16px;margin-right:5px;'/>");
  98.  
  99.     parent.parent().addClass('hover');
  100.  
  101.  
  102.     parent.parent("span").click(function(event) {
  103.       $(this).toggleClass("ui-state-active");
  104.       parent.toggleClass("ui-icon-radio-off ui-icon-bullet");
  105.       $(element).click();
  106.  
  107.     });
  108.   },
  109.   selector:function(element) {
  110.     var parent = $(element).parent().first();
  111.     parent.css({"display":"block",width:140,height:21}).addClass("ui-state-default ui-corner-all");
  112.     $(element).addClass("ui-helper-hidden");
  113.     parent.append("<span style='float:left;'></span><span style='float:right;display:inline-block' class='ui-icon ui-icon-triangle-1-s' ></span>");
  114.     parent.after("<ul class=' ui-helper-reset ui-widget-content ui-helper-hidden' style='position:inherit;z-index:50;width:140px;' ></ul>");
  115.    
  116.     //Allow the label elements to be interact the keyboard
  117.     $(parent).attr('tabindex','1');
  118.    
  119.     $.each($(element).find("option"), function() {
  120.  
  121.       $(parent).next("ul").append("<li class='hover' style='cursor: pointer'>" + $(this).html() + "</li>");
  122.  
  123.     });
  124.    
  125.     //if there is a value set, make it the default for the selector
  126.     if ($(element).val() != '') {
  127.                 $(parent).children('span').first().html($(element).children("option:selected").text());
  128.         }
  129.    
  130.     $(parent).next("ul").find("li").click(function() {
  131.       $(parent).children('span').first().html($(this).html());
  132.       $(element).val($(this).html());
  133.       $(parent).next().slideToggle('fast');
  134.     });
  135.  
  136.     $(parent).click(function(event) {
  137.       $(this).next().slideToggle('fast');
  138.       event.preventDefault();
  139.     }).keydown(function(event) {
  140.         //if the selection list isnt showing, show it.
  141.         if($(parent).next("ul").css("display") =="none"){
  142.             $(parent).click();
  143.         }
  144.         //if the enter key is pressed to select an item
  145.         if (event.keyCode == '13' && $(parent).next("ul").find("li").hasClass("ui-state-hover")) {
  146.                
  147.                   //Find the element we want to select and assign it to useElement
  148.                   useElement =  $(parent).next("ul").find("li.ui-state-hover");
  149.                  
  150.                   //Update the good looking label
  151.                   $(parent).children('span').first().html($(useElement).html());
  152.                  
  153.                   //Update the real element
  154.                   $(element).val($(useElement).html());
  155.                  
  156.                   //Hide the select
  157.                   $(parent).next().slideToggle('fast');
  158.         }
  159.        
  160.         //if key press is right or down arrow
  161.         if (event.keyCode == '39'||event.keyCode == '40') {
  162.             //check if we are already hovering over an item
  163.             if(!$(parent).next("ul").find("li").hasClass("ui-state-hover")){
  164.                 //No items are being hovered over so lets add the hover class
  165.                 $(parent).next("ul").children("li").first().addClass("ui-state-hover");
  166.             }else{
  167.                
  168.                 //An item is being hovered over, lets get that item assign it to a variable
  169.                 rMe = $(parent).next("ul").find("li.ui-state-hover");
  170.                
  171.                 //Get the next element that we can select and add the hover class
  172.                 $(parent).next("ul").find("li.ui-state-hover").next().addClass("ui-state-hover");
  173.                
  174.                 //Remove the hover class from the old element
  175.                 $(rMe).removeClass("ui-state-hover");
  176.             }
  177.            
  178.             event.preventDefault();
  179.         }
  180.        
  181.         //if key press is left or up arrow
  182.         if (event.keyCode == '38'||event.keyCode == '37') {
  183.             //check if we are already hovering over an item
  184.             if(!$(parent).next("ul").find("li").hasClass("ui-state-hover")){
  185.                 //No items are being hovered over so lets add the hover class
  186.                 $(parent).next("ul").children("li").first().addClass("ui-state-hover");
  187.             }else{
  188.                 //An item is being hovered over, lets get that item assign it to a variable
  189.                 rMe = $(parent).next("ul").find("li.ui-state-hover");
  190.                
  191.                 //Get the previous element that we can select and add the hover class
  192.                 $(parent).next("ul").find("li.ui-state-hover").prev().addClass("ui-state-hover");
  193.                
  194.                 //Remove the hover class from the old element
  195.                 $(rMe).removeClass("ui-state-hover");
  196.             }
  197.             event.preventDefault();
  198.         }
  199.     });
  200.  
  201.   }
  202. });
  203.  
  204.  
  205. })(jQuery);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top