Guest User

Fix for enhancing-forms-using-jquery-ui

a guest
Aug 29th, 2010
1,471
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // JavaScript Document
  2.  
  3.  
  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.     var div = jQuery("<div />", {
  38.       css:{
  39.         width:20,height:16,
  40.         margin:10,textAlign:"center"
  41.       }
  42.  
  43.     }).addClass("ui-state-default drag");
  44.     var no = Math.ceil(Math.random() * 4);
  45.     var holder = jQuery("<div />", {
  46.       id:'droppable',
  47.       text:"Drop the box with " + no + " here",
  48.       css:{
  49.         width:100,height:100,float:'right',fontWeight:'bold'}
  50.     }).addClass('ui-state-default');
  51.     $(form).find("fieldset").append(holder);
  52.     for (var i = 1; i < 5; i++) {
  53.  
  54.       $(form).find("fieldset").append(div.clone().html(i).attr("id", i));
  55.  
  56.     }
  57.  
  58.  
  59.     $(".drag").draggable({containment: 'parent'});
  60.     $("#droppable").droppable({
  61.       accept:'#' + no,
  62.       drop: function(event, ui) {
  63.         $(this).addClass('ui-state-highlight').html("Right One");
  64.  
  65.         form.find(":submit").removeClass('ui-state-disabled').unbind('click');
  66.       }
  67.     });
  68.     $(".hover").hover(function() {
  69.       $(this).addClass("ui-state-hover");
  70.     }, function() {
  71.       $(this).removeClass("ui-state-hover");
  72.     });
  73.  
  74.   },
  75.   textelements:function(element) {
  76.  
  77.     $(element).bind({
  78.  
  79.       focusin: function() {
  80.         $(this).toggleClass('ui-state-focus');
  81.       },
  82.       focusout: function() {
  83.         $(this).toggleClass('ui-state-focus');
  84.       }
  85.     });
  86.  
  87.   },
  88.   buttons:function(element) {
  89.     if ($(element).is(":submit")) {
  90.       $(element).addClass("ui-priority-primary ui-corner-all ui-state-disabled hover");
  91.       $(element).bind("click", function(event) {
  92.         event.preventDefault();
  93.       });
  94.     }
  95.     else if ($(element).is(":reset"))
  96.       $(element).addClass("ui-priority-secondary ui-corner-all hover");
  97.     $(element).bind('mousedown mouseup', function() {
  98.       $(this).toggleClass('ui-state-active');
  99.     }
  100.  
  101.       );
  102.   },
  103.  
  104.   checkboxes:function(element) {
  105.     $(element).parent("label").after("<span />");
  106.     var parent = $(element).parent("label").next();
  107.     $(element).addClass("ui-helper-hidden");
  108.     parent.css({width:16,height:16,display:"block"});
  109.  
  110.     parent.wrap("<span class='ui-state-default ui-corner-all' style='display:inline-block;width:16px;height:16px;margin-right:5px;'/>");
  111.  
  112.     parent.parent().addClass('hover');
  113.  
  114.  
  115.     parent.parent("span").click(function(event) {
  116.       $(this).toggleClass("ui-state-active");
  117.       parent.toggleClass("ui-icon ui-icon-check");
  118.       $(element).click();
  119.  
  120.     });
  121.  
  122.   },
  123.   radio:function(element) {
  124.     $(element).parent("label").after("<span />");
  125.     var parent = $(element).parent("label").next();
  126.     $(element).addClass("ui-helper-hidden");
  127.     parent.addClass("ui-icon ui-icon-radio-off");
  128.     parent.wrap("<span class='ui-state-default ui-corner-all' style='display:inline-block;width:16px;height:16px;margin-right:5px;'/>");
  129.  
  130.     parent.parent().addClass('hover');
  131.  
  132.  
  133.     parent.parent("span").click(function(event) {
  134.       $(this).toggleClass("ui-state-active");
  135.       parent.toggleClass("ui-icon-radio-off ui-icon-bullet");
  136.       $(element).click();
  137.  
  138.     });
  139.   },
  140.   selector:function(element) {
  141.     var parent = $(element).parent().first();
  142.     parent.css({"display":"block",width:140,height:21}).addClass("ui-state-default ui-corner-all");
  143.     $(element).addClass("ui-helper-hidden");
  144.     parent.append("<span style='float:left;'></span><span style='float:right;display:inline-block' class='ui-icon ui-icon-triangle-1-s' ></span>");
  145.     parent.after("<ul class=' ui-helper-reset ui-widget-content ui-helper-hidden' style='position:absolute;z-index:50;width:140px;' ></ul>");
  146.     $.each($(element).find("option"), function() {
  147.  
  148.       $(parent).next("ul").append("<li class='hover' style='cursor: pointer'>" + $(this).html() + "</li>");
  149.  
  150.     });
  151.     $(parent).next("ul").find("li").click(function() {
  152.       $(parent).children('span').first().html($(this).html());
  153.       $(element).val($(this).html());
  154.       $(parent).next().slideToggle('fast');
  155.     });
  156.  
  157.     $(parent).click(function(event) {
  158.       $(this).next().slideToggle('fast');
  159.       event.preventDefault();
  160.     });
  161.   }
  162. });
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.

×