關於jquery和bootstrap的一些用法（一）

一.准備

1.jquery

2.bootstrap

二.代碼

1.HTML代碼

<div id="main"〉
    <a href="#myModal" role="button" class="btn btn-info" data-toggle="modal">添加工具</a><!--點擊添加工具按鈕，彈出下面模態窗口-->

 <button class="btn btn-info" type="button" id="del">選擇</button><!--點擊該選擇按鈕，按鈕能變顏色-->

    <form action="" method="post" id="listForm">
        <table class="table">
            <thead>
            <tr>
                <td><input type="hidden" name="id1" id="id1" value="此處輸出id1"/></td>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input class="tool_id" type="checkbox" id="id2" name="id2" value="此處輸出id2">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</div>
<!--模態窗口，彈出一個添加窗口-->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">添加工具</h3>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" action="<?php echo site_url("tool/insert");?>" method="post" id="detailForm">
            <div class="control-group">
                <label class="control-label" for="link_name">工具分類：</label>
                <div class="controls">
                    <select name="type_id">
                            <option name="" value="" ></option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="link_url">工具名稱：</label>
                <div class="controls">
                    <input type="text" name="name" id="name" value="" size="80" placeholder="工具名稱"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="userfile">工具地址：</label>
                <div class="controls">
                    <input type="text" name="url" id="url" value="" size="80" placeholder="工具地址"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="userfile">工具用戶名：</label>
                <div class="controls">
                    <input type="text" name="user_name" id="user_name" value="" size="80" placeholder="工具用戶名"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="userfile">工具密碼：</label>
                <div class="controls">
                    <input type="text" name="user_password" id="user_password" value="" size="80" placeholder="工具密碼"/>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <button class="btn btn-info" type="submit" name="submit" id="submit">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>

2.jquery代碼

<script type="text/javascript">
    <!--
    $(document).ready(function () {/*操作*/
        $('.id2').hide();//復選框隱藏
        var time = 0;
        $('#del').click(function () {//綁定選擇/刪除按鈕
            if(time == 0){
                $(this).removeClass("btn btn-info");//通過移除id=del的class來隱藏按鈕的顏色
                $(this).addClass("btn btn-warning");//通過添加id=del的class來實現改變按鈕顏色
                $(this).text("刪除");//改變按鈕上的字
                $(".id2").show();//復選框顯示
                time++;
            }else{
                var ids = '';//聲明ids變量
                $('input[name="id2"]:checked').each(function() {
                    ids += ',' + $(this).val() ;//得到name為id2的所有選中的id
                });
                $.get('后台處理地址', {ids: ids}, function(data) {//將ids送到后台處理代碼中，並得到返回數據data
                    data = eval("(" + data + ")");//將通過json返回的數據data進行解析
                    if(data == 1){
                        alert('刪除成功！');
                        window.location.reload();//刷新頁面
                    }
                });
            }
        });
    });
    //-->
</script>