刘钢的博客 - 我是UED » zen coding http://www.iamued.com http://www.IamUED.com Wed, 18 Jan 2012 02:51:35 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Zen Coding初体验 确实爽 http://www.iamued.com/qianduan/1246.html http://www.iamued.com/qianduan/1246.html#comments Thu, 28 Jan 2010 12:21:33 +0000 RichieLiu http://www.iamued.com/?p=1246 一直听说Zen Coding 最近一直在研究前端最合适的IDE 所以也索性尝试了一下

ZenCoding项目地址：http://code.google.com/p/zen-coding/

先说环境 我是在MyEclipse > aptana 下面安装的Zen Coding

安装方法不难 建立一个项目 新建一个文件夹叫 script 然后把Zen Coding拷贝进去就可以了

Aptana/Eclipse

由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一个EclipseMonkey插件的支持，Aptana已经封装了这个插件，所以如果你使用 Aptana，下面的第一步可以跳过。

  1. 通过更新网站安装EclipseMonkey: http://download.eclipse.org/technology/dash/update(如 果你使用Aptana，可跳过这一步)
  2. 在你的当前工作去创建一个顶级的项目，给它命名，比如，就叫zencoding
  3. 在新创建的项目中创建scripts文件夹
  4. 解压缩下载的ZIP插件包到该文件夹。项目结构看起来就像这样:
  5. 安装之后，Aptana的菜单栏中的“脚本(Script)”菜单中将会出现Zen coding相关子菜单

注意事项：

  • Aptana版的官方插件是基于MAC机的，如果你用的是Windows，需要手动更改快捷键(在每个文件头部的注释片段中更改)
  • 官方的文件编码有点儿乱，修改官方js的时候，请注意编码问题，修改不当会造成相关功能的丢失

试用了一下发现确实很爽

具体的看下面介绍

做一个简单的Demo

html:xxs

div#header>div#logo.left+ul#menu>li*5>a

两行代码下去 生成的结果

</p>
<p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></p>
<p><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"></p>
<p><head></p>
<p>	<title></title></p>
<p>	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /></p>
<p></head></p>
<p><body></p>
<div id="header">
<div id="logo" class="left"></div>
<ul id="menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<p></body></p>
<p></html></p>
<p>

方便快捷 下面介绍一下选择符用法

这里是一个支持的属性和操作符的列表：

* E

元素名称(div, p);

* E#id

使用id的元素(div#content, p#intro, span#error);

* E.class

使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;

* E>N

子代元素(div>p, div#footer>p>span);

* E+N

兄弟元素(h1+p, div#header+div#content+div#footer);

* E*N

元素倍增(ul#nav>li*5>a);

* E$*N

条目编号 (ul#nav>li.item-$*5);

具体的还要等我用熟了再给大家介绍了

本文部分内容转自互联网

]]> http://www.iamued.com/qianduan/1246.html/feed 2