jQuery UI小部件交互合集
jQuery 的小部件用起来还是蛮顺手的,尤其是配合 UI 组件那套,基本能应付大部分前端交互需求。比如你想做个可拖拽的弹窗或者标签页切换,用 jQuery UI 几行代码就能搞定,响应也快,兼容性也还不错。
交互设计方面,jQuery UI 自带的效果挺丰富,像accordion
、datepicker
、dialog
这些,基本都是拿来即用的级别,适合做原型或者中后台管理页面。想看点实际例子,可以看看jQuery UI 组件交互设计这篇,讲得比较细。
如果你想轻量点,不用整套 UI,单用几个组件也没问题。比如 UI 1.7.2 轻量交互组件集这篇,里面有不少拆出来用的小模块,页面干净、加载快,适合做移动端页面或嵌入式控件。
另外,小部件这个概念其实不止 jQuery 在用,像 Mendix、Famous、Android 那边也有自己的 widget 系统。不同平台思路差不多,都是封装交互逻辑和样式,方便复用。
用 jQuery 搞小部件的时候,建议你注意下结构分离,HTML 写清楚结构,JS 负责交互,CSS 控样式。最好都封装成函数或插件,用的时候调用就行,像$('.menu').accordion()
这种写法,既清晰又好维护。
如果你平时还在用 jQuery,或者需要给老项目加点新交互,小部件是个挺值得研究的方向。你可以从开始,比如做个淡入淡出
的文字块,参考这个例子,挺直观。
170.46KB
文件大小:
评论区