CityPicker

功能描述

  1. 底部弹出地址选择器三级联动
  2. 基于picker.min.js

依赖的模块

  1. lib/CityPicker.css
  2. lib/picker.min.js
  3. lib/city.js

快速使用

  1. 引用部分
  2. <link rel="stylesheet" type="text/css" href="lib/CityPicker.css">
  3. <script src="lib/picker.min.js"></script>
  4. <script src="lib/city.js"></script>
  6. HTML部分
  7. <ul class="formarea">
  8.     <li>
  9.         <label class="lit">所在地区</label>
  10.         <a href="#" class="btn btn-info btn-lg active textbox" role="button" id="sel_city">请选择</a>
  11.     </li>
  12. </ul>
  13. <div style="height:1.2rem;"></div>
  15. ####下面是默认显示内容
  16. <div class="picker">
  17.     <div class="picker-mask mask-hook"></div>
  18.     <div class="picker-panel panel-hook">
  19.         <div class="picker-choose choose-hook">
  20.             <span class="cancel cancel-hook">取消</span>
  21.             <span class="confirm confirm-hook">确定</span>
  22.             <h1 class="picker-title">地址选择</h1>
  23.         </div>
  24.         <div class="picker-content">
  25.             <div class="mask-top border-1px"></div>
  26.             <div class="mask-bottom border-1px"></div>
  27.             <div class="wheel-wrapper wheel-wrapper-hook">
  28.                 <div class="wheel wheel-hook">
  29.                     <ul class="wheel-scroll wheel-scroll-hook">
  30.                         <li class="wheel-item" data-val="0">北京</li>
  31.                         <li class="wheel-item" data-val="1">广东</li>
  32.                         <li class="wheel-item" data-val="2">上海</li>
  33.                         <li class="wheel-item" data-val="3">天津</li>
  34.                         <li class="wheel-item" data-val="4">重庆</li>
  35.                         <li class="wheel-item" data-val="5">辽宁</li>
  36.                         <li class="wheel-item" data-val="6">江苏</li>
  37.                         <li class="wheel-item" data-val="7">湖北</li>
  38.                         <li class="wheel-item" data-val="8">四川</li>
  39.                         <li class="wheel-item" data-val="9">陕西</li>
  40.                         <li class="wheel-item" data-val="10">河北</li>
  41.                         <li class="wheel-item" data-val="11">山西</li>
  42.                         <li class="wheel-item" data-val="12">河南</li>
  43.                         <li class="wheel-item" data-val="13">吉林</li>
  44.                         <li class="wheel-item" data-val="14">黑龙江</li>
  45.                         <li class="wheel-item" data-val="15">内蒙古</li>
  46.                         <li class="wheel-item" data-val="16">山东</li>
  47.                         <li class="wheel-item" data-val="17">安徽</li>
  48.                         <li class="wheel-item" data-val="18">浙江</li>
  49.                         <li class="wheel-item" data-val="19">福建</li>
  50.                         <li class="wheel-item" data-val="20">湖南</li>
  51.                         <li class="wheel-item" data-val="21">广西</li>
  52.                         <li class="wheel-item" data-val="22">江西</li>
  53.                         <li class="wheel-item" data-val="23">贵州</li>
  54.                         <li class="wheel-item" data-val="24">云南</li>
  55.                         <li class="wheel-item" data-val="25">西藏</li>
  56.                         <li class="wheel-item" data-val="26">海南</li>
  57.                         <li class="wheel-item" data-val="27">甘肃</li>
  58.                         <li class="wheel-item" data-val="28">宁夏</li>
  59.                         <li class="wheel-item" data-val="29">青海</li>
  60.                         <li class="wheel-item" data-val="30">新疆</li>
  61.                         <li class="wheel-item" data-val="31">香港</li>
  62.                         <li class="wheel-item" data-val="32">澳门</li>
  63.                         <li class="wheel-item" data-val="33">台湾</li>
  64.                         <li class="wheel-item" data-val="34">海外</li>
  65.                         <li class="wheel-item" data-val="35">其他</li>
  66.                     </ul>
  67.                 </div>
  68.                 <div class="wheel wheel-hook">
  69.                     <ul class="wheel-scroll wheel-scroll-hook">
  70.                         <li class="wheel-item" data-val="0">东城区</li>
  71.                         <li class="wheel-item" data-val="1">西城区</li>
  72.                         <li class="wheel-item" data-val="2">崇文区</li>
  73.                         <li class="wheel-item" data-val="3">宣武区</li>
  74.                         <li class="wheel-item" data-val="4">朝阳区</li>
  75.                         <li class="wheel-item" data-val="5">海淀区</li>
  76.                         <li class="wheel-item" data-val="6">丰台区</li>
  77.                         <li class="wheel-item" data-val="7">石景山区</li>
  78.                         <li class="wheel-item" data-val="8">房山区</li>
  79.                         <li class="wheel-item" data-val="9">通州区</li>
  80.                         <li class="wheel-item" data-val="10">顺义区</li>
  81.                         <li class="wheel-item" data-val="11">昌平区</li>
  82.                         <li class="wheel-item" data-val="12">大兴区</li>
  83.                         <li class="wheel-item" data-val="13">怀柔区</li>
  84.                         <li class="wheel-item" data-val="14">平谷区</li>
  85.                         <li class="wheel-item" data-val="15">门头沟区</li>
  86.                         <li class="wheel-item" data-val="16">密云县</li>
  87.                         <li class="wheel-item" data-val="17">延庆县</li>
  88.                         <li class="wheel-item" data-val="18">其他</li>
  89.                     </ul>
  90.                 </div>
  91.                 <div class="wheel wheel-hook">
  92.                     <ul class="wheel-scroll wheel-scroll-hook">
  93.                         <li class="wheel-item" data-val="0"></li>
  94.                     </ul>
  95.                 </div>
  97.             </div>
  98.         </div>
  99.         <div class="picker-footer footer-hook"></div>
  100.     </div>
  101. </div>