两种方法调用Bootstrap3的Javascript组件：data属性定义和书写JS代码

 两种方法调用Bootstrap3的Javascript组件：data属性定义和书写JS代码

---

 本节演示

提问

在这节中，介绍两个基础调用JS组件的方法，所有的javascript都几乎可以支持如下两种方法的调用：

• data-*属性定义： 使用类似data-toggle = ""的定义方法来调用
  
• 书写JS代码： 开发人员自己书写代码调用　　

提示：请确认在开发Bootstrap3的Javascript组件之前，引用了依赖的jQuery类库，很多初学者都会忘记

相关代码如下，首先定义两个按钮：

 
 
<button class="btn btn-primary btn-lg">Bootstrap3按钮 - data属性方法</button>	  	
<button id="byjs" class="btn btn-info btn-lg">Bootstrap3按钮 - JS书写方法</button>

分别使用两种方法来实现同一个功能，即，切换按钮点击激活状态：

使用data属性定义

代码如下，添加一个data-toggle属性即可：

 
 
<button class="btn btn-primary btn-lg" data-toggle="button">Bootstrap3按钮 - data属性方法</button>

使用Javascript来定义

如要开发人员自己处理相关的javascript逻辑，如下：

 
 
$('#byjs').click(function(){
  $(this).button('toggle');//此处调用按钮的切换效果
});

大家可以看到使用data属性更简单，并且容易阅读

提示：　 除非必须使用Javascript代码来处理， 推荐大家使用data-*属性来使用Javascript组件

两个按钮点击未激活效果如下：

两个按钮的点击激活效果如下：

以下解释原理

为元素绑定监听函数的方式：

  1. <!--不足：把内容和行为混杂在一起-->

      <button οnclick="alert('hello1');">弹出HELLO1</button>

 2.  <!--不足：内容和行为工作不能由两个开发人员来实现-->

      <button id="bt2">弹出HELLO2</button>

js代码如下：

	$('#bt2').click(function(){
    		alert('hello2');
  	})

 

  <!--解决上述两个问题的方案-->

  <button data-trigger="alert-hello">弹出HELLO3</button>

  <button data-trigger="alert-hello">弹出HELLO3</button>

  <button data-trigger="alert-world">弹出HELLO3</button>

  <button data-trigger="alert-world">弹出HELLO3</button>

js代码如下：

  $('[data-trigger="alert-hello"]').click(function(){
    alert('hello3');
  })
  $('[data-trigger="alert-world"]').click(function(){
    alert('world3');
  })