今天给大家带来一个个人开发的基于krpano的UI库,当你使用的时候,会觉得和使用其他前端UI框架一样简单,并且容易扩展和二次开发。另外,棒棒糖科技网站(http://www.nanhaibo.com/bbt_tech)改版,今后发布的文章都会在网站上有详细的教程和代码解析,欢迎各位同学多多关注!!
基于krpano的简易UI插件——panotoast.xml,只有这一个核心文件,使用时在主文件内引入即可。由于是一个简易的UI插件(之后会不断扩充),只关注两个常用的内容——文字轻提示和常用按钮。
1. 文字轻提示。轻提示是主动创建提示layer,并在适当的时间销毁layer,这样做的好处就是减少DOM元素的操作,提升性能。使用方法也非常简单,在onclick中写如创建函数,如下:
onclick="create_toast('简单提示',basic|popup,5)"
这里的核心函数是create_toast(),接受三个参数,html、style、delaytime:
这里的style由两部分组成,也就是两个普通的style属性构成一个toast的颜色和位置,规则是:“颜色|位置”,顺序不能颠倒。插件内置了6种常用的颜色和7种位置style,同学们可以参考源码,自行扩展。 具体使用规则请参考棒棒糖科技网站。
2.常用按钮。按钮是我们经常使用的组件,之前在krpano中使用一些自定义按钮时,我们往往会使用图片来代替,这样的好处就是可以随意设计样式,坏处也显而易见,就是不灵活,还得麻烦UI设计师。panotoast插件不仅集成了文字提示,而且添加了常用按钮模块,使用起来也是非常方便。
和其他大厂的UI框架类似,button按钮主要通过添加style的方式体现,如下:
<layer name="btn_popup" style="btn_default|basic|small" align="left" html="popup" x="6"onclick="create_toast('简单提示',basic|popup)" />
上边的例子中,会创建一个样式默认,颜色为basic,尺寸为small的按钮。预制的按钮样式有默认的圆角矩形(btn_default)和圆角按钮(btn_circle)两种,颜色使用的和toast的颜色系一致,同时还添加了按钮常用尺寸:default、large、small;这些都是style属性,非常容易修改和扩展。