开发项目时,经常需要自已开发一些UI组件,在这里共享一个刚开发的Button控件,这个Button使用很简单,只要加入相关的CSS和JS文件,这样页面中的所有input按扭都将会被自动渲染为漂亮的个性化按扭,不需要写一句代码。
源代码和示例在附件中,Button的相关JS源代码如下:
- (function($){
- $.fn.btn = function(){
- var btn = this.data("_self");;
- if(btn){
- return btn;
- };
- this.init = function(){
- var obj = $(this);
- var id=$(this).attr('id')||"gen"+Math.random();
- var icon = $(this).attr('icon')||'icon-btncom';
- var bntStr=[
- '<table id="',id,'" class="z-btn" cellSpacing=0 cellPadding=0 border=0><tbody><tr>',
- '<TD class=z-btn-left><i> </i></TD>',
- '<TD class=z-btn-center><EM unselectable="on">',
- '<BUTTON class="z-btn-text ',icon,'" >',$(this).attr('value'),'</BUTTON>',
- '</EM></TD>',
- '<TD class=z-btn-right><i> </i></TD>',
- '</tr></tbody></table>'
- ];
- var bnt = $(bntStr.join('')).btn();
- bnt._click = eval(obj.attr("onclick"));
- bnt.disable();
- if(obj.attr("disabled"))
- bnt.disable();
- else bnt.enable();
- $(this).replaceWith(bnt);
- bnt.data("_self", bnt);
- return bnt;
- };
- this.enable = function(){
- this.removeClass("z-btn-dsb");
- this.click(this._click);
- this.hover(
- function () {
- $(this).addClass("z-btn-over");
- },
- function () {
- $(this).removeClass("z-btn-over");
- }
- )
- };
- this.disable = function(){
- this.addClass("z-btn-dsb");
- this.unbind("hover");
- this.unbind("click");
- };
- return this;
- };
- $(function(){
- $("input[type='button']").each(function(){
- $(this).btn().init();
- });
- $("input[type='reset']").each(function(){
- $(this).btn().init().click(function(){
- var form = $(this).parents("form")[0];
- if(form)
- form.reset();
- });
- });
- $("input[type='submit']").each(function(){
- $(this).btn().init().click(function(){
- var form = $(this).parents("form")[0];
- if(form)
- form.submit();
- });
- });
- })
- })(jQuery);