zoukankan      html  css  js  c++  java
  • bootstrap仿地址管理

    精要;

    <!--列表-->

                            
                                <div class="list-group-item">

                                    <p class="list-group-item-text">

                                        <!--信息-->
                                        <div class="row">
                                            <!--第一列-->
                                            <div class="col-md-1">
                                                <span> 订单信息</span>
                                            </div>
                                            <!--第二列-->
                                            <div class="col-md-11 row">
                                                <!--    第一行-->
                                                <div class="col-md-4">

                                                    <div class="col-md-12">
                                                        订单编号:<span id="dingdnanum"> 1524142421242***5523</span>
                                                    </div>

                                                </div>

                                                <div class="col-md-4">
                                                    <div class="col-md-12">
                                                        支付编号:<span id="dingdnanum"> 1524142421242***5523</span>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="col-md-12">
                                                        创建时间:<span id="dingdnanum"> 2019-7-24 19:41:22</span>
                                                    </div>
                                                </div>

                                                <!--第二行-->

                                                <div class="col-md-4">
                                                    <div class="col-md-12">
                                                        付款时间:<span id="dingdnanum"> 2019-7-24 19:41:22</span>
                                                    </div>
                                                </div>

                                                <div class="col-md-8">
                                                    <div class="col-md-12">
                                                        成交时间:<span id="dingdnanum"> 2019-7-24 19:41:22</span>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                    </p>
                                </div>

    完整代码

    <!DOCTYPE>
    <html>

        <head>
            <meta charset="UTF-8">
            <title>地址</title>
            <script src="js/bootstrap-3.3.7/bootstrapglobal.js"></script>
            <script src="js/sanlian/sanlianglobal.js"></script>
            
        </head>
        <style>
            .hong {
                color: red;
            }
            
            .h5 {
                font-size: 12px;
            }
            
            #adddizhi {
                float: right;
                border: none;
                background-color: red;
            }
            
            .nametext {
                font-size: 22px;
            }
            
            .xuanfu {
                display: none;
            }
            
            .paneltitle {
                height: 30px;
            }
            
            .mianban {
                 400px;
                margin: 10px 15px;
            }
            
            .panelcont {
                height: 200px;
                 370px;
            }
            
            .panelboot {
                float: right;
                height: 20%;
                margin-right: 20px;
            }
            .panelback{
                height: 640px;
            }
        </style>

        <body>
            <div class="row"></div>

            <div class="control-label col-md-1"></div>
            
            <!--背景面板-->
            
            <div class="panel panel-info panelback col-md-8">
                    <div class="panel-heading">
                        <h3 class="panel-title paneltitle"><span class="hong">|</span>
                        
                        <span>&ensp;收获地址管理&ensp;</span>            
                        <span class="h5">你已经存在<span id="dizhinum" class="hong">1</span>个地址</span>
                        
                        <button id="adddizhi" type="button" onclick="tianjia()" class="btn btn-default btn-sm">+添加地址 </button>
                    </h3>
                    </div>
                    <div class="panel-body">

                        <!--地址详情-->
                        <div class="row">

                            <!--地址1-->
                            <div class="panel panel-default mianban control-label col-md-6">
                                <div class="panel-heading">

                                    <span class="nametext"><img src="img/u269.png" /> </span> &ensp;
                                    <span class="nametext" id="name">张三</span>
                                    <span class="nametext" style="float: right;">
                                    <button type="button" onclick="editmoren(this)" class="btn btn-link xuanfu moren" value="1">默认</button>
                                    </span>

                                </div>

                                <div class="panel-body panelcont">
                                    <div class="row" style="height: 60%;">

                                        <div class="control-label col-lg-1"> <img style="margin: 0 auto;" src="img/u259.png" /> </div>

                                        <div class="control-label col-lg-11">
                                            <p id="dizhicont">
                                                需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto;其两个样式需要配合使用才能实现div盒子的居中显示排版。 首先我们对body设置te
                                            </p>

                                        </div>

                                    </div>

                                    <div class="row" style="height: 20%;">
                                        <div class="control-label col-lg-1"> <img src="img/u257.png" /> </div>
                                        <div class="control-label col-lg-11"><span id="shoujihao" class="nametext">158*******</span> </div>

                                    </div>

                                    <span class="nametext panelboot">
                                    <button type="button" class="btn btn-link xuanfu">修改</button>
                                    <button type="button" class="btn btn-link xuanfu">删除</button>
                                    </span>
                                </div>

                            </div>
                            
                                
                            <!--地址2-->
                            
                            <div class="panel panel-default mianban control-label col-md-6">
                                <div class="panel-heading">

                                    <span class="nametext"><img src="img/u269.png" /> </span> &ensp;
                                    <span class="nametext" id="name">张三</span>
                                    <span class="nametext" style="float: right;">
                                    <button type="button" onclick="editmoren(this)" class="btn btn-link xuanfu" value="2">默认</button>
                                    </span>

                                </div>

                                <div class="panel-body panelcont">
                                    <div class="row" style="height: 60%;">

                                        <div class="control-label col-lg-1"> <img style="margin: 0 auto;" src="img/u259.png" /> </div>

                                        <div class="control-label col-lg-11">
                                            <p id="dizhicont">
                                                需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto;其两个样式需要配合使用才能实现div盒子的居中显示排版。 首先我们对body设置te
                                            </p>

                                        </div>

                                    </div>

                                    <div class="row" style="height: 20%;">
                                        <div class="control-label col-lg-1"> <img src="img/u257.png" /> </div>
                                        <div class="control-label col-lg-11"><span id="shoujihao" class="nametext">158*******</span> </div>

                                    </div>

                                    <span class="nametext panelboot">
                                    <button type="button" class="btn btn-link xuanfu">修改</button>
                                    <button type="button" class="btn btn-link xuanfu">删除</button>
                                    </span>
                                </div>

                            </div>

                            
                            

                        </div>



                        <!--地址详情-->
                        <div class="row">

                            <!--地址1-->
                            
                            
                            <div class="panel panel-default mianban control-label col-md-6">
                                <div class="panel-heading">

                                    <span class="nametext"><img src="img/u269.png" /> </span> &ensp;
                                    <span class="nametext" id="name">张三</span>
                                    <span class="nametext" style="float: right;">
                                    <button type="button" onclick="editmoren(this)" class="btn btn-link xuanfu" value="2">默认</button>
                                    </span>

                                </div>

                                <div class="panel-body panelcont">
                                    <div class="row" style="height: 60%;">

                                        <div class="control-label col-lg-1"> <img style="margin: 0 auto;" src="img/u259.png" /> </div>

                                        <div class="control-label col-lg-11">
                                            <p id="dizhicont">
                                                需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto;其两个样式需要配合使用才能实现div盒子的居中显示排版。 首先我们对body设置te
                                            </p>

                                        </div>

                                    </div>

                                    <div class="row" style="height: 20%;">
                                        <div class="control-label col-lg-1"> <img src="img/u257.png" /> </div>
                                        <div class="control-label col-lg-11"><span id="shoujihao" class="nametext">158*******</span> </div>

                                    </div>

                                    <span class="nametext panelboot">
                                    <button type="button" class="btn btn-link xuanfu">修改</button>
                                    <button type="button" class="btn btn-link xuanfu">删除</button>
                                    </span>
                                </div>

                            </div>

                            
                                
                            <!--地址2-->
                            
                            <div class="panel panel-default mianban control-label col-md-6">
                                <div class="panel-heading">

                                    <span class="nametext"><img src="img/u269.png" /> </span> &ensp;
                                    <span class="nametext" id="name">张三</span>
                                    <span class="nametext" style="float: right;">
                                    <button type="button" onclick="editmoren(this)" class="btn btn-link xuanfu" value="2">默认</button>
                                    </span>

                                </div>

                                <div class="panel-body panelcont">
                                    <div class="row" style="height: 60%;">

                                        <div class="control-label col-lg-1"> <img style="margin: 0 auto;" src="img/u259.png" /> </div>

                                        <div class="control-label col-lg-11">
                                            <p id="dizhicont">
                                                需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto;其两个样式需要配合使用才能实现div盒子的居中显示排版。 首先我们对body设置te
                                            </p>

                                        </div>

                                    </div>

                                    <div class="row" style="height: 20%;">
                                        <div class="control-label col-lg-1"> <img src="img/u257.png" /> </div>
                                        <div class="control-label col-lg-11"><span id="shoujihao" class="nametext">158*******</span> </div>

                                    </div>

                                    <span class="nametext panelboot">
                                    <button type="button" class="btn btn-link xuanfu">修改</button>
                                    <button type="button" class="btn btn-link xuanfu">删除</button>
                                    </span>
                                </div>

                            </div>

                            
                            

                        </div>


                        
                        

                    </div>
                </div>
            
            
            
            
            
                 
    <!-- 添加地址(Modal) -->
    <div class="modal fade" id="tianjia" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">添加地址</h4>
                </div>
                
                
                <!--面板内容区-->
                
                <!--行必须放置在 .container -->
                <div class="modal-body container">
                    <!--内容区-->
                    
                    
                    <!--收货人-->
                     <div class="row form-group">
                    <label class="control-label col-lg-1" for="name">收货人:</label>
                    <div class="col-lg-5 col-md-6">
                        <input class="form-control" name="name" id="name" type="text"placeholder="默认输入">
                    </div>
                </div>
                    
                    
                    <!--手机号-->
                    
                    <div class="row form-group">
                    <label class="control-label col-lg-1" for="name">手机号:</label>
                    <div class="col-lg-5 col-md-6">
                        <input class="form-control" name="name" id="name" type="text"placeholder="默认输入">
                    </div>
                </div>
                    
                    
                    
                    <!---->
                    
                   
                    <!--<div class="col-lg-5 col-md-5">
                        
                        <form class="form-inline">
                <div id="distpicker container">
                    
                    
                    <div class="form-group col-lg-12 col-md-12 container">
                        <div style="position: relative;">
                        <span class="col-lg-7 col-md-7 container">
                        <input id="city-picker3 container" class="form-control" readonly type="text" value="江苏省/常州市/溧阳市" data-toggle="city-picker">
                        </span>
                        <span class="col-lg-5 col-md-5">
                            <button class="btn btn-warning" id="reset" type="button">重置</button>
                        <button class="btn btn-danger" id="destroy" type="button">确定</button>
                        </span>
                        </div>
                        
                    </div>
                    
                </div>
            </form>
                        
                        
                        
                        
                        
                    </div>
                
                    -->
                    
                <!---->
                
                
                
                
                <!--地址-->
                
                
                
                   <div class=" form-group">
                    <div class="control-label col-lg-1">
                        
                         <label  for="name">地址:</label>
                    </div>
                    <div class="col-lg-5 col-md-5">
                        
                        
                        
                        <form class="form-inline">
                <div id="distpicker container">
                    <div class="form-group col-lg-12 col-md-12 container">
                        <div style="position: relative;">
                        <span class="col-lg-7 col-md-7 container">
                        <input id="city-picker3" class="form-control" readonly type="text" value="江苏省/常州市/溧阳市" data-toggle="city-picker">
                        </span>
                        <span class="col-lg-5 col-md-5">
                            <button class="btn btn-warning" id="reset" type="button">重置</button>
                        <button class="btn btn-danger" id="destroy" type="button">确定</button>
                        </span>
                        </div>
                        
                    </div>
                    
                </div>
            </form>
                        
                        
                        
                        
                        
                    </div>
                </div>
                             
                
                
                
                <!--内容区 end-->
                </div>
                             
               
                 
                
                
               
                
                <!--面板内容区 end-->
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" οnclick="update()">提交更改</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <!-- 模态框(Modal)end -->

            

            <script>
                //修改手机
    function tianjia() {
        
        //向模态框中传值
    //    $('#stuno').val(stuno);    
        $('#tianjia').modal('show');
    }
                
                
                
                //默认
                function editmoren(e) {
                    
                    
                    
                    if($(e).hasClass("moren"))
                    {
                        return;
                    }
                    
                    
    //                alert($(".moren").val());
                    $(".moren").addClass("xuanze");
                    
                    $(".xuanze").removeClass("moren");

                    $(e).addClass("moren");
                    
                    $(".xuanze").removeClass("xuanze");
                    
                    $(".xuanfu").hide();
                    var $find=$(e).parent().parent().parent().find('.xuanfu');
                    $find.show();
                    
                    
                    
                
                }

                $(function() {
                    $(".moren").show();

                    $(".mianban").hover(function() {
                        $(this).find(".xuanfu").show();
                        $(".moren").show();

                    }, function() {
                        $(this).find(".xuanfu").hide();
                        $(".moren").show();

                    });

                });
            </script>
        </body>

    </html>

  • 相关阅读:
    哥哥牟:诺拉的死亡是由于寻找食物的粪便!
    Eclipse建筑物SSH(struts-2.2.3 + spring-2.5.6 + hibernate-3.6.8)相框-随着源代码
    Centos6.5下一个Ceph存储集群结构
    linux input如何固定设备event handler
    sizeof运营商
    【小言的设计模式】类之间的关系
    2015第11周五
    2015第11周四~代发公司招聘信息
    2015第11周三
    2015第11周二
  • 原文地址:https://www.cnblogs.com/ruiyuan/p/11242231.html
Copyright © 2011-2022 走看看