zepto.js手机端城市下拉列表

来源:https://www.sucaihuo.com/js/1437.html 2017-03-08 22:39浏览(2026) 收藏

demo中演示了全国各地弹出层,并用A-Z字母排序,点击右边的悬浮字母,可定位到指定位置。jQuery常用的城市列表弹出层。
zepto.js手机端城市下拉列表
分类:手机特效 > 导航菜单 难易:中级
查看演示 下载资源 下载积分: 20 积分

城市列表

<div class="city">
    <div class="city-list"><span class="city-letter" id="A1">A</span>
        <p data-id="210300">鞍山市</p>
        <p data-id="659002">阿拉尔市</p>
        <p data-id="652900">阿克苏地区</p>
        <p data-id="820100">澳门特别行政区</p>
        <p data-id="654300">阿勒泰地区</p>
    </div>
    <div class="city-list"><span class="city-letter" id="B1">B</span>
        <p data-id="220800">白城市</p>
        <p data-id="150200">包头市</p>
        <p data-id="150800">巴彦淖尔市</p>
        <p data-id="130600">保定市</p>
        <p data-id="652700">博尔塔拉蒙古自治州</p>
        <p data-id="110100">北京市</p>
    </div>
</div>

A-Z字母

<div class="letter">
    <ul>
        <li><a href="javascript:;">A</a></li>
        <li><a href="javascript:;">B</a></li>
        <li><a href="javascript:;">C</a></li>
        <li><a href="javascript:;">Y</a></li>
        <li><a href="javascript:;">Z</a></li>
    </ul>
</div>
//加载城市事件
$('body').on('click', '#zone_ids,#gr_zone_ids', function () {
	var zid = $(this).attr('id');
	$('.container').show();

});
//选择城市 start
$('body').on('click', '.city-list p', function () {
	var type = $('.container').data('type');
	$('#zone_ids').html($(this).html()).attr('data-id', $(this).attr('data-id'));
	$('#gr_zone_ids').html($(this).html()).attr('data-id', $(this).attr('data-id'));
	$('.container').hide();
});
$('body').on('click', '.letter a', function () {
	var s = $(this).html();
	$(window).scrollTop($('#' + s + '1').offset().top);
});
标签: 下拉城市
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2