bootstrap地址选择（全国省市选择、定位）功能

最新推荐文章于 2020-12-19 16:48:10 发布

前端舒水水

最新推荐文章于 2020-12-19 16:48:10 发布

阅读量5.3k

点赞数 1

分类专栏： bootstrap 文章标签： bootstrap bootstrap模态框地址选择 bootstrap模态框垂直居中

本文链接：https://blog.csdn.net/weixin_42457316/article/details/81329957

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简介：基于bootstrap地址选择的功能，加入了简单的封装。

代码地址：https://github.com/shulongfei/demo-manage.git

在线访问：https://shulongfei.github.io/demo-manage/#bootstrap/addrSelect

效果图：

核心代码：

因该功能目前展示效果不涉及到后台效果，json数据由前台录入（整个项目功能集中在chinaData.js，包括html。）

该功能是后期加入项目，考虑到可移植性，所以集成为一个文件（属于我的早起的一个项目，但代码可读性还算比较高）。

1、控制模态框剧中，数据显示，市级弹出效果函数代码

function selectEach(set,number){
    var html="";
    var len=chinaData.provinces[number].citys.length;
    for(var i=0;i<len;i++){
    var obj=chinaData.provinces[number].citys[i].citysName;
         html+='<li><a href="javascript:void(0)">'+obj+'</a></li>';
        }   
    $("."+set+" ul").html(html);
}

/*模态框太框居中，禁止点击*/
function  modalMiddle(){
    var myModal= $('#myModal');
    function centerModals() {
        myModal.each(function(i) {
            var $clone = $(this).clone().css('display','block').appendTo('body');
            var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
            top = top > 0 ? top : 0;
            $clone.remove();
            $(this).find('.modal-content').css("margin-top", top);
        });
    };
    myModal.on('show.bs.modal', centerModals);
    //禁用空白处点击关闭
    myModal.modal({
        backdrop: 'static',
        keyboard: false,//禁止键盘
        show:false
    });
    //页面大小变化是仍然保证模态框水平垂直居中
    $(window).on('resize', centerModals);
}

/*下拉动画*/
function animation(){
    $('.animate').on('click',function(e){
        e.preventDefault();
    });
    $('.animate').on('mouseover',function(e){
        $(this).next('.city-box').animate({height:'show'},350);
    });
    $('.put').on('mouseleave',function(e){
        e.preventDefault();
        $('.city-box').css('display','none'); 
    }); 
}

2、设置链接跳转区域，这里可以自行封装

// 增加可用的城市, 修改位置2（可根据实际情况就进行封装，这里目前是简单版本。下面的数字和编码是对应的，请仔细查看）
$(".zhixiashi li:nth-child(3) a").addClass('font-bg').attr('href',path +'/index?city=sh');//上海 表示排列在第三个的直辖市
$(".guangdong li:nth-child(3) a").addClass('font-bg').attr('href',path +'/index?city=fs');//佛山
$(".guangdong li:nth-child(21) a").addClass('font-bg').attr('href',path +'/index?city=zq');//肇庆

3、把要加载的json串考进去，我这里市网上找的一个，里面基本上所有省市的都有，个别省市被我删除，也可以根据实际情况从后台获取。

总结：很久以前写的一个小功能，做成一个小demo。很久了，有的东西我自己都不记得了有兴趣的小伙伴可以看一下。

转载请注名出处，谢谢！！！