[Web服务器控件] - ImageSlide（二）客户端代码及dll封装

 一直想要写自己的javascript开发框架。以前写过一个很粗糙的，加之名字起得不好，就废弃了，然后重新写了mk(我自己的名字缩写)框架。

ImageSilde内所需的客户端js代码，就是这个框架的第一部分内容。……甚至可以说，因为有了js的良好的实现，才有了这个.net服务器端控件。

先看一下基础类：

if ( ! mk)  var  mk  =  
{
    info : {
        ver :  " 1.0.0.0 " ,
        author :  " MKing " ,
        email :  " winnie_mk@126.com "
    }
    , xhr :  null
    , magic :  null
    , control :  null
    , Import :  function (cName){
         var  head  =  document.getElementsByTagName( " head " );
         if (head.length  <   1 ){
            alert( " HTML dom has no HEAD element. " );
             return ;
        }
         var  scriptEle  =  document.createElement( " script " );
        scriptEle.type  =   " text/javascript " ;
        scriptEle.src  =   " mk_ "   +  cName  +   " .js " ;
        scriptEle.charset  =   " utf-8 " ;        
        head[ 0 ].appendChild(scriptEle);
    }
    , Browser : {
         /* @
        isIE : true,
        @ */
        isFF : navigator.userAgent.search( / firefox / i)  >   - 1   ?   true  :  false ,
        isOpera : navigator.userAgent.search( / opera / i)  >   - 1   &&   ! this .isIE  ?   true  :  false
    }, e :  function (obj){
         return   typeof  obj  ==   " string "   ?  document.getElementById(obj) : obj;
    }
};

在这个类中，预定义几个命名空间和小工具。

下面是mk.magic类，用来实现动画效果。mk.magic下实现了几个“静态”函数可直接使用，如mk.magic.setOpacity(element,opacity)

可以跨浏览器实现对页面元素透明度的修改。mk.magic.fade就是使用这些“静态函数”封装的一个动画类。

