bootstrap插件思路整理
知识有时也需温故知新嘛,本次做一次bs插件梳理。
$.support.transition
通过判断自定义元素是否支持WebkitTransition、MozTransition、OTransition和transition来判断当前浏览器是否支持transition这个css3属性
Modal
- 从UI功能角度来说,点击某个元素来触发弹出一个对话框。在插件第一次加载的时候,用body监听所有data-toggle="modal"属性元素。一来达到事件绑定的目的,而来为后续异步加入同属性元素做准备。
- 一个对话框就对应需要将其关闭的功能,modal实现是将改方法放在构造器中去实现,一来每个modal都有自己独立的关闭系统,互相不冲突。二来对于原型继承的方式,如何能让每个实例拥有属于自己的一片天。选用构造器而不是原型中为他们布置,提供了一套不错的思路。
scrollspy
- 页面加载完成之后为当前页面上面所有拥有data-spy="scroll"属性的元素执行scrollspy方法,实际是进行初始化构建。
- 从UI功能角度来说,scrollspy分为两个部分:其一、点击上面导航栏里面的元素,能够快速链接到对应的内容;其二、滚动侧边栏,可以让对应的导航栏标题高亮。直观感受这两者必须要存在某种联系,制作这类UI插件则需要从这两者联系出发。
- scrollspy提供了一种关联思路:通过html属性关联,导航栏里面拥有内容部分头部的id哈希值。而内容框则拥有导航栏的id哈希值。其他解析工作交给插件去完成。
- 在scrollspy的构造器部分依然为导航栏绑定click事件,为侧边栏绑定了scroll事件。滚动侧边栏,则是让滚动的高度与内容框内具体内容距离父元素的高度进行比较,进而得出让导航栏的哪个元素高亮。
- 我们可以看到其中一个问题,就是采用a标签链接的方式,会对scroll造成两次触发。同时也会修改url。撇开修改url,这也是如此关联的一种通病了。
tab
- tab和scrollspy的UI展现类似,对于导航栏和内容框的关联关系也是使用html属性id哈希值进行关联。
- 高亮部分有两个:导航栏;内容框。
- 让之前高亮的元素(拥有active类)去掉高亮,让需要高亮的元素进行高亮操作(添加active类)。
tooltip
- 作为一种小型UI插件,tooltip没有默认初始化步骤,要使用的时候需要开发人员自行调用。
- 在Tooltip构造器中可以看出此时的构造器已经充当了一个原型方法init的启动器。对于更多事件的绑定与监听则放在原型init方法里面。较之modal和scrollspy,传入实例中独立的元素来达到在原型方法里绑定自己独立的事件,可以看到这种写法,相当于将构造器的绑定方法进行了一层封装,并将封装内容塞在原型里面,使得构造器更加苗条。
- 此插件另外一个核心内容就是让提示定位到具体元素上面。从定位元素获取offsetWidth、offsetHeight和相对视口的top和left再去定位提示元素。
collapse
- 从UI功能来讲,折叠的使用时非常广泛地,折叠方式也是多种多样的。bs一系列插件在关联关系的处理上基本一致。
- 使用高度判断是否添加类,相当繁琐,推荐collapse的做法跟tab基本是一致的。
carousel
- 轮播插件式比较依赖结构和样式的。
- 构造器中为元素绑定mouseenter和mouseleave事件。
- 轮播存在prev、next、to等操作。carousel将三种操作抽出公共的slide方法进行处理。
- 关于pause和cycle操作,基本采用清除定时器和重启定时器的方式完成。
其他bs的插件并不常用,这里没有列出。
读源码,角度不同,获取收获也不同吧。
bootstrap插件思路整理的更多相关文章
- Bootstrap插件的使用
昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...
- bootstrap插件学习-bootstrap.dropdown.js
bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...
- bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
- Angular2发布思路(整理官网Deployment页面)
本文是按着ng2官网的高级内容“Deployment”的思路整理得出的,原文虽然在angular2的中文站下挂着,截止目前却还是英文版未翻译,笔者就在这里结合自己的理解给出原文的一点点整理.这是原文地 ...
- Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式
Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...
- Bootstrap -- 插件: 提示工具、弹出框、 警告框消息
Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...
- Bootstrap -- 插件: 模态框、滚动监听、标签页
Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...
- BootStrap插件
站点引用 Bootstrap 插件的方式有两种: 单独引用:使用 Bootstrap 的个别的 *.js 文件.一些插件和 CSS 组件依赖于其他插件.如果您单独引用插件,请先确保弄清这些插件之间的依 ...
- 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...
随机推荐
- Python学习之路—Day1
第1章 Python语言简介 1.1 Python是什么 Python(英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn)是什么呢?简单的说,它是一种计算机编程语言及一组配套的软件工具和库. ...
- Yaf零基础学习总结4-Yaf的配置文件
在上一节的hello yaf当中我们已经接触过了yaf的配置文件了, Yaf和用户共用一个配置空间, 也就是在Yaf_Application初始化时刻给出的配置文件中的配置. 作为区别, Yaf的配置 ...
- 微信内置浏览器的JS API
/**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.新的分享接口,包含朋友圈.好友.微博的分享 ...
- Sphinx : 高性能SQL全文检索引擎
Sphinx的特点 快速创建索引:3分钟左右即可创建近100万条记录的索引,并且采用了增量索引的方式,重建索引非常迅速. 闪电般的检索速度:尽管是1千万条的大数据量,查询数据的速度也在毫秒级以上,2- ...
- 用python实现,冒泡排序演示
# -*- coding:utf-8 -*- import time from Tkinter import * a=[1,9,5,6,8,1] class CanvasDemo(): #n1=70 ...
- Microsoft 参考源代码系统更新,有惊喜哦。
在以前,MS的参考源代码在单步调试时时好用时不好用,最后我找到了原因,那就是如果想用MS的参考源代码进行单步调试,那么你就得想尽办法把系统上的.NET FX降级到RTM版本(卸载各种相关补丁),今天我 ...
- 【C语言学习】《C Primer Plus》第11章 字符串和字符串函数
学习总结 1.字符串(character String)是以空字符串(\o)结尾的char数组. 2.gets()方法代表get String,它从系统的标准输入设备(通常是键盘)获取一个字符串,当字 ...
- 【C语言学习】《C Primer Plus》第9章 函数
学习总结 1.函数有利于我们可以省去重复的代码,函数可以使程序更加模块化,从而有利于程序的阅读.修改和完善.我们在系统设计或架构设计的时候,往往追求的是模块化.组件化.松耦合,而函数就是其代码的表现. ...
- 以代码爱好者角度来看AMD与CMD
随着浏览器功能越来越完善,前端已经不仅仅是切图做网站,前端在某些方面已经媲美桌面应用.越来越庞大的前端项目,越来越复杂的代码,前端开发者们对于模块化的需求空前强烈.后来node出现了,跟随node出现 ...
- c++实现冒泡排序
# include<iostream> #include<stdio.h> using namespace std; void maopao(int *list){ int i ...