Posted by:
努力记

努力记,通过记录,计划,让自己的努力可以触碰彩虹!

5,335

Bootstrap:sco.js插件学习

  • 2014-01-13
  • 暂无评论

sco.js是针对bootstrap中JS组件的功能扩展

官网:http://terebentina.github.io/sco.js/

支持的组件有:

  • 模态对话框:Modal(扩展)
  • 确认框:Confirm(是针对modal扩展的一种确认框)
  • 折叠标签:Collapse(扩展acc)
  • 标签页:Tab(扩展)
  • 提示工具:Tooltip(扩展)
  • 消息提示:Message(类似与alert组件,但更加方便)
  • 验证:Valid(新功能,方便Form验证)
  • 面板:Panes(Tab及Carousel:轮播的综合角色)
  • 异步操作:Ajax
  • 倒计时:Countdown

所有的组件都符合jquery插件的开发方式支持

$.socjs_(插件名称)或者$().socjs_(插件名称)

的调用方式
也支持想bootstrap绑定DOM数据方式

data-trigger="插件名称"

分析:

Modal:

加载远程内容,但目前Bootstrap3.0已经有了该功能
还支持高宽坐标定位的参数设置,但其实写样式就可以了

Confirm:

提供了一个对模态对话框的封装,通过确定和取消操作判断是否执行操作
action参数用于设定确定操作后的执行动作,其余都与模态对话框一致,合适做操作判断提醒

Collapse:

简化绑定对象,默认为同级元素下的div .collapsible
作者认为原始功能的自由度,在大多数情况下都用不到,所以扩展了默认设置

Tab:

简化绑定对象,默认为同级ul下的div .pane-wrapper
作者认为原始功能的自由度,在大多数情况下都用不到,所以扩展了默认设置

Tooltip:

提供多种定位方式,但保证能在边缘的时刻显示

Message:

提供一个快速显示的信息提示在页面顶部,类似noty的样式
提供错误error及成功success2种样式选择

Valid:

扩展了form的验证功能,并继承Bootstrap的样式来展示错误状态

  1. 目前不支持3.0,需要自己更改样式名称
  2. error修改为has-error
  3. span.message添加help-block

内置支持ajaxform的操作,极为简化表单操作
还规范了ajax的返回信息,集成自身的message组件
不足:未扩展ajax验证

Panes:

简化绑定对象,通过

var $panes = $.scojs_panes('#panes-example', {easing: 'flip'});

使用

$panes.select(0)

的方式选择其中的对应元素

Ajax:

让连接能去读取其他内容用ajax,但不需要浏览器历史等其他效果,不是很明白作用场景

Countdown:

提供一个倒计时功能插件

<div id="countdowner" data-d="días" data-h="horas" data-m="minutos" data-s="segundos"></div>

通过传递时间戳,指定显示的天,小时,分钟,秒的字符串,非常容易使用!

总的来说,作者的思想是简化实际业务中的js复杂度

对我来说这几个几个插件是非常有用的:

  • Message(快捷方便,显示样式优雅)
  • Countdown(比我自己设计的方便,不用过多的设定span标签组合字符串,使用了最基本的元素,在业务开发中大致也只有这个需求:天,小时,分钟,秒)
  • Valid(集成了ajaxform的操作,对返回值做了规范,可以很容易的设定valid-ajaxformmessage3者的关系)

对于Collapse,Panes,Tab3个插件来说,使用场景不多,但作者的思想可以借鉴



back up ↑

无觅相关文章插件,快速提升流量