-
第五步，激活手风琴交互行为。要完成交互行为，需要在标题链接中自定义两个属性，一个是data-toggle，并且取值为collapse；另一个是data-target，取值为各个面板内容区的标识符，比如说ID，在这个例子分别是#panel1、#panel2和#panel3： <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1">标题一</a></h4> </div> <div class="panel-collapse collapse in" id="panel1"> <div class="panel-body">折叠区内容...</div> </div> </div> 到此，实现了单个面板的“显示/隐藏”的切换。但离手风琴效果还略有差距。 注意：在这个案例中不加入data-target="#panel1"也可以，因为前面已经有了href="#panel1"，但如是button按钮作为触发器就必须使用data-target="#panel1"语句了。查看全部
-
第四步，控制面板内容区是否可视。在Bootstrap框架中，如果你想让内容区域不可视，只需要在 panel-collapse 样式上添加 collapse： <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1">标题一</a></h4> </div> <div class="panel-collapse collapse" id="panel1"> <div class="panel-body">折叠区内容...</div> </div> </div>查看全部
-
手风琴--声明式触发手风琴（二） 第三步，为了把标题和内容区捆绑在一起，可以通过锚链接的方法，把标题区域和面板区连在一起： <div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1">标题一</a></h4> </div> <div class="panel-collapse" id="panel1"> <div class="panel-body">折叠区内容...</div> </div> </div> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel2">标题二</a></h4> </div> <div class="panel-collapse" id="panel2"> <div class="panel-body">折叠区内容...</div> </div> </div> ...... </div>查看全部
-
手风琴--声明式触发手风琴（一） 触发手风琴可以通过自定义的 data-toggle 属性来触发。其中data-toggle值设置为 collapse，data-target="#折叠区标识符"。接下来我们来看一个简单的示例：（六步） 第一步，设计一个面板组合，里面有三个折叠区： <div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"></div> <div class="panel panel-accordion panel-default"></div> <div class="panel panel-accordion panel-default"></div> </div> 第二步：给面板添加内容，每个面板包括两个部分，第一个是面板标题 panel-heading，并且在这里面添加标题 panel-title。第二个部分是面板内容，也就是折叠区，使用 panel-collapse 样式。 <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title">标题一</h4> </div> <div class="panel-collapse"> <div class="panel-body">折叠区内容...</div> </div> </div>查看全部
-
简单点就是一个触发器和一个折叠区： <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button> <div id="demo" class="collapse in">折叠区</div>查看全部
-
手风琴最关键的部分，就是每个标题对应有一个内容，在Bootstrap框架中将这两个部分组合起来称为一个panel页板，如右边效果所示，他就有三个panel面板，将这三个面板组合在一起，就是一个面板组合 panel-group，也就是手风琴的结构。如： <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">标题一</a></h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body">标题一对应的内容</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">标题二</a></h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body">标题二对应的内容</div> </div> </div> </div>查看全部
-
按钮插件--JavaScript用法 除了上面介绍的属性声明使用方法之外，按钮插件还可以通过调用button函数，然后给button函数传入具体的参数，实现不同的效果。而其中有两个参数是固定不变的，即toggle和reset。其他的都可以随意定义： 1、切换按钮状态（得到焦点）： $("#mybutton").button("toggle") 2、重新恢复按钮： $("#mybutton").button("reset") 如下代码： $(function() { $("#mybutton").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('reset'); }); }); }); 3、任意参数： $("#mybutton").button("任意字符参数名") 上面代码作用：替换 data-任意字符参数名-text 的属性值为“按钮上显示的文本值”。如下代码： html: <button type="button" data-toggle="button" class="btn btn-primary" id="mybutton" data-complete-text="Loading finished" >确认</button> js代码： $(function() { $("#mybutton").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('complete'); }); }); });查看全部
-
按钮插件--按钮状态切换 使用 data-toggle 属性还可以激活按钮的行为状态，实现在激活和未激活之间进行状态切换。例如，下面代码可以激活按钮行为特性，单击时将按钮激活，再单击可以让按钮恢复到默认状态： <button type="button" data-toggle="button" class="btn btn-primary">确认</button> 注意，这里自定义属性是 data-toggle="button"，而不是 data-toggle="buttons"。查看全部
-
按钮插件--模拟复选按钮 使用按钮组来模拟复选按钮和模拟单选按钮是一样的，具有同等效果，也是通过在按钮组上自定义data-toggle="buttons"来实现。唯一不同的是，将input[type="radio"]换成input[type="checkbox"]，如下所示： <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="checkbox" name="options" id="options1">电影 </label> <label class="btn btn-primary"> <input type="checkbox" name="options" id="options2">音乐 </label> <label class="btn btn-primary"> <input type="checkbox" name="options" id="options3">游戏 </label> <label class="btn btn-primary"> <input type="checkbox" name="options" id="options4">摄影 </label> </div>查看全部
-
按钮插件--模拟单选择按钮 模拟单选择按钮是通过一组按钮来实现单选择操作。使用按钮组来模拟单选按钮组，能够让设计更具个性化，可以定制出更美观的单选按钮组。 在Bootstrap框架中按钮插件中，可以通过给按钮组自定义属性data-toggle="buttons"，如下所示： <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="options" id="options1">男 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="options2">女 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="options3">未知 </label> </div> 注：使用这种效果的时候，无需借助JavaScript代码来触发，因为默认Bootstrap就已经为用户初始化好了。查看全部
-
按钮插件--按钮加载状态 通过按钮可以设计状态提示，当单击按钮时，会显示loading状态信息。例如，点击“加载”按钮，会触发按钮的加载的状态。如下所示： <button class="btnbtn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button> 通过data-loading-text属性定义加载的文本信息，然后通过JavaScript给按钮绑定一个事件，并给按钮添加一个button("loading")方法来激活按钮的加载状态行为。如下所示： $(function(){ $("#loaddingBtn").click(function () { $(this).button("loading"); }); }); 注意，无法直接通过声明式触发此效果。查看全部
-
在此处我们要讨论的是Bootstrap框架中的“按钮插件”。 大家在平时制作Web页面时，或多或少碰到过下列这些情形： ☑ 点击按钮时，按钮文字变为“正在加载…”，一旦加载完之后又变回“获取数据”。简单点说就是控制按钮状态，比如禁用状态、正在加载状态、正常状态等； ☑ 按钮切换状态 ☑ 按钮模仿单选按钮 ☑ 按钮模仿复选按钮查看全部
-
警告框--JavaScript触发警告框 除了通过自定义data-dismiss="alert"属性来触发警告框关闭之外，还可以通过JavaScript方法。只需要在关闭按钮上绑定一个事件。如下所示： html代码: <div class="alert alert-warning" role="alert" id="myAlert"> <h4>谨防被骗</h4> <p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p> <button type="button" class="btn btn-danger" id="close">关闭</button> </div> 通过下面的JavaScript代码来触发： $(function(){ $("#close").on("click",function(){ $(this).alert("close"); }); });查看全部
-
<h3>使用a标签作为关闭按钮</h3> <div class="alert alert-warning" role="alert"> <h4>谨防被骗</h4> <p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p> <a href="#" class="btn btn-danger" data-dismiss="alert" >关闭</a> </div>查看全部
-
警告框--使用声明式触发警告框 如果通过自定义的HTML属性（声明式）来触发警告框，需要在关闭按钮上设置自定义属性data-dismiss="alert"，如下所示： <div class="alert alert-success" role="alert"> <button class="close" data-dismiss="alert" type="button" >×</button> <p>恭喜您操作成功！</p> </div> 点击X会关闭整个警告框。 其实关闭按钮，不一定非要用X号，也可以是普通的按钮元素或者链接元素，只需要保证关闭元素带有自定义属性data-dismiss="alert"即可，如下面示例所示： <div class="alert alert-warning" role="alert"> <h4>谨防被骗</h4> <p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p> <a href="#" class="btn btn-danger" data-dismiss="alert">关闭</a> </div> 当用户点击“关闭”按钮就可以关闭整个警告框。 前面两个示例，操作关闭按钮时都是先查找 data-target 属性，再查找 href 属性，如果关闭按钮都没有定义这两个属性，就会操作其父元素。也就是说，关闭按钮不在 div.alert 容器内时，只要给关闭元素定义了data-target属性（如果是链接元素还可以通过href属性）,而且属性值与div.alert容器的id一致，关闭元素放在容器外也可以关闭警告框。来看一个简单的示例： <div class="alert alert-warning" role="alert" id="myAlert"> <h4>谨防被骗</h4> <p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p> </div> <button type="button" data-target="#myAlert" class="btn btn-danger" data-dismiss="alert">关闭</button> 这种方式点击“关闭”按钮也可以关闭警告框，只不过“关闭”按钮自身没办法关闭查看全部
举报
0/150
提交
取消