shawl.qiu Javascript 圆角表格生成类 sqRounded v1.0

来源：互联网发布：网络服务器配置与应用编辑：程序博客网时间：2024/06/05 19:50

shawl.qiu Javascript 圆角表格生成类 sqRounded v1.0

说明:
写这个东西其实嘛, 是因为本人烦了弄个纯CSS圆角表格老要复制一大堆代码, 麻烦不说, 还很容易出错...
所以呗, 本类就诞生了.

主要用法...:
比如你有 div 标签, id 为 x
那只需要调用一下本类就OK, 也可以一次作用于多个标签, 外观设置嘛, 由于是刚写, 肯定有不足的地方了, 这个只能在使用过程中继续改进喽.

好了, 这个真没啥好说的, 技术含量真的很少, 不过本人觉得这个想法不错...:)

目录:
1. 类 sqRounded 及使用演示

shawl.qiu
2007-05-13
http://blog.csdn.net/btbtd

下载:
http://shawl.qiu.googlepages.com/sqRounded_v1.0.7z
http://files.myopera.com/btbtd/javascript/sqRounded_v1.0.7z

演示:
http://shawl.qiu.googlepages.com/sqRounded_v1.0.htm

1. 类 sqRounded 及使用演示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shawl.qiu template</title>
<script type="text/javascript">
//<![CDATA[
/*-----------------------------------------------------------------------------------*/
* shawl.qiu javascript sqRounded class v1.0
/*-----------------------------------------------------------------------------------*/
//---------------------------------begin class sqRounded()-------------------------------//
function sqRounded()
{ // shawl.qiu code
//------------------------------------begin public variable
//---------------begin about
this.auSubject = 'shawl.qiu javascript sqRounded class';
this.auVersion = 'v1.0';
this.au = 'shawl.qiu';
this.auEmail = 'shawl.qiu@gmail.com';
this.auBlog = 'http://blog.csdn.net/btbtd';
this.auCreateDate = '2007-5-13';
//---------------end about
this.ID = ""; // id1,id2,id3
this.Prefix = "kJkjSKDjkjsdkf98ufsk";
this.Postfix = "skdjfkJHjhasdf";
this.Set = [];
this.Style = {};
this.Style.BorderColor = "#5CB620"; //#9BD1FA
this.Style.Color = "white";
this.Style.Margin = "1px 0px";
this.Style.Width = "100%";
this.Style.Height = "100%";
this.Style.Display = "block";
this.Style.Addition = 'font: 14px "Trebuchet MS",Verdana,Arial,sans-serif';
this.Style.A = {};
this.Style.A.Link = "color:lightyellow;";
this.Style.A.Hover = "";
this.Style.A.Visited = "color:whitesmoke;";
this.Style.Text = {};
this.Style.Text.BackgroundColor = "#5CB620";
this.Style.Text.Padding = "2px 2px";
this.Style.Text.Margin = "0px 5px";
this.Style.Text.Addition = "";
//------------------------------------end public variable
//------------------------------------begin private variable
var Tl = this;
//------------------------------------end private variable
//------------------------------------begin public method
this.Go = fGo;
//------------------------------------end public method
//------------------------------------begin private method
function fGo()
{
Tl.ID = fClearSpace(Tl.ID);
if(Tl.ID=="")
{
alert("输入ID为空!");
return;
}
Tl.Set = Tl.ID.split(",");
for(var i=0, j=Tl.Set.length; i<j; i++)
{
var Name = Tl.Set[i];
var Id1 = Tl.Prefix+Name;
var Id2 = Name+Tl.Postfix;
var Id3 = Tl.Prefix+Name+Tl.Postfix;
var Obj = document.getElementById(Tl.Set[i]);
if(Obj!=null)
{
var EleSpan = document.createElement("span");
EleSpan.id = Id3;
var sStyle =
' #'+Id1+' * a:link'+
'{ '+
Tl.Style.A.Link+
'}'+
' #'+Id1+' * a:hover'+
'{ '+
Tl.Style.A.Hover+
'}'+
' #'+Id1+' * a:visited'+
'{ '+
Tl.Style.A.Visited+
'}'+
' #'+Id1+'{ '+
'margin: '+Tl.Style.Margin+';'+
'background: '+Tl.Style.BorderColor+';'+
'color: '+Tl.Style.Color+';'+
'width: '+Tl.Style.Width+';'+
'height: '+Tl.Style.Height+';'+
'display: '+Tl.Style.Display+';'+
Tl.Style.Addition+
'}'+
' '+
' #'+Id1+' b.rtop, #'+Id1+' b.rbottom'+
' {'+
' display:block;'+
' background: #FFF;'+
' } '+
' '+
' #'+Id1+' b.rtop b, #'+Id1+' b.rbottom b'+
' {'+
' display:block;height: 1px; overflow: hidden; background: '+Tl.Style.BorderColor+';'+
' } '+
' #'+Id1+' b.rtop b.r1, #'+Id1+' b.rbottom b.r1'+
' {'+
' margin: 0 5px;'+
' }'+
' #'+Id1+' b.rtop b.r2, #'+Id1+' b.rbottom b.r2'+
' {'+
' margin: 0 3px;'+
' }'+
' #'+Id1+' b.rtop b.r3, #'+Id1+' b.rbottom b.r3'+
' {'+
' margin: 0 2px;'+
' }'+
' '+
' #'+Id1+' b.rtop b.r4, #'+Id1+' b.rbottom b.r4'+
' {'+
' margin: 0 1px;height: 2px;'+
' }'+
' #'+Id1+' div'+
' {'+
' padding:'+Tl.Style.Text.Padding+';'+
' background-color:'+Tl.Style.Text.BackgroundColor+';'+
' margin:'+Tl.Style.Text.Margin+';'+
Tl.Style.Text.Addition+
' }'
;
fAddStyleFromStr(sStyle);
EleSpan.innerHTML =
'<div id="'+Id1+'"> '+
'<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> '+
'<div>'+
' <span id="'+Id2+'">'+
'temp........'+
' </span>'+
'</div>'+
'<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> '+
'</div> '
;
fInsertNode(Obj, EleSpan, true);
var TempEle = document.getElementById(Id2);
if(TempEle!=null)
{
var ParentNode = TempEle.parentNode;
ParentNode.replaceChild(Obj, TempEle);
}
} // end if
} // en for
} // end function fGo
String.prototype.trim=fStrTrim;
function fStrTrim(sStr){
var o=sStr?sStr:this;
if(!o||o=='')return '';
return o.replace(/^/s+|/s+$/g,'');
} // shawl.qiu code
function fClearSpace(str)
{
return str.replace(//s+/g, "");
}
function fInsertNode(OldNode, NewNode, bBefore)
{// shawl.qiu script
var ParentNode = OldNode.parentNode;
if(!ParentNode)return false;
if(bBefore)
{
ParentNode.insertBefore(NewNode,OldNode);
return false;
} // end if
ParentNode.replaceChild(NewNode, OldNode);
ParentNode.insertBefore(OldNode, NewNode);
} // end function fInsertNode
function fAddStyleFromStr(sIpt, sId)
{// shawl.qiu script
var EleStyle = document.createElement("style");
EleStyle.type = "text/css";
if(sId&&sId!="")
{
EleStyle.id = sId;
}
if(fCkBrs()==1)
{
EleStyle.styleSheet.cssText = sIpt;
}
else
{
EleStyle.innerHTML = sIpt;
}
function fCkBrs()
{
switch (navigator.appName)
{
case 'Opera': return 2;
case 'Netscape': return 3;
default: return 1;
}
} // end function fCkBrs
var EleHead=document.getElementsByTagName("head")[0]
if(!EleHead) EleHead=document.body;
EleHead.insertBefore(EleStyle, EleHead.firstChild);
} // end function fAddStyleFromStr
//------------------------------------end private method
} // shawl.qiu code
//---------------------------------end class sqRounded()---------------------------------//
onload =
function()
{
var sqRnd = new sqRounded();
sqRnd.ID = "div1, div2, div3, div4";
sqRnd.Go();
sqRnd = null;
}
//]]>
</script>
</head>
<body>
<div id="div1">
this.auSubject = 'shawl.qiu javascript sqRounded class';<br />
this.auVersion = 'v1.0';<br />
this.au = 'shawl.qiu';<br />
this.auEmail = 'shawl.qiu@gmail.com';<br />
this.auBlog = 'http://blog.csdn.net/btbtd';<br />
this.auCreateDate = '2007-5-13';
</div>
<div id="div2">
this.auSubject = 'shawl.qiu javascript sqRounded class';<br />
this.auVersion = 'v1.0';<br />
this.au = 'shawl.qiu';<br />
this.auEmail = 'shawl.qiu@gmail.com';<br />
this.auBlog = 'http://blog.csdn.net/btbtd';<br />
this.auCreateDate = '2007-5-13';
</div>
<div id="div3">
this.auSubject = 'shawl.qiu javascript sqRounded class';<br />
this.auVersion = 'v1.0';<br />
this.au = 'shawl.qiu';<br />
this.auEmail = 'shawl.qiu@gmail.com';<br />
this.auBlog = 'http://blog.csdn.net/btbtd';<br />
this.auCreateDate = '2007-5-13';
</div>
<div id="div4">
this.auSubject = 'shawl.qiu javascript sqRounded class';<br />
this.auVersion = 'v1.0';<br />
this.au = 'shawl.qiu';<br />
this.auEmail = '<a href="mailto:shawl.qiu@gmail.com">shawl.qiu@gmail.com</a>';<br />
this.auBlog = '<a href="http://blog.csdn.net/btbtd">http://blog.csdn.net/btbtd</a>';<br />
this.auCreateDate = '2007-5-13';<br />
想得到, 做得到!
</div>
</body>
</html>