[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");

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

不过有一点很不好，就是这些代码并不是嵌入到页面的顶部，而是控件所在的位置。如果你觉得这样不够严谨的话，可以使用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疑问或建议也请留言。下一篇附上完整代码和效果图。

posted @ 2009-04-22 11:38 MKing's Kindom 阅读(243) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

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

公告