当前位置:科技 > 业界 > 业界动态 > 正文

用友iUAP Mobile代码快速编写神器

2016-06-24 12:35:17    IT168  参与评论()人

【IT168 资讯】摘 要:用友iUAP Mobile所带来的HTML/CSS代码快速编写神器,大大提高了HTML/CSS代码编写的速度。

用友iUAP Mobile移动平台发布了内部代号为summer的新版本。summer提供的"极限混合"模式,完美的支持了基于HTML5技术的跨平台移动应用快速开发一体化解决方案。从此,开发者可通过使用HTML5+CSS3+JavaScript技术,快速开发出与原生应用媲美的移动应用。

iUAP Mobile所带来的HTML/CSS代码快速编写神器,大大提高了HTML/CSS代码编写的速度,如下面的演示:

  iUAP Mobile下的编码演示

下面直观的为大家演示iUAP Mobile带来的一些新特性,各位开发者可以一起来体验一下。(http://mobile.yyuap.com/)

一、快速编写HTML代码

更换主题

可以根据您的开发喜好,更换主题

在工具栏上的【窗口】--【首选项】中设置您需要的主题

2. 初始化

HTML文档需要包含一些固定的标签,比如、、等,现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”,然后按Tab键:

html:5 或!:用于HTML5文档类型

html:xt:用于XHTML过渡文档类型

html:4s:用于HTML4严格文档类型

3. 轻松添加类、id、文本和属性

连续输入元素名称和ID,iUAP Mobile会自动为你补全,比如输入p#foo:

连续输入类和id,比如p.bar#foo,会自动生成:

Html代码

下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#],就可以自动生成如下代码:

Html代码

4. 快速生成html代码

通过右击插入控件的功能,快速生成预置好的各种控件模板代码。

5. 嵌套

现在你只需要1行代码就可以实现标签的嵌套。

>:子元素符号,表示嵌套的元素

:同级标签符号

^:可以使该符号前的标签提升一行

效果如下图所示:

6. 分组

你可以通过嵌套和括号来快速生成一些代码块,比如输入(.foo>h1)+(.bar>h2),会自动生成如下代码:

Html代码

隐式标签

声明一个带类的标签,只需输入div.item,就会生成

在过去版本中,可以省略掉div,即输入.item即可生成

。现在如果只输入.item,则iUAP Mobile会根据父标签进行判定。比如在

中输入.item,就会生成

下面是所有的隐式标签名称:

li:用于ul和ol中

tr:用于table、tbody、thead和tfoot中

td:用于tr中

option:用于select和optgroup中

定义多个元素

要定义多个元素,可以使用*符号。比如,ul>li*3可以生成如下代码:

Html代码

9. 定义多个带属性的元素

如果输入 ul>li.item$*3,将会生成如下代码:

Html代码

二、CSS缩写

1. 值

比如要定义元素的宽度,只需输入w100,即可生成

CSS代码

除了px,也可以生成其他单位,比如输入h10p+m5e,结果如下:

CSS代码

单位别名列表:

p 表示%

e 表示 em

x 表示 ex

2、附加属性

可能你之前已经了解了一些缩写,比如 @f,可以生成:

CSS代码

一些其他的属性,比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项,可以通过“+”符号来生成,比如输入@f+,将生成:

Css代码

3. 模糊匹配

如果有些缩写你拿不准,iUAP Mobile会根据你的输入内容匹配最接近的语法,比如输入ov:h、ov-h、ovh和oh,生成的代码是相同的:

Css代码

4. 供应商前缀

如果输入非W3C标准的CSS属性,iUAP Mobile会自动加上供应商前缀,比如输入trs,则会生成:

Css代码

你也可以在任意属性前加上“-”符号,也可以为该属性加上前缀。比如输入-super-foo:

CSS代码

如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀:

CSS代码

前缀缩写如下:

w 表示 -webkit-

m 表示 -moz-

s 表示 -ms-

o 表示 -o-

5、渐变

输入lg(left, #fff 50%, #000),会生成如下代码:

CSS代码

三、附加功能

生成Lorem ipsum文本

Lorem ipsum指一篇常用于排版设计领域的拉丁文文章,主要目的是测试文章或文字在不同字型、版型下看起来的效果。通过iUAP Mobile,你只需输入lorem 或 lipsum即可生成这些文字。还可以指定文字的个数,比如lorem10,将生成:

引用

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.

 

社会文史娱乐汽车科技旅游城市文化

新闻 军事 论坛 娱乐

新闻频道
国内国际社会评论文史专题经济新闻图库老照片
军事频道
军事要闻中国军情国际军情军事历史网友原创军事专题军事图库武器装备军事文化
汽车频道
车闻Update漫话车型漫记车映像实拍解析行业动态新车资讯独家评测汽车生活人文之旅
教育频道
留学移民高考中小学拒讲堂师说商道商论
游戏频道
游点意思网络游戏网页游戏单机游戏手机游戏军事游戏游戏产业发号中心游戏美女图说游戏囧游囧事
科技频道
业界互联网行业通信数码手机平板IT硬件相机笔记本家电产品库
旅游频道
X旅行视界目的地 美图发现社区
文化频道
专题非遗沙龙历史艺文博览读书图库书画禅文化
书画频道
资讯收藏展览在线展厅艺术家视觉专题
体育频道
国际足球中国足球NBACBA 综合体育图片汇总专题策划
视频频道
新闻军事中华出品原创娱乐纪录片微电影决胜海陆空
娱乐频道
明星电影电视音乐专题图库论坛
公益频道
老兵出镜老兵动态老兵资料库关爱老兵在行动公益组织公益人物
城市频道
城市聚焦城市设计城市生活城市策划城 市图赏城市加盟城市论坛
社区频道
中华论坛网上谈兵中华拍客社会时政国际风云生活消费休闲旅游美丽女人娱乐八卦经济风云情感世界文学天地
好医生频道
保健养生疾病防治行业资讯名医谈健康 医生专栏食疗跑步
经济频道
国内宏观海外经济产经商贸时尚消费电商眼球儿企业故事专栏评说识局经济