[分享]JS轻松实现设置边框,改进DW8的设置边框

vickeychen [楼主]

Linr

初级会员

帖子: 81
体力: 188
威望: 6
当前: 湖南岳阳
离线: 1 天

专长 CG,.NET,SL

1^# 大中小发表于 2007-1-14 20:39

非常好的边框设置工具,如果放在DW中会更好,会制作DW插件的高手，请帮忙制作成DW插件：

<!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=gb2312">
<title>JS轻松实现设置连线</title>
<style>
*{font-size:12px;}
#vcssdivBoderMidlayout,#vcssdivBoderLeftlayout,#vcssdivBoderRightlayout{float:left;}
#vcssdivBoderMidlayout ul{list-style-type:none;margin:0;}
#vcssdivBoderMidlayout li{width:100px;text-align:center}
#vcssdivBoderMidlayout input{width:20px;height:20px;border:1px solid #ccc;background-color:#FFFFFF;margin:2px;}
#vcssdivBoderRightlayout input{width:50px;height:50px;background-color:#FFFFFF;border:0;}
</style>
<script>
var sInitColor = null;
function callColorDlg(obj){
if (sInitColor == null) 
	var sColor = dlgHelper.ChooseColorDlg();
else
	var sColor = dlgHelper.ChooseColorDlg(sInitColor);
		sColor = sColor.toString(16);	
if (sColor.length < 6) {
  var sTempString = "000000".substring(0,6-sColor.length);
  sColor = sTempString.concat(sColor);
}
if(sColor!="000000"){
sColor = "#" + sColor;
if(obj.tagName=='INPUT')obj.value=sColor;
obj.style.backgroundColor=sColor;
}
}
</script>
</head>
<body>
<OBJECT id="dlgHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT>
<div style="width:100%">
<div class="vcssdivBorder" id="vcssdivBorder">
<div id="vcssdivBoderLeftlayout">
连线色:<input name="vcssdivBorderColor" onClick="callColorDlg(this);" id="vcssdivBorderColor" value="#ff0000" onfocus="setSelectBorderStyle(vcssdivBorderPreview);" onblur="setSelectBorderStyle(vcssdivBorderPreview);" onpropertychanges="setSelectBorderStyle(vcssdivBorderPreview);" />
<br />
宽　度:<input name="vcssdivBorderWidth" id="vcssdivBorderWidth" value="1px" />
<br />
样　式:
<select name="vcssdivBorderStyle" id="">
	<option value="solid" selected>solid</option>
	<option value="dotted">dotted</option>
	<option value="none">none</option>
</select>
</div>
<div id="vcssdivBoderMidlayout">
	<ul>
		<li><input type="checkbox" checked="checked" onClick="unsetSelectBorderStyle(this,'borderTop')" value="　" name="vcssdivBorderTop" style="border-top:1px solid #cc7700;" /> <input type="checkbox" checked="checked" onClick="unsetSelectBorderStyle(this,'borderBottom')" value="　" name="vcssdivBorderBottom" style="border-bottom:1px solid #cc7700;" /></li>
		<li><input type="checkbox" onClick="unsetSelectBorderStyle(this,'border')" value="　" name="vcssdivBorderAll" style="border:1px solid #cc7700;" /></li>
		<li><input type="checkbox" checked="checked" onClick="unsetSelectBorderStyle(this,'borderLeft')" value="　" name="vcssdivBorderLeft" style="border-left:1px solid #cc7700;" /> <input type="checkbox" checked="checked" onClick="unsetSelectBorderStyle(this,'borderRight')" value="　" name="vcssdivBorderRight" style="border-right:1px solid #cc7700;" /></li>
	</ul>
</div>
<div id="vcssdivBoderRightlayout">
	效果如下:<br /><input type="button" value="　" id="vcssdivBorderPreview" name="vcssdivBorderPreview" onClick="alert(this.style.cssText)" />
</div>
</div>
</div>
<p>
<input type="button" value="设置" onClick="document.getElementById('new_div').style.cssText=document.getElementById('vcssdivBorderPreview').style.cssText;alert(vcssdivBorderPreview.style.cssText)" />
</p>
<div id="new_div">
点击"设置"，为我添加边框
</div>
<script>
function setSelectBorderStyle(obj)
{
	obj.style.border=document.getElementById('vcssdivBorderWidth').value+" "+document.getElementById('vcssdivBorderStyle').value+" "+document.getElementById('vcssdivBorderColor').value;
}
function unsetSelectBorderStyle(obj,css)
{
	if(!obj.checked)
	{
		eval("vcssdivBorderPreview.style."+css+"='0'");
	}
	else
	{
		eval("vcssdivBorderPreview.style."+css+"='"+document.getElementById('vcssdivBorderWidth').value+" "+document.getElementById('vcssdivBorderStyle').value+" "+document.getElementById('vcssdivBorderColor').value+"'");
	}
}
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 vickeychen 于 2007-10-10 15:59 编辑 ]

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

‹‹ 上一主题 | 下一主题 ››