NHibernate+spring.net+jquery打造UI控件库(mvc+webform两种实现) combox,shadow控件的初步实现(包括键盘，过滤功能)（附代码下载）

         如果这个控件不是已经着手几天了，本不打算写下去啦。既然完成啦，就发给大家用用吧。

         效果图先上吧：没兴趣的就没必要看下去，免得浪费大家的时间

        

         先说说阴影控件吧：

           IE：<div class="sw-ie-shadow"></diiv>然后用滤镜过滤边缘

           其他浏览器：      

代码

1 < div class ="sw-shadow" >
2 < div class ="sh" >
3 < div class ="shl" ></ div >
4 < div class ="shr" ></ div >
5 < div class ="shc" ></ div >
6 </ div >
7 < div class ="sc" >
8 < div class ="scl" ></ div >
9 < div class ="scr" ></ div >
10 < div class ="scc" ></ div >
11 </ div >
12 < div class ="sf" >
13 < div class ="sfl" ></ div >
14 < div class ="sfr" ></ div >
15 < div class ="sfc" ></ div >
16 </ div >
17 </ div >
18
19

       实现的目标:

          $(div).shadow();返回一个shadow对象。

       具体实现以下:

    

代码

1 ( function ($) {
2 Sw.Namespace( " $.sw " );
3 $.fn.extend({
4 shadow: function (options) {
5 return new $.sw.shadow( this , options);
6 }
7 });
8 $.sw.shadow = Class({
9 container: null ,
10 shadow: null ,
11 template: $.browser.msie ?
12 ' <div class="sw-ieshadow"></div> ' :
13 ' <div class="sw-shadow"><div class="sh"><divclass="shl"></div><div class="shr"></div><div class="shc"></div></div><div class="sc"><div class="scl"></div><div class="scr"></div><div class="scc"></div></div><div class="sf"><div class="sfl"></div><div class="sfr"></div><div class="sfc"></div></div></div> ' ,
14 isRendered: $( " .sw-ie-shadow " ).length > 0 || $( " .sw-shadow " ).length > 0 ,
15 initialize: function (container, options) {
16 this .container = $(container);
17 if ( ! this .isRendered) { $(document.body).append( this .template); }
18 this .initComponent();
19 },
20 setPosition: function (element, val) {
21 var size = Sw.Size.fromElement( this .container, 2 ).add(val.width, val.height);
22 $(element).css({
23 top: parseInt($( this .container)[ 0 ].style.top) - val.top,
24 left: parseInt($( this .container)[ 0 ].style.left) - val.left,
25 height: size.height,
26 width: size.width,
27 zIndex: parseInt( this .container.css( " zIndex " )) - val.zIndex
28 });
29 },
30 show: function () { this .shadow.show(); },
31 hide: function () { this .shadow.hide(); },
32 initComponent: function () {
33 var me = this ;
34 if ($.browser.msie) {
35 this .shadow = $( " div.sw-ie-shadow " ).css( " filter " , " progid:DXImageTransform.Microsoft.alpha(opacity=30) progid:DXImageTransform.Microsoft.Blur(pixelradius=4) " ).hide();
36 this .setPosition( this .shadow, { top: 2 , left: 4 , height: - 1 , width: - 1 , zIndex: 1 });
37 }
38 else {
39 this .shadow = $( " div.sw-shadow " ).hide();
40 this .setPosition( this .shadow, { top: 2 , left: 3 , height: 6 , width: 6 , zIndex: 1 });
41 $( " .sc " , this .shadow).children().andSelf().each( function () {
42 $( this ).css( " height " , me.container.outerHeight() - 4 );
43 });
44 };
45 },
46 refresh: function () {
47
48 this .initComponent();
49 this .show();
50 }
51 });
52 })(jQuery);
53

    下面先接着说说combox控件的实现吧

        <div class="wrap">

          <input>文本框</input><input>隐藏域</input><div>picker</div>

        <div>

     自然而然，我们的目标是:

        $(input).combox(options)

      其中的option { store: 数据源, selectedChange: 选中触发事件, selectedItem：默认选中项

      具体用法，我示例有详细说明。

      实现过程：

    

代码

( function ($) {
Sw.Namespace( " $.sw " );
$.fn.extend({
combox: function (options) {
return new $.sw.combox( this , options);
}
});
$.sw.combox = Class({
input: null ,
hidField: false ,
picker: null ,
wrapper: null ,
options: null ,
store: null ,
container: null ,
shadow: null ,
selectedItem: false ,
textAlias: null ,
valueAlias: false ,
query: null ,
initialize: function (input, options) {
this .input = $(input);
this .options = $.extend({}, $.sw.combox.defaults, options);
this .store = this .options.store;
this .initComponent(input);
},
initComponent: function () {
this .input.css( " width " , this .options.width).val( this .options.emptyText).focus( function () { $( this ).val( "" ); });
this .wrapper = $( this .input).wrap( " <div/> " ).parent().addClass( this .options.comboxCss);
if ( this .options.hidField) {
this .hidField = $( " <input/> " ).attr({ " id " : " h " + this .input.attr( " id " ), " type " : " hidden " }).appendTo( this .wrapper);
}
this .picker = $( " <div /> " ).hoverClass( " picker-hover " ).appendTo( this .wrapper).addClass( this .options.pickerCss).css( " left " , this .input.width());
this .render();
this .addEvents();
},
render: function () {
if ( this .store) {
var me = this ;
this .textAlias = me.store.fields.text;
var maxWidth = [];
this .valueAlias = me.store.fields.value == undefined ? "" : me.store.fields.value;
this .container = $( " <div/> " ).click( function (e) { Sw.stop(e); })
.width(Sw.Size.fromElement( this .input, 2 ).width + 7 ).appendTo($(document.body));
this .options.autoHeight ? this .container.css( " max-height " , this .options.height) : this .container.css( " height " , this .options.height);
var listItems = $( " <ul/> " ).appendTo( this .container);
$( this .store.data).each( function (index, item) {
maxWidth.push($( " <li/> " ).hoverClass( " hover " ).appendTo(listItems).html( " <span> " + item[me.textAlias] + " </span> " ).attr({ " stext " : item[me.textAlias], " svalue " : me.valueAlias == "" ? "" : item[me.valueAlias] }).click( function (e) {
me.selectedChange(item); Sw.stop(e);
}).find( " span " ).outerWidth());
});
maxWidth = maxWidth.sort( function (a, b) {
return a - b;
});
if (maxWidth[maxWidth.length - 1 ] >= this .container.width()) {
$( " li " , this .container).width(maxWidth[maxWidth.length - 1 ] + 3 );
}
this .container.addClass( this .options.containerCss);
if ( this .options.selectedItem) {
this .selectedItem = this .getDefaultSeletecd( this .options.selectedItem);
this .renderSeletecd();
}
var size = Sw.Size.fromElement( this .input, 2 );
var offset = Sw.Offset.fromElement( this .input).add( 0 , size.height).applyTo( this .container);
this .shadow = new $.sw.shadow( this .container);
// 或者这样写也行this.shadow = $(this.container).shadow();
maxWidth = listItems = size = offset = null ;
}

},
removeClass: function () {
$( " li " , this .container).removeClass( " selected " );
},
getDefaultSeletecd: function (defaultValue) {
if ( this .valueAlias != "" ) {

return $( this .store.data).jget(defaultValue[ this .valueAlias], this .valueAlias);
}
else {
return defaultValue;
}
},
renderSeletecd: function () {
if ( this .selectedItem) {
this .setValue( this .selectedItem);
this .removeClass();
if ( this .valueAlias != "" ) {

$( " li[svalue=' " + this .getValue() + " '] " , this .container).first().addClass( " selected " );
}
else {
$( " li[stext=' " + this .getText() + " '] " , this .container).first().addClass( " selected " );
}
}

},
hide: function () {
this .container.hide();
this .shadow.hide();
this .input.removeClass( " focus " );
this .picker.removeClass( " picker-focus " );

},
show: function () {
this .container.show();
$( " ul li " , this .container).show();
this .input.addClass( " focus " );
this .picker.addClass( " picker-focus " );
this .shadow.refresh();
this .shadow.show();
},
addEvents: function () {
var me = this ;
this .wrapper.click( function () {
me.input.focus();
me.show();
$(document).one( " click " , function (event) {
me.hide();
});
return false ;
});
// key
this .input.keyup( function (e) {

me.onKeyup(e);
});

},
getSeletedItem: function () {
var currenSelected = this .container.children( ' ul ' ).children( ' li.selected ' );
return currenSelected.length > 0 ? currenSelected.first() : false ;
},
prevResult: function () {

$currenSelected = this .getSeletedItem();
if ($currenSelected)
$currenSelected.removeClass( " selected " ).prev( " li:visible " ).addClass( " selected " );
else
$( " ul li:visible " , this .container).last().addClass( " selected " );

},
nextResult: function () {

$currenSelected = this .getSeletedItem();
if ($currenSelected)
$currenSelected.removeClass( " selected " ).next( " li:visible " ).addClass( " selected " );
else
$( " ul li:visible " , this .container).first().addClass( " selected " );

},
onKeyup: function (e) {

if (( / 27$|38$|40$ / .test(e.keyCode)) || ( / ^13$|^9$ / .test(e.keyCode) && this .getSeletedItem())) {
Sw.stop(e);
switch (e.keyCode) {
case Sw.keyCode.Up:
this .prevResult();
break ;
case Sw.keyCode.Down:
this .nextResult();
break ;
case 13 :
this .selectedResult();
break ;
case Sw.keyCode.Esc:
this .hide();
break ;
}
}
else if ( this .input.val() != this .query) {
this .query = this .input.val();
this .filter();
}
},
filter: function () { // 是否异步调用
if ( this .options.async) { // do something()
}
else {
var reg = new RegExp( ' ^ ' + this .query + ' .*$ ' , ' im ' );
$( " ul li " , this .container).each( function () {
if (reg.test($( this ).attr( " stext " )))
$( this ).show();
else
$( this ).hide();

});
this .shadow.refresh();
}

},
setValue: function (item) {
this .input.val(item[ this .textAlias]);
if ( this .hidField && this .valueAlias && item[ this .valueAlias]) {
this .hidField.val(item[ this .valueAlias]);
}
},
selectedResult: function () {
var text = this .textAlias;
var selectedResult = this .getSeletedItem();
var selectedItem = ' {" ' + this .textAlias + ' ":" ' + selectedResult.attr( " stext " ) + ' "," ' + this .valueAlias + ' ":" ' + selectedResult.attr( " svalue " ) + ' "} ' ;
this .selectedChange($.parseJSON(selectedItem));
},
selectedChange: function (item) {
this .selectedItem = item;
this .renderSeletecd();
var evt = this .options.selectedChange;
if (evt && $.isFunction(evt)) {
evt.call( this , this .getText(), this .getValue());
}
evt = null ;
this .hide();
},
getText: function () { return this .input.val(); },
getValue: function () { return this .hidField ? this .hidField.val() : "" ; }
})
$.extend($.sw.combox, {
defaults: {
hidField: true ,
comboxCss: " sw-combox " ,
pickerCss: " picker " ,
containerCss: " sw-combox-container " ,
emptyText: " select a value " ,
width: 100 ,
height: 200 ,
autoHeight: true ,
filter: true ,
async: false ,
selectedChange: false ,
store: false ,
selectedItem: false

}
});
})(jQuery);

  唉，终于写完啦，松了一口气。这也许是这个系列最后一篇啦。原因以下：

       1.自定义表单的实现还要花很多精力

       2.之前一年来没有参加代码的工作，对互联网技术的发展真的一头雾水，就像园友说的那样，哥竟不知jquery

         已经有那么多的UI库啦，呵呵，自己还一个人在蛮搞。简直是闭门造车。

       3.虽然只完成几个小控件，但我真的有身心疲惫的感觉，没有一点激情，动力

 当然，有这方面兴趣的朋友，特别是有自定义表单设计的朋友，请多多交流。      

最后附代码下载