基于bootstrap地址选择功能

简介：这是一个基于bootstrap城市选择的功能，加入了简单的封装。

代码地址：

https: https://github.com/shulongfei/bootStrapDemo.git

ssh: [email protected]:shulongfei/bootStrapDemo.git

效果（这个上面图片没有实际效果美观）：

核心代码：

因该功能目前展示效果不涉及到后台效果，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');//肇庆
$(".hubei li:nth-child(12) a").addClass('font-bg').attr('href',path +'/index?city=wh');//武汉
$(".hubei li:nth-child(18) a").addClass('font-bg').attr('href',path +'/index?city=xy');//襄阳
$(".sichuan li:nth-child(8) a").addClass('font-bg').attr('href',path +'/index?city=guangyuan');//广元
$(".sichuan li:nth-child(15) a").addClass('font-bg').attr('href',path +'/index?city=neijiang');//内江
$(".sichuan li:nth-child(21) a").addClass('font-bg').attr('href',path +'/index?city=ziyang');//资阳
$(".sichuan li:nth-child(12) a").addClass('font-bg').attr('href',path +'/index?city=ms');//眉山
$(".sichuan li:nth-child(18) a").addClass('font-bg').attr('href',path +'/index?city=yaan');//雅安
$(".anwei li:nth-child(1) a").addClass('font-bg').attr('href',path +'/index?city=yaan');//表示安徽第一个市

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

总结：个人觉得功能很实用，目前很多项目地址选择无论市门户网站，还是后台管理系统都可能用到，外加bootstrap的一些小的封装后续我都会上传到代码仓库中，当初找了很久，没找到一个自己满意的，就自己写了一个，虽然感觉还是不完美，但懒得去动jq的版本了，react实现相对来说简单很多，代码也更加优美很多，有兴趣的小伙伴可以自己研究一下，入门前端时候写的，很久了，有的东西我自己都不记得了。

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

基于bootstrap地址选择功能

猜你喜欢