mk.magic  =  {
    __threads__ : [],
    info : {
        ver :  " 1.0.0.0 " ,
        author :  " MKing " ,
        email :  " winnie_mk@126.com "
    }, fadeIn :  function (ele, step, timesplit, clearThread, resetOpacity){
         if ( ! ele)  return ;
         if ( ! step) step  =   5 ;
         if ( ! timesplit) timesplit  =   10 ;
         var  fun  =  mk.magic.__setFadeFunction__();
         var  start  =  resetOpacity  ?   0  : mk.magic.getOpacity(ele);
         var  c  =   0 ;
         if (clearThread) mk.magic.__clearThreads__();
         for ( var  i = start; i < 100 ; i += step){
            ( function (){
                 var  opa  =  i;
                 var  delay  =  timesplit  *  c ++ ;
                mk.magic.__threads__.push(setTimeout( function (){
                    fun(ele, opa);
                }, timesplit  *  c ++ ));
            })();
        }
        mk.magic.__threads__.push(setTimeout( function (){
            fun(ele,  100 );
            mk.magic.__clearThreads__();
        }, timesplit  *  c ++ ));
    }, fadeOut :  function (ele, step, timesplit, clearThread, resetOpacity){
         if ( ! ele)  return ;
         if ( ! step) step  =   5 ;
         if ( ! timesplit) timesplit  =   10 ;
         var  fun  =  mk.magic.__setFadeFunction__();
         var  start  =  resetOpacity  ?   100  : mk.magic.getOpacity(ele);
         var  c  =   0 ;
         if (clearThread) mk.magic.__clearThreads__();
         for ( var  i = start; i > 0 ; i -= step){
            ( function (){
                 var  opa  =  i;
                 var  delay  =  timesplit  *  c ++ ;
                mk.magic.__threads__.push(setTimeout( function (){
                    fun(ele, opa);
                }, timesplit  *  c ++ ));
            })();
        }
        mk.magic.__threads__.push(setTimeout( function (){
            fun(ele,  0 );
            mk.magic.__clearThreads__();
        }, timesplit  *  c ++ ));
    }, __setFadeFunction__ :  function (){
         if (mk.Browser.isIE)
             return  mk.magic._ieSetOpacity;
         return  mk.magic._SetOpacity;
    }, setOpa :  function (element, value){
         if (mk.Browser.isIE) mk.magic._ieSetOpacity(element, value);
         else  mk.magic._SetOpacity(element, value);
    }, setOpacity :  function (element, value){    
        (mk.magic.__setFadeFunction__(element))(element, value);
    }, getOpacity :  function (ele){
         if (mk.Browser.isIE){
             try {  return  ele.filters.alpha.opacity; }
             catch (e){  return   100 ; }
        }
         else   if (ele.style.MozOpacity){
             return  isNaN(parseInt(ele.style.MozOpacity))  ?   100  : parseInt(ele.style.MozOpacity);
        }
         return  isNaN(parseInt(ele.style.opacity))  ?   100  : parseInt(ele.style.opacity);
    }, _ieSetOpacity :  function (element, value){
         try {
            element.filters.alpha.opacity  =  value;
        } catch (e){ element.style.cssText  +=   " ;filter:alpha(opacity= "   +  value  +   " ); " ;}
    }, _ffSetOpacity :  function (element, value){
        element.style.MozOpacity  =  (value  /   100 );
    }, _SetOpacity :  function (element, value){
        element.style.opacity  =  (value  /   100 );
    }, __clearThreads__ :  function (){
         if (mk.magic.__threads__.length  >   0 ){
             for ( var  i = 0 ; i < mk.magic.__threads__.length; i ++ ){
                clearTimeout(mk.magic.__threads__[i]);
            }
        }
        mk.magic.__threads__  =  [];
    }
    , fade :  null
    , slide :  null
}
mk.magic.fade  =   function (){
     this .__threads__  =  [];
     this .__fun__  =  mk.magic.__setFadeFunction__();
}
mk.magic.fade.prototype.fadeIn  =   function (ele, step, timesplit, clearThread, resetOpacity, fun){
     if ( ! ele)  return ;
     if ( ! step) step  =   5 ;
     if ( ! timesplit) timesplit  =   20 ;
     var  start  =  resetOpacity  ?   100  : mk.magic.getOpacity(ele);
     if (clearThread)  this .__clearThreads__();
    
     var  _this  =   this ;
     var  c  =   0 ;
     for ( var  i = start; i < 100 ; i += step){
        ( function (){
             var  opa  =  i;
             var  delay  =  timesplit  *  c ++ ;
            _this.__threads__.push(setTimeout( function (){
                _this.__fun__(ele, opa);
            }, timesplit  *  c ++ ));
        })();
    }
    _this.__threads__.push(setTimeout( function (){
        _this.__fun__(ele,  100 );
        _this.__clearThreads__();
         if (fun)fun(ele)
    }, timesplit  *  c ++ ));
}
mk.magic.fade.prototype.fadeOut  =   function (ele, step, timesplit, clearThread, resetOpacity, fun){
     if ( ! ele)  return ;
     if ( ! step) step  =   5 ;
     if ( ! timesplit) timesplit  =   20 ;
     var  start  =  resetOpacity  ?   0  : mk.magic.getOpacity(ele);
     if (clearThread)  this .__clearThreads__();
    
     var  _this  =   this ;
     var  c  =   0 ;
     for ( var  i = start; i > 0 ; i -= step){
        ( function (){
             var  opa  =  i;
             var  delay  =  timesplit  *  c ++ ;
            _this.__threads__.push(setTimeout( function (){
                _this.__fun__(ele, opa);
            }, timesplit  *  c ++ ));
        })();
    }
    _this.__threads__.push(setTimeout( function (){
        _this.__fun__(ele,  0 );
        _this.__clearThreads__();
         if (fun)fun(ele)
    }, timesplit  *  c ++ ));
}
mk.magic.fade.prototype.__clearThreads__  =   function (){
     if ( this .__threads__.length  >   0 ){
         for ( var  i = 0 ; i < this .__threads__.length; i ++ ){
            clearTimeout( this .__threads__[i]);
        }
         this .__threads__.length  =  [];
    }
}

 

下面是mk.control类和专门为WebControl封装的准备的mk.control.ImageSlide

