一直想要写自己的javascript开发框架。以前写过一个很粗糙的,加之名字起得不好,就废弃了,然后重新写了mk(我自己的名字缩写)框架。
ImageSilde内所需的客户端js代码,就是这个框架的第一部分内容。……甚至可以说,因为有了js的良好的实现,才有了这个.net服务器端控件。
先看一下基础类:
{
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就是使用这些“静态函数”封装的一个动画类。
__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
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 );
}
另外还有个预置样式文件
/* 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_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方法中加入:
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-p58LYgIYyGbIisZxJf7CW5Nz0&t=633742647320000000" type ="text/javascript" ></ script >
< script src ="/TEST/WebResource.axd?d=CuSH1_2TTwIpO9NJT2jMB-5ATAKtbwJ7YRk3hcH-p59qfEeWi24GHfEkkl-Rq9Wf0PCCcBfiH8ZjMMH_gUBxxQ2&t=633742647320000000" type ="text/javascript" ></ script >
不过有一点很不好,就是这些代码并不是嵌入到页面的顶部,而是控件所在的位置。如果你觉得这样不够严谨的话,可以使用Html泛类型创建一个script标签并设置相应属性,然后添加到Page的Head里面。css文件我就是如法炮制的:
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疑问或建议也请留言 。下一篇附上完整代码和效果图。