Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Fix for enhancing-forms-using-jquery-ui

By: a guest on Aug 29th, 2010  |  syntax: JavaScript  |  size: 5.00 KB  |  hits: 629  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
This paste has a previous version, view the difference. Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  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. });
create a new version of this paste RAW Paste Data