jQuery插件实现适用于移动端的地址选择器

$(".picker-box").append(div);
};

p.navEvent = function () {
var that = this;
var navBar = $(".navbar");
var width = navBar.find("a").width();
var height = navBar.find("a").height();
navBar.on("touchstart", function (e) {
$(this).addClass("active");
that.createLetterPrompt($(e.target).html());
});

navBar.on("touchmove", function (e) {
e.preventDefault();
var touch = e.originalEvent.touches[0];
var pos = {"x": touch.pageX, "y": touch.pageY};
var x = pos.x, y = pos.y;
$(this).find("a").each(function (i, item) {
var offset = $(item).offset();
var left = offset.left, top = offset.top;
if (x > left && x < (left + width) && y > top && y < (top + height)) {
location.href = item.href;
that.changeLetter($(item).html());
}
});
});

navBar.on("touchend", function () {
$(this).removeClass("active");
$(".prompt").hide();
})
};

p.createLetterPrompt = function (letter) {
var prompt = $(".prompt");
if (prompt[0]) {
prompt.show();
} else {
var span = "<span class='prompt'>" + letter + "</span>";
$(".picker-box").append(span);
}
};

p.changeLetter = function (letter) {
var prompt = $(".prompt");
prompt.html(letter);
};

$.fn.CityPicker = function (options) {
return new CityPicker(this, options);
}
}(window.jQuery, window, document));

代码很简单。这边需要提到的一段代码是：

navBar.on("touchmove", function (e) {
 e.preventDefault();
 var touch = e.originalEvent.touches[0];
 var pos = {"x": touch.pageX, "y": touch.pageY};
 var x = pos.x, y = pos.y;
 $(this).find("a").each(function (i, item) {
 var offset = $(item).offset();
 var left = offset.left, top = offset.top;
 if (x > left && x < (left + width) && y > top && y < (top + height)) {
  location.href = item.href;
  that.changeLetter($(item).html());
 }
 });
});

这段是通过字母导航省份的代码。当手指在字母上滑动时，touchmove事件并不能确定当前的字母是哪个，因为e.target永远是touchstart时的那个字母。所以我不得不通过坐标来判断手指位于哪个字母上，这样就导致一个问题，每次滑动都必须遍历26个字母的坐标，这样效率是非常低的，但是目前我也没有好的办法。

该插件的使用方法非常简单：

// html代码
<input type="text" class="city" />

// js代码
$(".city").CityPicker();

demo： http://demo.jb51.net/js/2016/cityPicker-master/test.html。最好用手机浏览器或者chrome模拟器打开。