作为程序员，blog难免要贴不少代码，简单的pre标记显得比较平板，不象ide里面的代码排版颜色那么漂亮。

在网上搜了一把，SyntaxHighlighter应该是目前最美观最全面的代码着色器了，唯一的缺点就是需要引入的文件太多……不过要做到这么全的代码类型覆盖，这也是不可避免的。

官方网站链接：http://alexgorbatchev.com/wiki/SyntaxHighlighter

http://cnblogs.com/LoveShrek/archive/2005/03/24/125149.html



非常棒！长久以来js难以调试的难题解决了！

我们经常需要判断一个表单状态或者属性，例如当在一个文本框中输入字符时，使提交按钮可用，这是我们通常会用onkeypress。

但是如果用户把表单清空呢？或者按后退键清除输入，那么在这时候如何触发事件？

答案是onPropertyChange ，更改文本框的任何属性（包括从键盘、鼠标或脚本向文本框输入的内容）时，该事件都会激发。

原文:http://www.microsoft.com/china/MSDN/library/WebServices/WebServices/nacwebteam11042002.mspx

界面交互

在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等有所疑问，可以再详细研究一下，也欢迎大家来和我交流。

MSDN关于JS操作XmlDom的文档

这是英文文档,网上没有看到比较详细的中文文档,好在不复杂,大家将就一下吧

(最近MSDN不知道什么毛病，经常访问有问题，如果无法访问，请先登录msdn，再输入地址浏览)

蓝色理想的HTC教程

网上也没看见比较全面的讲述，这个简单易学,基本概念清楚了。

设计器初始化

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[i].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++;
      }
   }
}

这里对前面讲的CSS设计器系统关键代码作一些小结，如果没有看过前面文章请先参看前文
解析CSS样式文件

这段代码主要作用是把CSS文件分解为多个样式类，并按名称/文本属性生产ClassItem对象，并保存在一个ArrayList(cssList)中(C#代码)

//读取文件
 FileInfo theSource= new FileInfo (@m_filePath);
 StreamReader reader = theSource.OpenText();

 //将文件流转化为文本
 m_cssText = reader.ReadToEnd();
 reader.Close();

 //定义CSS文本分割符
 char[] delimiters = new char[] { '{','}'};
 int iCheck = 1;string className = null;

 //将文本转化为ArrayList
 foreach ( string substring in m_cssText.Split(delimiters))
 {
     if (iCheck%2==0)
         //当iCHeck为偶数时,字符串为样式属性内容 
         //将解析的样式名和属性作为ClassItem对象存入cssList        
         cssList.Add( new ClassItem ( className, substring.Trim() ) );

     else
         //当iCHeck为奇数时,字符串为样式名,暂存 
         className = substring.Trim(); iCheck++;
 }
 

交互界面构建

交互界面由Javascript通过XmlDocument读取Xml文件动态生成。

首先要读取XML文件，然后遍历整个XML文件，先遍历样式分类，再对每个分类遍历其下的所有样式属性。比较关键的代码是对XML的遍历，下面是对样式分类的遍历代码。

//LoadXML是XML文件读取函数
var dom = LoadXML("css.xml");

//通过XPath和selectNodes方法返回一个XMLDOMNodeList对象
var oNode = dom.selectNodes("//Category/Name");

//获取该对象长度，即XML文档中该路径节点的数量
var intCategory = oNodes.length;
for (i=0; i<intCategory; i++)
{
//获取集合中的节点
oNode = oNodes.nextNode;

if (oNode != null)
{
//样式分类界面构建代码-略 ……
}
}

样式输入控件构建函数，该函数作用是根据XPath路径查询XML定义，生成交互控件

function BuildInput ( path )
{
var str="";
var aNode=null;
var attValue=null;

//通过selectSingleNode返回符合条件的第一个节点 
var actNode = dom.selectSingleNode(path+"ActionType");
var nameNode = dom.selectSingleNode(path+"CssName");

//如果属性为选择输入，则读取SelectItems，并构建select控件 
if (actNode.text=="select")
{
str += "<select id='"+nameNode.text+"' name='"+nameNode.text+"'class='eSelect'>";

//查询该项的所有选择列表项 
var itemsNodes = dom.selectNodes (path+"SelectItems/Item");
str += "<option value='-1'>未设置</option>";
for (ii=0;ii<itemsNodes.length;ii++){
aNode = dom.selectSingleNode (path+"SelectItems/Item["+ii+"]");

//如果该项含有Name属性则在列表中显示Name属性值
attValue = aNode.getAttribute("Name")
var txtNode = dom.selectSingleNode (path+"SelectItems/Item["+ii+"]");
if (attValue==null)
str += "<option value='"+txtNode.text+"'>"+txtNode.text+"</option>";
else
str += "<option value='"+txtNode.text+"'>"+attValue+"</option>";
}
str += "</select>";
}
else
//如果属性为其他模式，则构建input输入，设置class属性为ActionType
{
str = "<input name='"+nameNode.text+"' id='"+nameNode.text+"' class='"+actNode.text+"'>";
}

return(str);
}