2.4.1　HTML布局规则

2.4.1　HTML布局规则

默认情况下，所有的插件都可以通过设置特定的HTML代码和相应的属性（或自定义属性）来实现。也就是说，在网页加载的时候，JavaScript代码会自动检测这些标记，并自动绑定相应的事件，而无需再添加额外的JavaScript代码。示例如下：

<div class="alert">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>警告!</strong> 你输入的项目不合法！
    </div>

上述代码是警告框组件的HTML布局，只要在button元素上添加data-dismiss="alert"属性，那么在单击该button的时候就会关闭该警告框。

同理，如下代码是下拉菜单的HTML布局，只要保证所单击的button按钮添加了data-toggle="dropdown"属性，在单击按钮的时候，默认隐藏的下拉菜单就会显示出来。

<div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" 
        data-toggle="dropdown">
            我的书籍 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">JavaScript编程精解</a></li>
            <li><a href="#">JavaScript设计模式</a></li>
            <li><a href="#">JavaScript启示录</a></li>
            <li class="divider"></li>
            <li><a href="#">深入理解Bootstrap3</a></li>
        </ul>
    </div>

再看一下更复杂的场景。如下代码是选项卡的HTML代码，并且在第三个选项卡（Dropdown）里加入了下拉菜单组件，也就是说单击第三个选项卡（Dropdown）的时候，下拉菜单会弹出来让用户再次选择一个菜单。但无论选择哪个li元素，插件都会根据配置的内容（如，data-toggle="tab" href="#home"），显示href所对应的id标签元素（即，单击首页，就会显示id="home"的div）。

<ul class="nav nav-tabs" id="myTab">
        <li class="active"><a data-toggle="tab" href="#home">首页</a></li>
        <li class=""><a data-toggle="tab" href="#profile">个人资料</a></li>
        <li class="dropdown">
            <!-- 单击"我的书籍"时,弹出下拉菜单 -->
            <a data-toggle="dropdown" href="#" class="dropdown-toggle">我的书籍 
                <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a data-toggle="tab" href="#dropdown1">JavaScript编程精解</a></li>
                <li><a data-toggle="tab" href="#dropdown2">JavaScript设计模式</a></li>
                <li><a data-toggle="tab" href="#dropdown3">JavaScript启示录</a></li>
                <li><a data-toggle="tab" href="#dropdown4">深入理解Bootstrap</a></li>
            </ul>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div id="home" class="tab-pane fade active in"><p>单击"首页"时显示该区域
            </p></div>
        <div id="profile" class="tab-pane fade"><p>单击"个人资料"时显示该区域</p></div>
        <div id="dropdown1" class="tab-pane fade"><p>单击"JavaScript编程精解"
            时显示该区域</p></div>
        <div id="dropdown2" class="tab-pane fade"><p>单击"JavaScript设计模式"
            时显示该区域</p></div>
        <div id="dropdown3" class="tab-pane fade"><p>单击"JavaScript启示录"时
            显示该区域</p></div>
        <div id="dropdown4" class="tab-pane fade"> <p>单击"深入理解Bootstrap3"
            时显示该区域</p></div>
    </div>

通过上面的3个示例，大家是不是感觉很棒？一行JavaScript代码都不用就能实现非常炫的效果，这就是JavaScript插件统一布局规则的优势。

注意

上述代码data-toggle="tab" href="#home"所实现的功能，使用data-toggle="tab" data-target="#home"也可以实现，JavaScript默认先检测data-target属性，如果没有，再检测href属性，如果还没有，则默认为父元素。另外，其他所有的JavaScript插件也都遵循同样的检测规则。

2.4.1 HTML布局规则