//  JavaScript Document
function  $(id){  return   typeof  id  ==   " string "   ?  document.getElementById(id) : id; }
mk.control  =  {
    info : {
        ver :  " 1.0.0.0 " ,
        author :  " MKing " ,
        email :  " winnie_mk@126.com "
    }
    , listItem :  null
    , slide :  null
}
mk.control.ImageSlide  =   function (id, second){
     this .index  =   0 ;
     this .autoHandler  =   null ;
     if (id)  this .id  =  id;
     this .views  =   null ;
     this .thumbs  =   null ;
     this .bars  =   null ;
     this .length  =   1 ;
     this .second  =  second  ||   3 ;
}
mk.control.ImageSlide.prototype.__init__  =   function (){
     var  _this  =   this ;
     if ( this .id){
         var  obj  =  $( this .id);
         var  _childNodes  =  _getNodes(obj);
         if (_childNodes.length  >=   4 ){
             this .views  =  _childNodes[ 0 ].getElementsByTagName( " a " );
             this .thumbs  =  _childNodes[ 1 ].getElementsByTagName( " img " );
             this .bars  =  _childNodes[ 3 ].getElementsByTagName( " td " );
            
             if ( this .views.length  ==   this .thumbs.length  &&   this .thumbs.length  ==   this .bars.length){
                _init( this .views,  this .thumbs,  this .bars);
                _this.__autoSlide__();
                 this .length  =   this .views.length;
            }
        }
        obj.onmouseover  =   function (){
            clearTimeout(_this.autoHandler);
        }
        obj.onmouseout  =   function (){
            clearTimeout(_this.autoHandler);
            _this.__autoSlide__();
        }
    }
     function  _getNodes(obj){
         var  _temp  =  [];
         for ( var  i = 0 ; i < obj.childNodes.length; i ++ ){
             if (obj.childNodes[i].nodeType  ==   1 ) _temp.push(obj.childNodes[i]);
        }
         return  _temp;
    }
     function  _init(views, thumbs, bars){
         for ( var  i = 0 ; i < views.length; i ++ ){
             var  it  =  views[i];
            it.action  =   new  mk.magic.fade();
            it.style.display  =   " block " ;
             if (i  ==   0 ){
                mk.magic.setOpa(it,  100 );
            }  else  {
                mk.magic.setOpa(it,  0 );
            }
        }
         for ( var  i = 0 ; i < thumbs.length; i ++ ){
             var  it  =  thumbs[i];
            it.index  =  i;
             if (i  ==   0 ) mk.magic.setOpa(it,  100 );
             else  mk.magic.setOpa(it,  50 );
            it.onmouseover  =   function (){
                _this.__changeImage__( this .index);
            }
        }
         for ( var  i = 0 ; i < bars.length; i ++ ){
             var  it  =  bars[i];
            it.index  =  i;
            it.className  =  i  ==   0   ?   " ImageSlide_NumButOn "  :  " ImageSlide_NumButOut " ;
            it.onmouseover  =   function (){
                _this.__changeImage__( this .index);
            }
        }
    }
}
mk.control.ImageSlide.prototype.__changeImage__  =   function (index){
    index  =  index  %   this .length;
     if (index  !=   this .index){
         this .views[index].action.fadeIn( this .views[index],  5 ,  10 ,  true );
         this .views[ this .index].action.fadeOut( this .views[ this .index],  5 ,  10 ,  true );
        mk.magic.setOpa( this .thumbs[ this .index],  50 );
        mk.magic.setOpa( this .thumbs[index],  100 );    
         this .bars[index].className  =   " ImageSlide_NumButOn " ;
         this .bars[ this .index].className  =   " ImageSlide_NumButOut " ;
         this .index  =  index;
    }
}
mk.control.ImageSlide.prototype.__autoSlide__  =   function (){
     var  _this  =   this ;
    _this.autoHandler  =  setTimeout( function (){
        _this.__changeImage__(_this.index  +   1 );
        _this.__autoSlide__();
    }, _this.second  *   1000 );
}

另外还有个预置样式文件

