Guest User

Tweeked version of Enhancing forms

a guest
Dec 16th, 2010
575
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

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×