前言几天前在保哥的plurk上,看到保哥推荐Zen-coding这个小工具, 光看Demo的影片就让人热血沸腾了。 有兴趣的人可以到官方网站下载一下你需要的Zen-coding。 官方网站:http://code.google.com/p/zen-coding/ 支持的编辑器相当多, Full support Aptana, crossplatform Coda — via TEA for Coda, Mac Espresso — via TEA for Espresso, Mac editArea — online demo Visual Studio — external download, Windows
Partial support ("Expand Abbreviation" only) TextMate, Mac. Also can be used with E-texteditor for Windows TopStyle, Windows Sublime Text, Windows GEdit — external download, crossplatform Dreamweaver CS4, Windows, Mac UltraEdit, Windows BBEdit/TextWrangler — external download, Mac
Basic support (no abbreviation expanding, editor's snippets only) Web IDE, crossplatform NetBeans, crossplatform
这边小的是下载Visual Studio的plug-in,下载的msi安装档是1.61MB。
介绍其实感觉使用上,就像code snippet一样, 输入片段,然后一个热键,自动产生相关的html或CSS片段。 比较不一样的,就是支持CSS selector的语法,(有没很熟…因为jQuery的Selector也是透过这样的方式去筛选数据的) 在网站上的Documentation上,可以看到: HTML elements and its aliases for Zen HTML plugins Selectors and aliases for Zen HTML plugins CSS-properties and its aliases for Zen CSS plugins
里面有介绍输入什么样的字或语法,可以自动产生相对应的HTML阶层片段和CSS描述。 接下来,我们就来玩玩看。
Play it先说明一下现在我的环境是VS2008,Widnows 7 x64版本,VS上有安装其他的plug-in为GhostDoc与Regionerate。 (会先介绍作业环境,是因为demo大的PC安装完Zen-coding,VS就挂掉了,原因不明。不过小的目前是正常运行的) 默认的安装路径是在:C:Program Files (x86)ZenCoding.VisualStudio 不过这不用理他,因为打开Visual Studio就看的到这个plug-in了。 工具->选项(选项的窗口里面,应该就有一个项目是ZenCoding)->环境->键盘 接着在‘显示包含下列的命令’打zen,就会看到两个东西, 小的这边是只在‘HTML编辑器源代码检视’底下,使用Zen-Coding的功能,触发的热键是Ctrl Q。 这样就设定完成了。 接着就如同网站上Documentation里描述的,我们只要打特定字,按下ctrl Q,Zen-coding就会自动帮我们产生程序片段。
简单一点的说明,就是 举个例子来说, 小的现在要建立一个table,有3个tr,每个tr里面有3个td, table的id是91_table,table的class是.grid,td的id则是依index产生,td的id为91_td_N,td的Class为tdClass
那我只要输入: table#91_table.grid>tr*3>td#91_td_$.tdClass*3
输入完后,按ctrl Q,就会变成:
除了table之外, 输入ul ,按ctrl Q,就会出现
输入select ,按ctrl Q就会出现 结论
因为支持的是HTML和CSS,所以就比较不会局限使用何种语言开发, ASP、ASP.NET Webform、ASP.NET MVC、JSP、PHP、甚至XHTML, 都可以透过Zen-coding这样的plug-in,使用CSS语法来快速产生具阶层式特性的html。 可以坐,就不要用站的啰… 来源:https://www./content-4-449101.html
|