订阅汇聚素材网Feed

Kissy Gallery 近期大更新

Kissy Gallery 经过大的改版后,组件数量和质量都在稳步攀升,来让我们看看这一周Kissy Gallery中新增了哪些有意思的组件吧。

1,powerTips

T1qYBuFfNeXXXJHMoq-425-147

这是一个Api设计轻便的Tip提示控件,支持触点的12个方位的浮层展现。支持一组提示批量初始化,非常方便,初始化代码:

T1iz4uFcFdXXaMepbA-679-187

参数说明:

  • triggers:添加标签提示的hook,支持css选择器
  • location:标签出现的默认位置,如果Tip显示超过视口,则自动调整到视口内
  • textAttr:标签内容数据来源的属性,默认为title
  • theme:皮肤,可取值为default/red/blue/orange/purple
  • spacing:显示Tip时和触发器之间的距离

12个位置的取值说明:
T1C74vFkpcXXX71nES-550-400

与之类似的,Gallery还有另外一个组件Tip,提供了更复杂繁琐的配置和用法。

2,Tip

这仍然是一个小浮层的控件,和上一个不同,这个控件不仅仅用于文本区域中的辅助文字提示,还有更复杂的配置用法,来帮你完成一些更具结构化的浮层展 示。但不管有多复杂,Tip控件始终是一个用于弹出一段小内容的浮层,浮层的定位围绕事件发生地。它展现的生命周期应当是“很短”的,所以此类控件只有最 基础的行为,更多的定制化需要再做封装,本组件基于KISSY的overlay完成。

调用方法:

T1msNvFopdXXbQtvoF-330-125

Tip的行为只有隐藏和显示两种属性,不会被销毁。多个Tip有可能会发生重叠,程序会计算最后激活的Tip展现在最高层。

Tip组件包含一套默认样式,跟随组件一起提供,由loader载入,不需要额外手动引入。如果需要自定义样式,则可以给Tip容器传入tipClass。

T1rXttFXJhXXbqZ9Pl-220-68

Tip组件也具有12种定位,具体参照文档。Tip的对齐考虑了鼠标的尺寸,即这两种情况浮层相对元素定位/浮层相对鼠标定位

T1v1koXb0fXXaNOYjL-371-120

如果相对于鼠标定位,则这样传参

T1ON8tFjBfXXcmfZzm-221-87

同样,浮层为需要一些复杂功能的场景提供了更多API和事件,比如,我甚至可以这样阻止Tip的显示

T1m9XlFlXfXXbWdubV-268-167

更多信息参照文档Demo

3,IToolTip

又是一个Tip,和前两个完全不同,这是一个图钉组件,你需要定义一系列固定结构的html代码片段,通过将他们渲染为图钉。

T1AZtuFcBgXXXEn.sE-434-281
    文档
    Demo

4,jquery API 适配器

尽管KISSY的Node实例方法和jQuery非常像了,但还有不少细节有差异,因此Gallery中增加了这个适配器,来让Kissy代码拥有类似jQuery的$一样的API,以减少将jQuery代码迁移至Kissy的成本。用法:

T13E0qFc8cXXcp3TzU-424-67

Demo

5,Autocomplete自动完成

这是一个功能足够完善,且完美支持无障碍操作的自动完成组件。数据格式可配置多种,且支持本地和远程数据,匹配模式可置于前端也可放于后端。

T1VwRtFldgXXb.iJAG-646-220

版本1.0的功能:

支持本地或远程,并对匹配结果进行二次开发
支持热门推荐,及没有任何输入时暂时默认推荐内容
支持多个项的输入,自行指定分隔符
盲人用户的支持,热门推荐模块支持键盘上下左右操作

初始化方法:

T13.NtFkteXXaNw7fv-573-163
文档
Demo

6,二维码生成

这是一个生成二维码的组件,支持浏览器:

IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile

T11GNwFaVaXXcnXz7a-204-179

初始化方法

T1E_BtFelgXXbztzb0-380-233

文档地址Demo

此外再推荐一个常胤写的小工具,添加到书签的生成二维码功能,手机调试利器。

T19uxuFhpaXXavlmUg-418-215

just for fun~

来源:ued.taobao.com/blog/2013/06/kissy-gallery/

8 人Likes
  

文章转载请注明:Kissy Gallery 近期大更新-汇聚素材网

本文固定链接:http://www.webhj.com/hj-503.html  +复制链接

Kissy Gallery 近期大更新:等您坐沙发呢!

发表评论

*

*

4 + 3

快捷键:Ctrl+Enter
0全站搜索 1 设计 2 素材 3 教材 4 WEB 5 电子书籍