你的位置:首页 > Java教程

[Java教程]开始用uilang编程


 

翻译如下:

设计师:开始用uilang编程

作者:Benjamin De Cock

编者按:设计者应该学会怎样去编程,开发者应该学会怎样去设计。这是必须滴。在这篇文章中,作者给设计者的建议不包括巧妙编程的技巧。亲可以对uilang的使用持有保留的态度,但是运用uilang编程的思想值得去领略。

设计者使用HTML和CSS已经有段时间了哈。设计者们用HTML和CSS实现设计时通常感到很轻松,至少做静态页是这样。可是,JavaScript经常把设计者们搞得很忧伤啊!写HTML和CSS代码更像是在设计东西。

另一方面,JavaScript更有编程性。这就意味着你不仅要去学一套全新的复杂语法,而且还要学会怎么去写JS。这样的入门门槛是不是高了点?uilang的出现就是要去降低初学的门槛。

这篇文章将会把uilang的观点和语法介绍给亲。在激动人心的时刻到来前,我们先来看一个简单的例子,使亲有个基本的了解。看完整篇文章后,亲就能写出许多典型的小部件,比如弹出框,面板,遮罩层等等。

设计者和开发者间的桥梁

我强烈的认为设计师需要编写他们设计的界面的代码,然而设计师不需要去写可生产的代码,此外,设计师还需要设计行为。设计者们喜欢设计,他们开足马力奋战几小时让工作不延迟或者去找合适的贝尔赛曲线。万事俱备,设计者们仅仅缺乏一些技术手段了。

uilang努力去做设计者和开发者间的纽带,uilang为设计者提供一个极为简便的工具,让设计者实现他们的界面创作。阅读uilang就像阅读普通的英文,uilang在html代码中就用一行的语句声明行为,uilang提供较少的选择,使得学习过程快、接受效果好。详细的uilang语法后面会说,现在我们先瞥见一点:

 

clicking on "button" toggles class "visible" on "div"

虽然uilang不是独有的原型设计工具,但在开发时,可以用uilang安全地来创建一些面板,相册,弹出框等等小部件。现在让我们开始动手实践吧!

 准备

uilang基于一条亘古不变的准则:在元素上附加类。当点击元素时,为其去除或添加类,就像我们用CSS来展现,隐藏,变换,动画页面元素一样。这条准则给你带来无限可能。我们来做个简单的公告栏:

先写一段清晰明了的Html代码,如下:

<div id="notification"><p>Did I miss something?</p><button class="hide">Hide</button></div>

然后我们用uilang定义行为:当用户点击一个class属性为“hide”的元素的时候,我们为这个元素(在id为notification的层下)添加”hidden”类,uilang实现这个过程的代码如下:

clicking on ".hide" adds class "hidden" on "#notification"

上面这段代码要写在<code>标签内,uilang会自动识别包含你代码的<code>标签,并且忽视其他的<code>标签。当然,别忘了引入uilang.js文件

 理论上你的<code>和<script>标签可以插入页面的任何地方,但我推荐把它们插入页面的最底端,在</body>标记前:

<body><!--Your content--><script src="uilang.js"></script><code><!--Your uilang code--></code></body>

遵循上面的顺序,能确保你在很好地工作。结合上面的代码,你现在的公告栏代码是:

<body><div id="notification"><p>Did I miss something?</p><button class="hide">Hide</button><div><script src="uilang.js"></script><code>clicking on ".hide" adds class "hidden" on "#notification"</code></body>

工作快要完成了!既然行为已经定义好了,点击时,“hidden”类作用在元素上,我们还要依赖CSS去隐藏公告栏。CSS代码如下:

#notification{  transition:.8s}#notification.hidden{  opacity:0}

祝贺!你已经知道如何用uilang编码了。你可能还没有意识到,但是uilang编程的简单逻辑可以让你创建很多小部件和交互。

英语原文地址:http://www.smashingmagazine.com/tag/html/