bootscript/javascript组件
javascript组件
（1）每一个插件（带有js功能的组件），想使用bootstrap插件，一个是要去写他的html，第二个是使用CSS去修饰它，再引入相应的js文件。
bootstrap框架里的轮播图，他有自己的js文件。
JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或压缩版的 bootstrap.min.js）。
建议使用压缩版的 JavaScript 文件
bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。
（2）组件的 data 属性
data-toggle：指的是什么事件触发
data-target : 绑定其效果的对象
（3）插件之间的依赖关系
导入bootstrap.min.js 之前 要导入jquery.js
一.模态框 modal.js ----- 以弹出对话框的形式出现 。
点击按钮即可通过 JavaScript 启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
模态按钮
</button>
<!-- Modal --> fade的过渡效果是加在madal中的，不是加在button上！
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- 决定模态框的大小和位置 ,通过添加modal-lg类改变大小-->
<div class="modal-dialog modal-lg">
<!-- 模态内容部分 -->
<div class="modal-content">
<!-- （1）header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
<h4 class="modal-title" id="myModalLabel">表单提交</h4>
</div>
<!-- （2）内容 -->
<div class="modal-body">
<input type="text" class ="form-control">
</div>
<!-- （3）尾部 -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
增强模态框的可访问性
务必为 .modal 添加 role="dialog" 属性，aria-labelledby="myModalLabel" 属性用于只想模态框的标题栏，aria-hidden="true" 用于通知辅助性工具略过模态框的 DOM元素。
另外，你还应该通过 aria-describedby 属性为模态框 .modal 添加描述性信息。
可选尺寸模态框提供了两个可选尺寸（modal-lg/modal-sm），通过为 .modal-dialog 增加一个样式调整类实现。
二.下拉菜单---dropdown.js
<!-- 小的下拉按钮 -->
<div class="dropdown">
<!-- (1)点击按钮-->
<button id="dLabel" type="button" data-toggle="dropdown" class="btn btn-success btn-lg">
按钮
<span class="caret"></span>
</button>
<!-- (2)菜单目录 -->
<!-- <ul class="dropdown-menu" >
<li><a href="#">百度一下</a></li>
</ul> -->
<div class="dropdown-menu">adnajdhajkd</div>
</div>
<!-- 自己来写一个 -->
<!-- 这是我总结的超简单写法 -->
<div class="dropdown">
<button class= "btn btn-danger" data-toggle="dropdown">按钮</button>
<div class="dropdown-menu" role ="menu">这是面板</div>
</div>
滚动监听--- scrollspy.js
1.给想要滑动的区块设置 data-spy="scroll"
2.给设置data-spy=“scroll”的区块设置 相对定位
<!-- 系统提供的源代码 -->
<!-- <body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body> -->
<!-- 自己写 -->
<!-- （2）做一个简单的导航 -->
<div class="navbar-example">
<!-- 这是一个导航 -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#ios">ios</a></li>
<li role="presentation"><a href="#html">html</a></li>
<li role="presentation"><a href="#php">php</a></li>
</ul>
</div>
<!-- （1）这是滑动监听空间 -->
<!-- 核心是：监听控件里的滑动到一个锚点，然后修改这个锚点的active -->
<div data-spy="scroll" data-target=".navbar-example" style="position: relative;height: 300px;overflow: auto;">
<!-- （3）设置id对象让与导航栏里的标签对应起来，导致标签可以定位行（锚点特性），滑动监听到某个位置，回设导航栏上的相对应a标签的active -->
<h3 id ="ios">IOS</h3>
<p>...</p>*n
<h3 id ="html">HTML</h3>
<p>...</p>*n
<h3 id ="php">PHP后台</h3>
<p>...</p>*n
三.标签页 Togglable tabs--- tab.js
<!-- <ul class="nav nav-tabs" role = "tablist">
<li role="presentation" class="active"><a href="#ios" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation" role="tab" ><a href="#android" data-toggle="tab">Profile</a></li>
<li role="presentation" role="tab" ><a href="#html" data-toggle="tab">Messages</a></li>
</ul> -->
<!-- 2.给他设置功能面板 -->
<!-- Tab panes -->
<!-- <div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="ios">这是ios面板</div>
<div role="tabpanel" class="tab-pane" id="android">这是安卓面板</div>
<div role="tabpanel" class="tab-pane" id="html">这是HTML面板</div>
</div> -->
< !-- 精简版 -->
<!-- 1、
（1）给a标签设置 data-toggle ="tab"
(2) 给a设置对应的锚点id
-->
<a href="#ios" class="btn btn-danger" data-toggle="tab">iOS</a>
<a href="#android" class="btn btn-danger" data-toggle="tab">安卓</a>
<a href="#html" class="btn btn-danger" data-toggle="tab">HTML</a>
<!-- 2.给他设置功能面板 -->
<!-- Tab panes -->
<div class="tab-content">
<p id="ios" class="tab-pane active" >这是ios面板</p>
<p id="android" class="tab-pane " >这是安卓面板</p>
<!-- <p id="html" class="tab-pane " >这是HTML面板</p> -->
<a href="#" id="html" class="tab-pane">我是html</a>
</div>
三.工具提示 Tooltips tooltip.js
Copy
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<!-- 光拷代码是没有用的，必须自己添加jq代码： $('#example').tooltip();-->
<script>
获得所有的data-toggle的对象，给他们设置一个事件 tooltip
$("[data-toggle ='tooltip']").tooltip();
</script>
四.弹出框 Popovers popover.js
Copy
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="内容，可以自己设置">
Popover on left
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamussagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<!-- 必须自己添加jq代码 -->
<script>
$("[data-toggle ='popover']").popover();
</script>
五 .折叠 Collapse collapse.js
bootstrap版本的代码
<!-- (1)设置一个div class为 panel-group -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<!-- (1)面板 -->
<div class="panel panel-default">
<!-- （2）此面板只有Heading 还可以有 /panel-heading/panel-body-->
<div class="panel-heading" role="tab" id="headingOne">
<!-- (3)标题 -->
<h4 class="panel-title">
<!-- a 链接有一个 事件，collapse 折叠，对折叠1（collapseOne ）的对象造成影响 -->
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
这是第一个部分
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
内容。文字区域
</div>
</div>
<!-- ...............第二个面板...同第一个面板............... -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
这是第二个部分
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
内容。文字区域
</div>
</div>
</div>
</div>
====================简单版本====================
<!-- (1)创建一个button
（2）创建一个div面板
（3）给button增加事件 折叠事件
-->
<button class="btn btn-info btn-lg" data-toggle="collapse" data-target="#demo">按钮</button>
<!-- 小bug a标签通过href=#来控制折叠对象
button或者其他可以用 data-target(绑定对象)
-->
<!-- 这样已经完成了 -->
<!-- <div id="demo" class="in">
我就是面板。爱咋咋，爱的空间按回电话艾克好看后代卡号那块立方卡<br>
ajka akd hakdhna ldkaljaa.ansc,cfav,cmam,va,vcma,mmd,am,dm,am,a
adakd akjahfjka jkafh
</div> -->
<!-- bootstrap里面 多加了一个class .collapse -->
<div id="demo" class="collapse in">
我就是面板。爱咋咋，爱的空间按回电话艾克好看后代卡号那块立方卡<br>
ajka akd hakdhna ldkaljaa.ansc,cfav,cmam,va,vcma,mmd,am,dm,am,a
adakd akjahfjka jkafh
</div>
六.轮播图 Carousel carousel.js
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators轮播图上的小圆圈（导航点）-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides 图片区域 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls 左右的箭头 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
转载自：http://www.cnblogs.com/zhaojing/p/6183486.html。
bootscript/javascript组件的更多相关文章
- 试试用有限状态机的思路来定义javascript组件
本文是一篇学习性的文章,学习利用有限状态机的思想来定义javascript组件的方法,欢迎阅读,后续计划会写几篇专门介绍自己利用有限状态机帮助自己编写组件的博客,证明这种思路对于编程实现的价值,目前正 ...
- Winjs – 微软开源技术发布的 JavaScript 组件集
Winjs 是由微软开源技术的开发者推出的一组 JavaScript 组件,包括 ListView.ListView.Tooltip.DatePicker.Ratings 等等,帮助 Web 开发人员 ...
- javascript组件化(转)
javascript组件化(转) By purplebamboo 3月 16 2015 更新日期:3月 23 2015 文章目录 1. 最简陋的写法 2. 作用域隔离 3. 面向对象 4. 抽象出ba ...
- javascript组件开发之基类继承实现
上一篇文章大概的介绍了一下关于javascript组件的开发方式,这篇文章主要详细记一下基类的编写,这个基类主要是实现继承的功能 为什么要封装基类? 由于这次重构项目需要对各种组件进行封装,并且这些组 ...
- 开发一个完整的JavaScript组件
作为一名开发者,大家应该都知道在浏览器中存在一些内置的控件:Alert,Confirm等,但是这些控件通常根据浏览器产商的不同而形态各异,视觉效果往往达不到UI设计师的要求.更重要的是,这类内置控件的 ...
- 如何优雅的移植JavaScript组件到Blazor
Blazor作为一个新兴的交互式 Web UI 的框架,有其自身的优缺点,如果现有的 JavaScript 组件能移植到 Blazor,无疑让 Blazor 如虎添翼,本文就介绍一下自己在开发 Bul ...
- JavaScript 组件化开发之路（一）
*:first-child{margin-top: 0 !important}.markdown-body>*:last-child{margin-bottom: 0 !important}.m ...
- javascript组件开发
最近忙于重构项目,今天周末把在重构中的一些思想记记: 一.javascript的组件开发:基类的封装 由于这次重构项目需要对各种组件进行封装,并且这些组件的实现方式都差不多,所以想到对组件封装一个ba ...
- （转）javascript组件开发方式
作为一名前端工程师,写组件的能力至关重要.虽然javascript经常被人嘲笑是个小玩具,但是在一代代大牛的前仆后继的努力下,渐渐的也摸索了一套组件的编写方式. 下面我们来谈谈,在现有的知识体系下,如 ...
随机推荐
- VMware Workstation中网络连接之桥接、NAT和Host-only
在Windows XP系统中,安装好VMware Workstation虚拟机软件以后,我们可以查看一下"网络连接"窗口: 在窗口中多出了两块网卡: VMware Network ...
- 81 dumpe2fs-打印“ext2/ext3”文件系统的超级块和快组信息
dumpe2fs打印"ext2/ext3"文件系统的超级块和快组信息. 语法 dumpe2fs (选项) (参数) 选项 -b:打印文件系统中预留的块信息: -ob<超级块& ...
- Angularjs+node+Mysql实现地图上特定点的定位以及附加信息展示
注:本博文为博主原创,转载请注明出处. 在上一篇博文中主要讲述了如何利用AngularJs+Node+MySql构建项目,并实现地图上的多点标注,今天在这篇文章中,我们将在上一个项目的基础上,实现特定 ...
- iOS开发小技巧--iOS程序进入后台运行的实现
iOS程序进入后台运行的实现 视频中看到老师用的iOS7,代码中有开启timer,无限请求数据的功能,但是切换到后台,代码就不打印了 自己用的iOS9,进入后台还是可以打印的,再次进入前台也可以正常运 ...
- 【51Nod 1501】【算法马拉松 19D】石头剪刀布威力加强版
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1501 dp求出环状不连续的前缀和,剩下东西都可以算出来,比较繁琐. 时间 ...
- 计算机中位(bit)， 字节(byte)， 字(word)的关系
1.位(bit) 来自英文bit,音译为“比特”,表示二进制位.位是计算机内部数据储存的最小单位,11010100是一个8位二进制数.一个二进制位只可以表示0和1两种状态(21):两个二进制位可以表示 ...
- IE下a标签后面的span元素向右浮动后错位
错误原因span放在了a标签之后 正确写法是放在之前 如下: <li><span>2016-07-29</span><a href="#" ...
- 分布式服务框架dubbo原理解析（转）
libaba有好几个分布式框架,主要有:进行远程调用(类似于RMI的这种远程调用)的(dubbo.hsf),jms消息服务(napoli.notify),KV数据库(tair)等.这个框架/工具/产品 ...
- CommonJS，AMD，CMD区别
学得比较晕,再次看commonjs,amd, cmd时好像还是没完全弄清楚,今天再整理一下: commonjs是用在服务器端的,同步的,如nodejs amd, cmd是用在浏览器端的,异步的,如re ...
- loadrunner关联取参--响应值unicode编码处理过
背景:做电商提交订单,需要获取订单号,然后进行支付.状态变更等操作 submitOrder() { lr_think_time(); /* 提交订单 */ /* specsId:规格ID,hyh_go ...