;(function($){ var defaults = { form:{name:'inform'}, text:{name:'intext',ratio:false,hover:'hover',focus:'focus',disabled:'disabled',readonly:'readonly'}, radio:{name:'inradio',hover:'hover',focus:'focus',checked:'checked',disabled:'disabled'}, checkbox:{name:'incheckbox',hover:'hover',focus:'focus',checked:'checked',disabled:'disabled'}, select:{name:'inselect',ratio:false,focus:'focus',size:10,open:'open',dropbox:'dropbox',listbox:'listbox',selected:'selected',disabled:'disabled',hover:'hover',multiple:'multiple',searchbox:'searchbox'}, button:{name:'inbutton',ratio:false,hover:'hover',focus:'focus',disabled:'disabled'}, textarea:{name:'intextarea',ratio:false,hover:'hover',focus:'focus',disabled:'disabled',readonly:'readonly'} }; var supportplaceholder = 'placeholder' in document.createelement('input'); var getbox = function(element, params){ if(element.prop('id')) { var id = element.attr('id'); } else { var id = 0; while($('#'+params.name+id).length>0){ id++; } var id = params.name + id; } var form = $(element.get(0).form); var disabled = element.is(':disabled') ? ' ' + params.disabled : ''; var wrap = $('
').css({'position':'relative','z-index':'1'}); var label = element.next(); if(!label.is('label') || (label.is('label') && label.find('input'))) { label = element.prev(); if(!label.is('label') || (label.is('label') && label.find('input'))) { label = element.parent(); if(!label.is('label')) { if(id) { label = form.find('label[for="'+id+'"]'); if(label.length<1){ label = element.wrap('').parent('label'); } } else { label = element.wrap('').parent('label'); } } } } element.attr('id',id); if(params.ratio) { var ratio = math.ceil(element.width()/label.parent().width()*100); wrap.css('width', (ratio>99?100:ratio) +'%'); element.css('width','100%'); } if(!label.prop('for')){ label.attr('for', id); } return {lab:label.css('position','relative').wrap(wrap),div:label.parent()}; }; var getwrap = function(element){ element = $(element); var wrap = element.next(); if(!wrap.is('label') || (wrap.is('label') && wrap.find('input'))) { wrap = element.prev(); if(!wrap.is('label') || (wrap.is('label') && wrap.find('input'))) { wrap = element.parent(); if(!wrap.is('label')) { if(id) { wrap = form.find('label[for="'+id+'"]'); if(wrap.length<1){ wrap = element; } } else { wrap = element; } } } } return wrap[0]; } $.fn.intext = $.fn.intextarea = function(params){ return this.each(function(){ if($(this).hasclass('hide')) { return false; } else { $(this).data('ele', getwrap(this).outerhtml); var ele = this, obj = $(ele).addclass('hide'); var opt = $.extend({},params,obj.data()); var lib = getbox(obj, opt); lib.div.data('opt', params); if(!supportplaceholder && obj.prop('placeholder')) { var tip = $('
'); tip.text(obj.attr('placeholder')); tip.css({ 'position':'absolute', 'top':lib.lab.get(0).clienttop+ele.clienttop, 'left':lib.lab.get(0).clientleft+ele.clientleft, 'color':'#aaaaaa','font-size':obj.css('font-size'), 'line-height':obj.css('line-height'), 'padding':obj.css('padding'), 'margin':obj.css('margin') }); if(ele.value !== '') { tip.hide(); } obj.on('input propertychange',function() { if (ele.value !== '') { tip.hide(); } else { tip.show(); } }); obj.after(tip); } $(obj,lib.div,lib.lab) .focus(function(){lib.lab.addclass(opt.focus);lib.div.css('z-index',2);}) .blur(function(){lib.lab.removeclass(opt.focus);lib.div.css('z-index',1);}) .mouseover(function(){lib.lab.addclass(opt.hover);}) .mouseout(function(){lib.lab.removeclass(opt.hover);}); if(ele.disabled){ lib.lab.addclass(opt.disabled); } if(ele.readonly){ lib.lab.addclass(opt.readonly); } } }); }; $.fn.inradio = $.fn.incheckbox = function(params){ return this.each(function(){ if($(this).hasclass('hide')) { return false; } else { $(this).data('ele', getwrap(this).outerhtml); var ele = this, obj = $(ele).addclass('hide').css({'position':'absolute','left':'-999%','opacity':'0'}); var opt = $.extend({},params,obj.data()); var lib = getbox(obj, opt); lib.div.data('opt', params); obj.change(function(){ if(ele.checked) { lib.div.addclass(opt.checked); lib.lab.addclass(opt.checked); } else { lib.div.removeclass(opt.checked); lib.lab.removeclass(opt.checked); } }); obj.click(function(){ if(obj.is(':disabled')) { return false; } obj.trigger('change'); if(obj.is('input:radio')){ $('input[name="' + ele.name + '"]',ele.form).not(obj).each(function(){ if($(this).is('input:radio')){ $(this).trigger('change'); } }); } }); lib.lab.hover( function(){ lib.div.addclass(opt.hover); $(this).addclass(opt.hover); }, function(){ lib.div.removeclass(opt.hover); $(this).removeclass(opt.hover); } ); obj.focus(function(){ lib.lab.addclass(opt.focus); lib.div.addclass(opt.focus); lib.div.css('z-index',2); }); obj.blur(function(){ lib.lab.removeclass(opt.focus); lib.div.removeclass(opt.focus); lib.div.css('z-index',1); }); if(ele.checked){ lib.lab.addclass(opt.checked);} if(ele.disabled){ lib.lab.addclass(opt.disabled);} } }); }; $.fn.inselect = function(params){ return this.each(function(){ if($(this).hasclass('hide')) { return false; } else { $(this).data('ele', getwrap(this).outerhtml); var ele = this, obj = $(ele).addclass('hide'); var opt = $.extend({},params,obj.data()); var lib = getbox(obj, opt); var select_seds = obj.find('option:selected'); var select_opts = obj.find('option'); var select_data = [], select_vals = []; var select_list = $('
').addclass(opt.listbox+(ele.multiple?' '+opt.multiple:'')).css('overflow-y','auto'); var select_multiple = '# of % selected'; lib.div.data('opt', params); obj.css({'position':'absolute','left':'-999%','opacity':'0','z-index':'-1'}); opt.size = obj.prop('size') ? obj.prop('size') : opt.size; select_data.push("
"); $('*', obj).each(function() { switch(this.tagname.tolowercase()){ case 'option': if($(this).parent('optgroup').length==0){ select_data.push('
'+this.text+'
'); } break; case 'optgroup': var isdisabled = this.disabled; select_data.push('
'+this.label+'
'); $(this).find('option').each(function() { select_data.push('
'+this.text+'
'); }); select_data.push('
'); break; } }); select_data.push("
"); select_list.html(select_data.join('')); if(select_seds.length !== select_opts.length){ select_mtp = select_multiple.replace('#', select_seds.length).replace('%', select_opts.length); } else { select_mtp = 'all selected'; } if(ele.multiple){ select_seds.each(function(){ select_vals.push((select_vals==''?'':', ')+$(this).text()); }); } else { select_vals.push(select_seds.text()); } var select_tit = $(''+(select_seds.length<5?select_vals.join(''):multiplestr)+''); var select_box = $('
').addclass(opt.dropbox).append(select_list); lib.lab.append(select_tit); lib.div.append(select_box); var option_height = select_list.css({'height':(obj.find('*').length>opt.size?select_list.find('dd.option').outerheight()*opt.size:'')}).find('dd.option').outerheight(); var option_list = select_list.find('dd.option'); var optgroup_list = select_list.find('dd.optgroup'); select_box.hide(); select_box.css({'position':'absolute','width':'100%','top':lib.lab.outerheight()}); optgroup_list.each(function(){ $(this).mousedown(function(){ return false; }); }); option_list.each(function(index){ $(this).mousedown(function(e){ if(ele.options[index].disabled || $(this).hasclass(opt.disabled)){ return false; } if(ele.multiple){ if(ele.options[index].selected) { ele.options[index].selected = false; $(this).addclass(opt.selected).find('span').addclass(opt.selected); } else { ele.options[index].selected = true; $(this).removeclass(opt.selected).find('span').removeclass(opt.selected); } } else { $(option_list).removeclass(opt.selected).find('span').removeclass(opt.selected); $(option_list).eq(index).addclass(opt.selected).find('span').addclass(opt.selected); ele.selectedindex = index; lib.lab.find('em').removeclass(opt.open); select_box.slideup(); } obj.change().focus(); return false; }); }); obj.bind('keydown', function(e){ if(!ele.disabled){ if(e.altkey && e.keycode==40) { lib.lab.find('em').addclass(opt.open); select_box.slidedown(); return false; } if(e.altkey&&e.keycode==38) { lib.lab.find('em').removeclass(opt.open); select_box.slideup(); return false; } if(e.keycode==13 || e.keycode==32) { if(select_box.is(':hidden')) { lib.lab.find('em').addclass(opt.open); select_box.slidedown(); } else { lib.lab.find('em').removeclass(opt.open); select_box.slideup(); } return false; } if(e.keycode==27) { lib.lab.find('em').removeclass(opt.open); select_box.slideup(); obj.focus(); return false; } } }); lib.lab.mousedown(function(){ if(!ele.disabled){ if(select_box.is(':hidden')) { lib.lab.find('em').addclass(opt.open); select_box.slidedown(); } else { lib.lab.find('em').removeclass(opt.open); select_box.slideup(); } } return false; }); obj.focus(function(){ lib.div.css('z-index',3); }); obj.blur(function(e){ if(!ele.disabled){ if(lib.div.find($(':focus')).length>0 || lib.div[0]==$(':focus')[0]) { } else { lib.div.css('z-index',2); lib.lab.find('em').removeclass(opt.open); select_box.slideup(function(){lib.div.css('z-index',1)}); } } }); obj.change(function(){ if(!ele.disabled){ var str = [],index; $(option_list).removeclass(opt.selected).find('span').removeclass(opt.selected); obj.find('option:selected').each(function(){ index = $(select_opts).index(this); $(option_list).eq(index).addclass(opt.selected).find('span').addclass(opt.selected); if(ele.multiple){ str.push((str==''?'':', ')+$(this).text()); if(str.length !== select_opts.length){ select_mtp = select_multiple.replace('#', str.length).replace('%', select_opts.length); } else { select_mtp = 'all selected'; } } else { str.push($(this).text()); } }); lib.lab.find('span').text(str.length<5?str.join(''):select_mtp); select_list.scrolltop(select_list.find('.option').eq(index).offset().top-select_list.offset().top+select_list.scrolltop()-select_list.outerheight()+select_list.find('.option').eq(index).outerheight()); } }); if(!ele.disabled){ lib.div.keyup(function(e){obj.focus();}); obj.focus(function(){lib.lab.addclass(opt.focus);}) .blur(function(){lib.lab.removeclass(opt.focus);}); $(lib.div,lib.lab) .mouseover(function(){lib.lab.addclass(opt.hover);}) .mouseout(function(){lib.lab.removeclass(opt.hover);}); } ele.disabled && lib.lab.addclass(opt.disabled); } }); }; $.fn.inreset = function(params) { return this.each(function(){ if($(this).data('inform') == 1){ var opt = $(this).data('opt'); if(opt.length<1 || $(this).hasclass(opt.form.name)) { var options = $.extend({},opt,params); $(this).removeclass(opt.form.name); $('input:text, input:password', this).indestroy(); $('input:checkbox', this).indestroy(); $('textarea', this).indestroy(); $('input:radio', this).indestroy(); $('select', this).indestroy(); $(this).inform(options); } } }); } $.fn.inredraw = function() { return this.each(function() { if($(this).hasclass('hide') || $(this).find('.hide').length > 0) { if($(this).hasclass('hide')){ var ele = $($(this).data('ele')); var wrap = $(this).parents('div.inelement'); var parent = wrap.parent(); } else if($(this).find('.hide').length > 0){ var ele = $($(this).find('.hide').data('ele')); if($(this).parents('.inelement').length > 0){ var wrap = $(this).parents('.inelement'); } else { var wrap = $(this); } var parent = wrap.parent(); } var opt = wrap.data('opt'); var parent = wrap.parent(); wrap.remove(); parent.append(ele); ele = ele.is('label') ? ele.find(':visible').first() : ele; if(ele.is('input:text, input:password')){ ele.intext(opt); } else if(ele.is('input:checkbox')){ ele.incheckbox(opt); } else if(ele.is('textarea')){ ele.intextarea(opt); } else if(ele.is('input:radio')){ ele.inradio(opt); } else if(ele.is('select')){ ele.inselect(opt); } } }) } $.fn.indestroy = function() { return this.each(function() { if($(this).data('inform') == 1) { var opt = $(this).data('opt'); if(opt !== undefined){ if(opt.length<1 || $(this).hasclass(opt.form.name)) { $(this).removeclass(opt.form.name); $('input:text, input:password', this).indestroy(); $('input:checkbox', this).indestroy(); $('textarea', this).indestroy(); $('input:radio', this).indestroy(); $('select', this).indestroy(); } } } else if($(this).hasclass('hide')){ var ele = $($(this).data('ele')); var wrap = $(this).parents('div.inelement'); wrap.after(ele).remove(); } else if($(this).find('.hide').length > 0){ var ele = $($(this).find('.hide').data('ele')); if($(this).parents('.inelement').length > 0){ var wrap = $(this).parents('.inelement'); } else { var wrap = $(this); } wrap.after(ele).remove(); } }); } $.fn.inform = function(params) { var options = $.extend({},defaults,params); return this.each(function() { var self = $(this); self.data({'opt':options, 'inform':1}); if(self.hasclass(options.form.name)) { return true; } else { $('input:text, input:password', this).intext(options.text); $('input:checkbox', this).incheckbox(options.checkbox); $('textarea', this).intextarea(options.textarea); $('input:radio', this).inradio(options.radio); $('select', this).inselect(options.select); self.addclass(options.form.name); } }); } })(jquery);