@charset "utf-8";
/*  CSS Document  */
body {  background-color : #666 ;   }
.ImageSlide_IndexTable a {
    color : #fff ;
    text-decoration : none ;
    display : block ;
    font-size : 7pt ;
    padding : 2px ;
    width : 10px ;
    font-family : Verdana, Geneva, sans-serif ;     
}
.ImageSlide_NumButOut {
    background-color : #000 ;
}
.ImageSlide_NumButOut a {
    color : #fff ;
}
.ImageSlide_NumButOn {
    background-color : #f1f1f1 ;
}
.ImageSlide_NumButOn a {
    color : #000 ;
    font-weight : bold ;
}

.ImageSlite_TitleBar {
    color : #fff ;
    line-height : 20px ;
    text-align : right ;
    padding-right : 5px ;
    font-size : 9pt ;
    font-family : Verdana, Geneva, sans-serif ;
}

 

将这几个文件放到ImageSlide控件的资源中，并修改AssemblyInfo.cs，添加以下内容：

[assembly: WebResource( " MK.Controls.Resources.mk_base.js " ,  " application/x-javascript " )]
[assembly: WebResource( " MK.Controls.Resources.mk_control_ImageSlide.js " ,  " application/x-javascript " )]
[assembly: WebResource( " MK.Controls.Resources.mk_magic.js " ,  " application/x-javascript " )]
[assembly: WebResource( " MK.Controls.Resources.ImageSlide_Skin01.css " ,  " text/css " )]

 

文件名和上面四段代码应该很容易对上，就不详细说了。

请注意上面代码中"MK.Controls.Resources.mk_base.js"，MK.Controls应该和程序集名称一致，Resources是资源文件夹，最后是你的资源文件名。

非常重要的是，在vs中选择每一个文件，并将属性中“生成操作”设置为“嵌入的资源”。

这样做的目的是在加载控件的时候，可以使用加载资源的方式，调用以上的js和css。例如在RenderContent方法中加入：

Type t  =   this .GetType();
ClientScriptManager csm  =  Page.ClientScript;
csm.RegisterClientScriptResource(t,  " MK.Controls.Resources.mk_base.js " );
csm.RegisterClientScriptResource(t,  " MK.Controls.Resources.mk_magic.js " );
csm.RegisterClientScriptResource(t,  " MK.Controls.Resources.mk_control_ImageSlide.js " );

 呈现在页面代码中的效果如下：

< script  src ="/TEST/WebResource.axd?d=CuSH1_2TTwIpO9NJT2jMB-5ATAKtbwJ7YRk3hcH-p58oEFY1mTtj2r5EVVjf5LRs0&amp;t=633742647320000000"  type ="text/javascript" ></ script >
< script  src ="/TEST/WebResource.axd?d=CuSH1_2TTwIpO9NJT2jMB-5ATAKtbwJ7YRk3hcH-p58LYgIYyGbIisZxJf7CW5Nz0&amp;t=633742647320000000"  type ="text/javascript" ></ script >
< script  src ="/TEST/WebResource.axd?d=CuSH1_2TTwIpO9NJT2jMB-5ATAKtbwJ7YRk3hcH-p59qfEeWi24GHfEkkl-Rq9Wf0PCCcBfiH8ZjMMH_gUBxxQ2&amp;t=633742647320000000"  type ="text/javascript" ></ script >

 

不过有一点很不好，就是这些代码并不是嵌入到页面的顶部，而是控件所在的位置。如果你觉得这样不够严谨的话，可以使用Html泛类型创建一个script标签并设置相应属性，然后添加到Page的Head里面。css文件我就是如法炮制的：

HtmlGenericControl link  =   new  HtmlGenericControl( " link " );
link.Attributes[ " type " ]  =   " text/css " ;
link.Attributes[ " rel " ]  =   " Stylesheet " ;
link.Attributes[ " href " ]  =  csm.GetWebResourceUrl(t,  " MK.Controls.Resources.ImageSlide_Skin01.css " );
Page.Header.Controls.Add(link);

现在服务器端代码和客户代码，就都封存到一个dll文件当中了。当然细节并未涉及，如果有c#或者js疑问或建议也请留言 。下一篇附上完整代码和效果图。

转载于:https://www.cnblogs.com/muse/articles/1441194.html