« Newer Entries
Older Entries »

Category Archive: 前端开发

谈谈对 jQuery Templates 的管理

jQuery Templates 是一个 jQuery 的官方插件，中文叫 jQuery 模板，用途是简化 data to html 操作。说明不如演示，看下例：

<ul id="movieList"></ul>
<script id="movieTemplate" type="text/x-jquery-tmpl">
    <li><b>${Name}</b> (${ReleaseYear})</li>
</script>
<script type="text/javascript">
    var movies = [
        { Name: "The Red Violin", ReleaseYear: "1998" },
        { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
        { Name: "The Inheritance", ReleaseYear: "1976" }
    ];
    // Render the template with the movies data and insert
    // the rendered HTML under the "movieList" element
    $( "#movieTemplate" ).tmpl( movies )
        .appendTo( "#movieList" );
</script>

发现端倪没？有个 script 的 type 居然是 text/x-jquery-tmpl，恩，这就是模板了。 (更多…)

标签：

Posted on 2011-05-14

拥抱 HTML5

最近读了为之漫笔翻译的《HTML5 设计原理》，让我对这一规范有了全新的认识。

原本我以为：

  • HTML5 不过是添加一些新元素、新属性和新特性而已；
  • HTML5 鼓励不严谨的编码风格；
  • 现在支持 HTML5 还为时过早。

我错了，HTML5 确实是一个伟大的规范，她的伟大之处在于她的设计基于一个理念：求真务实。她着力于解决实际问题而不是构建理想的乌托邦。
(更多…)

标签：,

Posted on 2011-04-06

保证可用性的 after 图片替换技术

a {
  display: block;
  width: 100px;
  height: 40px;
  background: url(home.png);
  text-indent: -999em;
  overflow: hidden;
}

负缩进是最常用的 CSS 图片替换文字技术，这个方法的缺点是如果图片加载失败，元素就会变成空白的，原有文字也无法显示。
(更多…)

标签：, ,

Posted on 2011-04-04

IE6各种诡异BUG整理

为了避免“两次踏入同一条河流”，我将工作中遇到的IE6 bug 整理成文，持续更新。
(更多…)

标签：, , ,

Posted on 2011-03-03

如何让未知宽度的元素居中？

居中元素最常用的语句是“margin: 0 auto;”，不过这只适用于设置了宽度的元素，如果一个元素的宽度需要根据内容自动缩放（如导航条），就需要使用“50%相对定位”的方法。

我们需要把 #em 居中，首先给 #em 包裹上一个容器元素：

<div id="wrap">
  <div id="em">卖女孩的小火柴</div>
</div>

然后如下设置 CSS：

#wrap {
  float: left; /*自动适应内容宽度*/
  position: relative;
  left: 50%; /*定位#wrap的左边在body的中线上*/
}
#em {
  position: relative;
  left: -50%; /*定位#em的中线在#wrap的左边上，也就是body的中线，也就是与body居中*/
}

查看演示

标签：,

Posted on 2010-07-06

« Newer Entries
Older Entries »