(function ($) { var $view = function (str) { return $(eval('\'' + str.replace(/<%=([\w]+)\%>/g, '\' + $1 + \'') + '\'')); }, createuiid = function (el, prefix) { var prefix = (!prefix && typeof prefix != 'string') ? 'form' : prefix; if (el.attr('id')) { return prefix + '_ui_id_' + el.attr('id'); } else if (el.attr('name')) { return prefix + '_aykj_' + el.attr('name').replace('[]', '').replace('[', '_').replace('\']', '').replace( ']', '').replace('\'', '').replace('"', ''); } else { return prefix + '_ui_the_' + 'n'; } }, cssselect = function (config) { var optionsposition; if (config) { optionsposition = config.position; } if ($(this).length <= 0) { return false; } return $(this).each(function () { var $thisel = $(this), $body=$("body"), selwidth=0, $optsel = $thisel.children('option'), $uiel, thisevs = $thisel.on('events'), uiid = createuiid($thisel, 'select'), optswidth = 0, optsposition, optionsposition, optionslimit, tpl = { wrapper: '
', select: '
', mtselect: '
',//多选 selectlt: '
', selectrt: '
', options: '
', optionsinner: '
', option: '
', mtoption: '
',//多选 optioninner: '', mtoptioninner: '' }, $selectel = $view(tpl.select),$mtselectel = $view(tpl.mtselect), $sltel = $view(tpl.selectlt), $srtel = $view(tpl.selectrt), $optionsel = $view(tpl.options), $optionsinnerel = $view(tpl.optionsinner), init = function () { selwidth=$thisel.attr("width") if ($thisel.length <= 1 && $thisel.get(0).tagname === 'select' && !$thisel.attr('multiple') && $thisel.children('optgroup').length <= 0) { //console.log(uiid) $uiel = $view(tpl.wrapper).attr("id",uiid) //console.log($uiel) $('#' + uiid).remove(); $thisel.show(); $thisel.hide(); $uiel.css({'width':selwidth}) $uiel.append($selectel).append($optionsel.append($optionsinnerel)); $uiel.click(function (event) { event.stoppropagation(); }); $selectel.append($sltel).append($srtel); $selectel.click(events.selectclick); $selectel.hover(events.selecthover, events.selectnormal); $optsel.each(function (i) { var optel = $(this), optiontxt = optel.text(), $optionel = $view(tpl.option).append($view(tpl.optioninner).text(optiontxt)); if (optel.attr('disabled')) { $optionel.addclass('disabled'); } if (optel.attr('default')=='true') { $optionel.addclass('default'); } /*$optionel.css({ float: 'left' });*/ $optionel.not('.disabled').hover(events.optionhover, events.optionnormal); $optionel.not('.disabled').click(events.optionclick); $optionsinnerel.append($optionel); if (optel.attr('selected')) { $sltel.text(optiontxt); $optionel.addclass('selected'); } }); $thisel.setoptions = function () { if (config && config.position) { optionsposition = config.position; } if (config && config.limit) { optionslimit = config.limit; } /*$optionsinnerel.children('.optionbox').css({ float: 'none' });*/ var top, sltposition = $selectel.position(), sltedposition = $optionsinnerel.children('.selected').position(), eachoptheight = $optionsinnerel.outerheight() / $optsel.length, optsheight = 'auto'; if (optionslimit) { if (optionslimit != 'auto' && $optsel.length > optionslimit) { optsheight = math.round(eachoptheight) * optionslimit; } else { optsheight = 'auto'; } } else { if ($optsel.length > 5) { optsheight = math.round(eachoptheight) * 5; } else { optsheight = 'auto'; } } sltposition.top = sltposition.top + $selectel.outerheight(); $optionsel.css({ height: math.round(optsheight), //top: sltposition.top + 1 }); if (optsposition && ($(window).height() + $(document).scrolltop() < $selectel.offset().top+$selectel.height()+ $optionsel.outerheight())) { //top = sltposition.top - $optionsel.outerheight() - $selectel.outerheight() - 3; $optionsel.addclass("up").removeclass("dn") } else { //top = sltposition.top; $optionsel.addclass("dn").removeclass("up") } $optionsel.scrolltop(math.round(sltedposition.top - eachoptheight)); $optionsel.css({ /*'top': top + 1, 'left': sltposition.left,*/ 'overflow-y': 'auto', 'overflow-x': 'hidden' }); if (!optsposition) { optsposition = $optionsel.position(); } }; $thisel.before($uiel); $thisel.setoptions(); $optionsel.hide(); $thisel.trigger('init',[$thisel]) }else{ //多选start var mtid=$thisel.siblings("input[type=hidden]").attr("name") $uiel = $view(tpl.wrapper).attr("id",mtid) $('#' + mtid).remove(); $thisel.show(); $thisel.hide(); $uiel.css({'width':selwidth}) $uiel.append($mtselectel).append($optionsel.append($optionsinnerel)); $uiel.click(function (event) { event.stoppropagation(); }); $mtselectel.append($sltel).append($srtel); $mtselectel.click(events.selectclick); $mtselectel.hover(events.selecthover, events.selectnormal); var myarry=[] var valarry=[] var myhtml='' $optsel.each(function (i) { var optel = $(this), defaulttext, optiontxt = optel.text(), $optionel = $view('
').append($view(tpl.optioninner).text(optiontxt).append('')); if (optel.attr('disabled')) { $optionel.addclass('disabled'); } if (optel.attr('default')=='true') { defaulttext=optel.text() $optionel.addclass('default'); } //$optionel.not('.disabled').hover(events.optionhover, events.optionnormal); $optionel.not('.disabled,.default').click(events.mtoptionclick); if($optionel.is('.default')){ $optionel.find("i").remove() $optionel.click(function(){ events.defaultoptionclick() }) } $optionsinnerel.append($optionel); if (optel.attr('selected')) { myarry.push($(this).text()) valarry.push($(this).val()) myhtml+='
'+optiontxt+'
' $optionel.addclass('selected'); } $sltel.text(defaulttext); if(optel.attr("selected")){ if (! (/msie [6|7|8]/i.test(navigator.useragent))) { $sltel.html(myhtml); }else{ $sltel.text(myarry.join(',')); } //console.log() $thisel.siblings("input[type=hidden]").val(valarry.join(',')) } }); $sltel.children().click(events.mtrtlclick) $thisel.setoptions = function () { if (config && config.position) { optionsposition = config.position; } if (config && config.limit) { optionslimit = config.limit; } var top, sltposition = $mtselectel.position(), sltedposition = $optionsinnerel.children('.selected').position(), eachoptheight = $optionsinnerel.outerheight() / $optsel.length, optsheight = 'auto'; if (optionslimit) { if (optionslimit != 'auto' && $optsel.length > optionslimit) { optsheight = math.round(eachoptheight) * optionslimit; } else { optsheight = 'auto'; } } else { if ($optsel.length > 5) { optsheight = math.round(eachoptheight) * 5; } else { optsheight = 'auto'; } } sltposition.top = sltposition.top + $mtselectel.outerheight(); $optionsel.css({ height: math.round(optsheight), //top: sltposition.top + 1 }); if (optsposition && ($(window).height() + $(document).scrolltop() < $mtselectel.offset().top+$mtselectel.height() + $optionsel.outerheight())) { //top = sltposition.top - $optionsel.outerheight() - $mtselectel.outerheight() - 3; $optionsel.addclass("up").removeclass("dn") } else { //top = sltposition.top; $optionsel.addclass("dn").removeclass("up") } //$optionsel.scrolltop(math.round(sltedposition.top - eachoptheight)); $optionsel.css({ /*'top': top + 1, 'left': sltposition.left,*/ 'overflow-y': 'auto', 'overflow-x': 'hidden' }); if (!optsposition) { optsposition = $optionsel.position(); } }; $thisel.before($uiel); $thisel.setoptions(); $optionsel.hide(); //多选end } }, events = $.extend({ selectnormal: function () { $(this).removeclass('shover'); }, selecthover: function () { $(this).addclass('shover'); }, selectclick: function () { if ($optionsel.css('display') != 'none') { handlers.selectoff(); } else { handlers.selecton(); $thisel.setoptions(); } }, optionnormal: function () { $(this).removeclass('ohover'); }, optionhover: function () { $(this).addclass('ohover'); }, optionclick: function () { handlers.selected(this); }, mtoptionclick: function () { handlers.mtselected(this); }, defaultoptionclick: function () { handlers.defaultselect(this); }, documentclick: function () { handlers.selectoff(); }, mtrtlclick:function(event){ event.stoppropagation(); handlers.mtrtl(this) } }, function () {}), handlers = $.extend({ selecton: function () { this.selectoff(); $selectel.addclass('spressdown'); $mtselectel.addclass('spressdown'); $optionsel.show(); $(document).one('click', events.documentclick); }, selectoff: function () { $thisel.unbind('click'); $('.aykj_selectbox').removeclass('spressdown'); $('.aykj_optionsbox').hide(); }, defaultselect: function (el) { var i = $optionsinnerel.children('.aykj_optionbox').index(); $optionsinnerel.children('.aykj_optionbox').removeclass('selected'); //$thisel.children().attr('selected', false) //$thisel.children().eq(index).attr('selected','true') if (thisevs && thisevs.change && thisevs.change.length > 0) { i=0 $thisel.children().eq(i).attr('selected', true).siblings().removeattr("selected"); $thisel.trigger('change'); $sltel.text($thisel.children().eq(i).text()); $thisel.siblings("input[type=hidden]").val('') } $thisel[0].selectedindex = i; this.selectoff(); }, selected: function (el) { var i = $optionsinnerel.children('.aykj_optionbox').index(el); $optionsinnerel.children('.aykj_optionbox').removeclass('selected'); $(el).addclass('selected'); $sltel.text($(el).text()); if (thisevs && thisevs.change && thisevs.change.length > 0) { $thisel[0].selectedindex = i; $.each(thisevs.change, function () { $thisel.one('click', this.handler); $thisel.click(); }); $thisel.children().eq(i).attr('selected', true).siblings().removeattr("selected"); $thisel.trigger('change'); $thisel.trigger('onselectf',[i,$thisel]) $.each(thisevs.change, function () { $thisel.one('click', this.handler); $thisel.click(); }); } $thisel[0].selectedindex = i; this.selectoff(); }, mtselected: function (el) { //alert(1) $sltel.empty() var i = $optionsinnerel.children('.aykj_optionbox').index(el); $thisel.children().attr('selected', false) if($(el).hasclass("selected")){ $(el).removeclass('selected'); $('#' + uiid).find('.seldd'+i+'').remove(); }else{ $(el).addclass('selected'); } var mayhtml=''; var mayhtml2=[]; var valhtml=[]; $optionsinnerel.children().each(function(index){ if($(this).hasclass("selected")){ mayhtml+=$(this).prop('outerhtml') //console.log() valhtml.push($thisel.children().eq(index).val()) mayhtml2.push($(this).text()) $thisel.children().eq(index).attr('selected','true') } }) if (! (/msie [6|7|8]/i.test(navigator.useragent))) { $sltel.html(mayhtml); }else{ $sltel.text(mayhtml2.join(',')); } $thisel.siblings("input[type=hidden]").val(valhtml.join(',')) if($optionsinnerel.children('.selected').length==0){ this.defaultselect() } $sltel.children().unbind("click") $sltel.children().click(events.mtrtlclick) $thisel[0].selectedindex = i; }, mtrtl:function(el){ var mayindex; var mtrtlval=[]; $optionsinnerel.children().each(function(index){ if($(this)[0].classname === $(el)[0].classname){ mayindex=$(this).index() $thisel.children().eq(index).removeattr('selected') } }) //console.log(mtrtlval) var str = $(el)[0].classname str=str.split(" ") $sltel.children('.'+str[2]).remove() $optionsinnerel.children('.'+str[2]).removeclass("selected") if($optionsinnerel.children('.selected').length==0){ this.defaultselect() } $optionsinnerel.children().each(function(index){ if($(this).hasclass("selected")){ mtrtlval.push($thisel.children().eq(index).val()) } }) $thisel.siblings("input[type=hidden]").val(mtrtlval.join(',')) } }, function () {}); return init(); }); }, cssradio=function(){ return $(this).each(function(){ var _this=$(this); _this.children("input[type='radio']").each(function(index){ var thisradio=$(this), tpl={ wrap: '
', radio: '
', radioicn: '
', radiotext: '
' }, $wrap=$view(tpl.wrap), $radio=$view(tpl.radio), $radioicn=$view(tpl.radioicn), $radiotext=$view(tpl.radiotext), init=function(){ $wrap.attr("data-index",index) $wrap.append($radio.append($radioicn).append($radiotext)) $radiotext.text(thisradio.attr("title")) thisradio.hide() thisradio.prev("div").remove() if(thisradio.attr("checked")){ $wrap.addclass("checked") } if (thisradio.attr('disabled')) { $wrap.addclass('disabled'); } $wrap.not(".disabled").click(events.radioclick) //$wrap.each(function(){}) thisradio.before($wrap); }, events=$.extend({ radioclick: function () { var clickthis=$(this) var myindex=clickthis.data('index') clickthis.addclass("checked").siblings().removeclass("checked") thisradio.attr("checked",'true').siblings('input').removeattr("checked") _this.trigger('doneclick',[thisradio]) } }, function () {}); return init(); }) }) }, csscheckbox=function(){ return $(this).each(function(){ var _this=$(this),checkval=[]; _this.children("input[type='checkbox']").each(function(){ var thischeck=$(this), tpl={ wrap: '
', radio: '
', radioicn: '
', radiotext: '
' }, $wrap=$view(tpl.wrap), $check=$view(tpl.radio), $checkicn=$view(tpl.radioicn), $checktext=$view(tpl.radiotext), init=function(){ $wrap.append($check.append($checkicn).append($checktext)) $checktext.text(thischeck.attr("title")) thischeck.hide() thischeck.prev("div").remove() if(thischeck.attr("checked")){ // console.log(thischeck.val()) $wrap.addclass("checked") checkval.push(thischeck.val()) } if (thischeck.attr('disabled')) { $wrap.addclass('disabled'); } $wrap.not(".disabled").click(events.checkboxclick) //$wrap.each(function(){}) thischeck.before($wrap); }, events=$.extend({ checkboxclick: function () { var clickthis=$(this) checkval=[] if(clickthis.hasclass("checked")){ clickthis.removeclass("checked") thischeck.removeattr("checked") }else{ clickthis.addclass("checked") thischeck.attr("checked",'true') } _this.children("input[type='checkbox']").each(function(){ if($(this).attr("checked")){ checkval.push($(this).val()) } }) clickthis.siblings("input[type='hidden']").val(checkval) } }, function () {}); return init(); }) //console.log(checkval) _this.find("input[type='hidden']").val(checkval) }) } $.fn.extend({ cssselect: cssselect, cssradio:cssradio, csscheckbox:csscheckbox }); })(jquery);