码迷,mamicode.com
首页 > Web开发 > 详细

使用【 ajax 】【 bootstrap 】显示出小窗口 详情内容 一些代码意思可以参考下一个文章

时间:2016-11-11 22:51:27      阅读:342      评论:0      收藏:0      [点我收藏+]

标签:header   dtd   rom   doctype   type   dialog   oda   开始   xhtml   

使用【 bootstrap 】显示出小窗口  详情内容  显示页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--引用jpuery——js代码包--> <script src="../jquery-1.11.2.min.js"></script> <!--引用bootstrap——js代码包--> <script src="../bootstrap.min.js"></script> <title>无标题文档</title> <!--引用bootstrap——css代码包--> <link href="../bootstrap.min.css" rel="stylesheet" type="text/css" /> </head> <body> <input type="button" value="显示" id="btn" /> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr id="sj"> <td>代码</td> <td>名称</td> <td>操作</td> </tr> <tbody id="tb"></tbody> </table> <div class="modal fade" id="myModal" tabimdex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-content"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">详细信息</h4> </div> <div class="modal-body" id="nr">在这里添加一些文本</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">确定</button> </div> </div><!-- /.modal-content--> </div><!--/.modal--> </div> </body> <script type="text/javascript"> $("#btn").click(function(){ $.ajax({ url:"caozuo_chuli.php", dataType:"TEXT", success: function(data){ var hang = data.split("|"); var str = ""; for(var i=0;i<hang.length;i++){ var lie = hang[i].split("^"); str = str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td><span class=‘sc‘ bs‘"+lie[0]+"‘>删除</span><button class=‘btn btn-primary btn-lg xq‘ data-toggle=‘modal‘ data-target=‘#myModal‘ bs=‘"+lie[0]+"‘>开始演示模态框</button></td></tr>"; } $("#tb").html(str); //加事件 $(".sc").click(function(){ alert("aa"); }); //查看详情 $(".xq").click(function(){ var code = $(this).attr("bs"); $.ajax({ url:"xiangqing_chuli.php", data:{code:code}, type:"POST", success: function(data){ var lie1 = data.split("^"); var str = "<div>民族代号:"+lie1[0]+"</div><div>名族名称:"+lie1[1]+"</div>"; $("#nr").html(str); } }); }); } }); }); </script> </html>

 

 

使用ajax显示 小窗口 详情 页面    和bootstrap详情页面用的是同一个处理页面,下面可直接复制技术分享

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../jquery-1.11.2.min.js"></script>
<script src="../tanchuang.js"></script>
<title>无标题文档</title>
<link href="../tanchuang.css" rel="stylesheet" type="text/css" />
</head>

<body>
<input type="button" value="显示" id="btn" />
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="sj">
<td>代号</td>
<td>名称</td>
<td>操作</td>

</tr>
<tbody id="td"></tbody>


</table>

</body>


<script type="text/javascript">
$("#btn").click(function(){
    
    $.ajax({
        
        url:"caozuo_chuli.php",
        dataType:"TEXT",
        success:function(data){
            
            var hang = data.split("|");
            var str = "";
            
            for(var i=0;i<hang.length;i++){
                
                var lie = hang[i].split("^");
                str = str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td><span class=‘sc‘ bs=‘"+lie[0]+"‘>删除</span></td>&nbsp;&nbsp;<td><span class=‘xq‘ bs=‘"+lie[0]+"‘>查看详情</span></td></tr>";
                
                }
                $("#td").html(str);
                
                //加事件
                $(".sc").click(function(){
                    
                    alert("aa");
                    });
                //查看详情
                $(".xq").click(function(){
                    var code = $(this).attr("bs");
                    $.ajax({
                        url:"xiangqing_chuli.php",
                        data:{code:code},
                        type:"POST",
                        success: function(data){
                            var lie1 = data.split("^");
                            var str = "<div>代号:"+lie1[0]+"</div><div>代号:"+lie1[1]+"</div>";
                            var btn = "<input type=‘button‘ value=‘确定‘ class=‘qd‘ />";
                            
                            var tc = new Window({
                                
                                tiyle:"详细信息",
                                content:str,
                                buttons:btn
                                });
                                $(".qd").click(function(){
                                    
                                    $(".zhuti").remove();
                                    $("#zz").remove();
                                    
                                    
                                    });
                            
                            }
                        });
                    
                    
                    })
            
            }
        
        
        });
    
    
    
    });




</script>


</html>

 

 

 

 

 

 

 

操作处理页面

 

<?php
include("../DBDA.class.php");
$db = new DBDA();

$sql = "select * from nation";

echo $db->StrQuery($sql);


?>

 

 

 

详情处理页面

 

<?php
include("../DBDA.class.php");
$db = new DBDA();

$code = $_POST["code"];

$sql = "select * from nation where code=‘{$code}‘";

echo $db->StrQuery($sql);

?>

 

使用【 ajax 】【 bootstrap 】显示出小窗口 详情内容 一些代码意思可以参考下一个文章

标签:header   dtd   rom   doctype   type   dialog   oda   开始   xhtml   

原文地址:http://www.cnblogs.com/zc290987034/p/6055629.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!