 |
教程: ASP.NET教程-.NET技巧-开发基于Web的CSS设计器 |
 |
|
|
| 教程: ASP.NET教程-.NET技巧-开发基于Web的CSS设计器 |
|
|
|
|
e.text "'>" txtNode.text "</option>\n";
else
str = "<option value='" txtNode.text "'>" attValue "</option>\n";
}
str = "</select>";
}
else
//如果属性为其他模式，则构建input输入，设置class属性为ActionType
{
str = "<input name='" nameNode.text "' id='" nameNode.text "' class='" actNode.text "'>\n";
}
return(str);
}
设计器初始化
Js脚本读取解析样式元素的style属性值，然后为设计器中构建的控件赋值
//设计器初始化
function Init()
{
//获得由服务器端赋值的样式属性值
var txt=document.all("DemoShow").style.cssText;
if (txt.length>0)
{
var strClassName;
//解析字符串
var aryClass = txt.split(/[:;]/);
for( i in aryClass)
{
var str = aryClass.replace(/(^\s*)|(\s*$)/g, "");
if(!(i%2==1))
{
//当i为奇数时，解析的字符串应该为样式属性名称
strClassName=str;
}
else
{
//当i为偶数时，获得属性值
//属性名称即控件ID
//判断该属性对应的控件是输入框还是选择列表
if(document.all(strClassName).type=="select-one")
{
//如果是选择列表通过setIndexOfValue函数设定选择项
setIndexOfValue(strClassName,str);
}
else
{
document.all(strClassName).value=str;
}
}
i ;
}
}
}
界面交互
在XML中一共定义了select/input_ColorSelect/input_SizeSelect/input_BorderSelect（后3种为颜色/大小/边框输入模式）共4种输入模式，除select为直接选择外，其他在对应控件初始化的时候作为class属性赋值到控件中，类似class代码如下
/* 颜色输入模式input框的样式类 */
.input_ColorSelect{
width:100px;
font-family:Tahoma;
behavior:url(htc/effColorSelect.htc);
}
通过behavior属性，把该输入控件和相应的组件相关联，该组件effColorSelect.htc代码如下
<PUBLIC:ATTACH EVENT="onfocus" ONEVENT="getShow()"/>
<PUBLIC:METHOD NAME="getChange"/>
<SCRIPT LANGUAGE="JScript">
function getShow()
{
element.blur();
//记录当前交互控件的ID
effElement=element.id;
//在页面中加载输入控件
ShowControl ("SelectColor");
}
function getChange()
{
//当值发生变化时，对可视化样式元素赋值
SetAttribute(element.id,element.value);
}
</SCRIPT>
其他
设计器中的值输入模式框只是页面中的几个层，通过上面的htc组件触发显示出来，输入后再把值传入到样式属性控件中，同时也会设置可视化样式元素。
另外还需要注意的是，XML文档是可以自行扩展或缩减的，但是在实际应用中，不能完全依据CSS标准来定义，因为可视化元素的style属性会自动格式化。例如如果你在XML中定义border-bottom-width属性，在将值取出时会自动格式化为border-bottom，这样会造成设计器中控件不能匹配。我在MSDN没有查到相关文档，所以只有经过实际测试来验证。
OK,比较关键的代码已经差不多了……希望能对大家有所帮助。
参考
另外再列出部分技术参考，如果大家对其中的技术细节如HTC和XmlDom等有所疑问，可以再详细研究一下，也欢迎大家来和我交流 linnchord@tom.com 。
MSDN关于JS操作XmlDom的文档
这是英文文档,网上没有看到比较详细的中文文档,好在不复杂,大家将就一下吧 :)
(最近MSDN不知道什么毛病，经常访问有问题，如果无法访问，请先登录msdn，再输入地址浏览)
蓝色理想的HTC教程
网上也没看见比较全面的讲述，这个简单易学,基本概念清楚了。
[4]
上一页 [1] [2] [3] [4]
|
|
| 教程录入：admin 责任编辑：admin |
|
|
上一篇教程： 教程: ASP.NET教程-.NET技巧-ASP.NET无法调试问题剖析
下一篇教程： 教程: ASP.NET教程-.NET技巧-用ImessageFilter接口实现截获键盘消息 |
|
|
|
|
|
|
|
| 【字体：小 大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 |
|
|
|
|
|
