#
写这些东西都是为了让自己能够学以致用,学到更多东西吧。
##
Let's go
1.结构
Bootstrap所有的js模块都是基于最新版本的jQuery所开发的插件。
以bootstrap-modal.js为例:
!function ($) {
var Modal = function (content, options) {
//.....
}
Modal.prototype = {
//....
}
function xx() { //功能函数,多个
}
$.fn.modal = function (option) {
//集成到jQuery
}
$.fn.modal.defaults = {
//默认参数
}
$.fn.modal.Constructor = Modal //维护原型链
$(function () {
$('body').on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
//集成自动功能,加上 data-toggle="modal" 属性,则自动绑定事件。
}
}
}
2.浅析
这种结构我们应该是很熟悉的,我们平时自己开发jQuery插件也多是这种结构。
主要对Bootstrap最后一个自动调用的代码进行分析。
首先都是采取 委托事件 的方式来绑定事件,这种事件绑定方式一般情况下肯定性能是不咋的。然后就是自动功能了,代码写的很巧妙,充分利用jQuery的.data()这个数据缓存技术。大家自己去体会吧。
不过这刚开始差点让我产生歧义。
引用
You can activate modals on your page easily without having to write a single line of javascript. Just set data-toggle="modal" on a controller element with a data-target="#foo" or href="#foo" which corresponds to a modal element id, and when clicked, it will launch your modal.
英文不好害死人那,
如果是我们自己调用的话,那就不需要加 data-toggle="modal" data-target="#foo" or href="#foo" 这些属性了。加上它就表明是让Bootstrap自己绑定事件了。
$(document).ready(function () {
$('按钮').on('click',function () {
$('模块').modal({});
})
});
分享到:
相关推荐
bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap ...
这是C# mvc 5框架快速搭建文档,包含bootstrap前端框架。
bootstrap前端框架教程.zip 1.引入Bootstrap CDN 2.最简单的Bootstrap例子 3.可视化拖曳布局,生成HTML代码 4.Container类 5.Bootstrap的网格系统 6.控件 7.插件 8.UI编辑器 9.Bootstrap HTML编码规范 10.CSS编码...
基于angularjs+bootstrap的前端框架,内置全套angularjs插件及bootstrap插件
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
最早期的 Bootstrap 前端框架,应该兼容 IE 8 - IE 11 等早期浏览器。使用 jQuery 作为默认 js 框架。 适合古董网站的维护和升级,情怀玩家们不要错过了哦 :)
bootstrap前端模板、bootstrap前端模板、bootstrap前端模板、bootstrap前端模板、
bootstrap网页前端框架,轻松搭建facebook网页效果,内部封装了css,js,jquery,定义了大量功能丰富的控件。
Bootstrap前端框架.docx Bootstrap和普通的HTML页面一样,定义标题都是使用标签到,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样
Bootstrap是最受欢迎的HTML、CSS和JS的前端开发框架,用于开发响应式布局、移动设备优先的WEB项目,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式。
基于SSH框架的在线考试系统 ,使用bootstrap作为前端框架,分页是自己分装的bean. 有以下功能 学生登录和教师登录 学生端: 学生在线考试 成绩查询 修改密码 退出系统 教师端:考生信息管理 考生成绩管理 试卷管理 ...
10个Bootstrap热门的前端框架网站案例.docx
;Bootstrap框架;...Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。 [1] Bootstrap提供了优雅的HTML和CSS规范,它即是由...
关于ssm的多表联查实例,用bootstrap来进行前端的设计。
bui后台管理系统模板bootstrap前端框架html模板.zip
bootstrap 前端开发利器 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
不错的html5的前端框架,集成了完整的bootstrap脚本,可切换8中不同的前端样式; 封装了常用的grid表格、在线编辑器、文件上传、日期控件、进度条、弹出框等。 是UI设计不错的选择。