|
@@ -1,240 +1,287 @@
|
|
|
var areaSelector = {
|
|
|
- el: '#area-selector-content', // 容器选择器
|
|
|
- $el: '',
|
|
|
- $view: '',
|
|
|
- $origin: '',
|
|
|
- provinceListMap: {
|
|
|
- '#': ['全国'],
|
|
|
- A: ['安徽', '澳门'],
|
|
|
- B: ['北京'],
|
|
|
- C: ['重庆'],
|
|
|
- F: ['福建'],
|
|
|
- G: ['广东', '广西', '贵州', '甘肃'],
|
|
|
- H: ['河北', '湖北', '黑龙江', '海南', '河南', '湖南'],
|
|
|
- J: ['吉林', '江苏', '江西'],
|
|
|
- L: ['辽宁'],
|
|
|
- N: ['内蒙古', '宁夏'],
|
|
|
- Q: ['青海'],
|
|
|
- S: ['山西', '陕西', '上海', '山东', '四川'],
|
|
|
- T: ['天津', '台湾'],
|
|
|
- X: ['西藏', '新疆', '香港'],
|
|
|
- Y: ['云南'],
|
|
|
- Z: ['浙江']
|
|
|
- },
|
|
|
- provinceNameList: [],
|
|
|
- singleList: ['北京', '上海', '重庆', '天津', '香港', '澳门', '台湾'],
|
|
|
- caches: {
|
|
|
- originDOM: null, // 原始DOM字符串。可能用于恢复最原始状态
|
|
|
- },
|
|
|
- init: function () {
|
|
|
- this.initVars()
|
|
|
- this.cacheOriginDOM()
|
|
|
- this.addLetterToList()
|
|
|
- this.initEvents()
|
|
|
- },
|
|
|
- initVars: function () {
|
|
|
- this.$el = $(this.el)
|
|
|
- this.$view = this.$el.find('.selected-list.view')
|
|
|
- this.$origin = this.$el.find('.selected-list.origin')
|
|
|
- this.initProvinceNameList()
|
|
|
- },
|
|
|
- initEvents: function () {
|
|
|
- var _this = this
|
|
|
- var container = this.$view
|
|
|
- // 省份按钮
|
|
|
- container.on('click', '.j-button-item.can-expand', function (e) {
|
|
|
- var $this = $(this)
|
|
|
- container.find('.j-button-item.can-expand').removeClass('expand')
|
|
|
- $this.addClass('expand')
|
|
|
+ el: '#area-selector-content', // 容器选择器
|
|
|
+ $el: '',
|
|
|
+ $view: '',
|
|
|
+ $origin: '',
|
|
|
+ provinceListMap: {
|
|
|
+ '#': ['全国'],
|
|
|
+ A: ['安徽', '澳门'],
|
|
|
+ B: ['北京'],
|
|
|
+ C: ['重庆'],
|
|
|
+ F: ['福建'],
|
|
|
+ G: ['广东', '广西', '贵州', '甘肃'],
|
|
|
+ H: ['河北', '湖北', '黑龙江', '海南', '河南', '湖南'],
|
|
|
+ J: ['吉林', '江苏', '江西'],
|
|
|
+ L: ['辽宁'],
|
|
|
+ N: ['内蒙古', '宁夏'],
|
|
|
+ Q: ['青海'],
|
|
|
+ S: ['山西', '陕西', '上海', '山东', '四川'],
|
|
|
+ T: ['天津', '台湾'],
|
|
|
+ X: ['西藏', '新疆', '香港'],
|
|
|
+ Y: ['云南'],
|
|
|
+ Z: ['浙江']
|
|
|
+ },
|
|
|
+ provinceNameList: [],
|
|
|
+ singleList: ['北京', '上海', '重庆', '天津', '香港', '澳门', '台湾'],
|
|
|
+ caches: {
|
|
|
+ originDOM: null, // 原始DOM字符串。可能用于恢复最原始状态
|
|
|
+ },
|
|
|
+ init: function () {
|
|
|
+ this.initVars()
|
|
|
+ this.cacheOriginDOM()
|
|
|
+ this.addLetterToList()
|
|
|
+ // this.initEvents()
|
|
|
+ },
|
|
|
+ initVars: function () {
|
|
|
+ this.$el = $(this.el)
|
|
|
+ this.$view = this.$el.find('.selected-list.view')
|
|
|
+ this.$origin = this.$el.find('.selected-list.origin')
|
|
|
+ this.initProvinceNameList()
|
|
|
+ },
|
|
|
+ initEvents: function () {
|
|
|
+ var _this = this
|
|
|
+ var container = this.$view
|
|
|
+ // 省份按钮展示逻辑
|
|
|
+ container.on('click', '.j-button-item.can-expand', function (e) {
|
|
|
+ var $this = $(this)
|
|
|
+ container.find('.j-button-item.can-expand').removeClass('expand')
|
|
|
+ $this.addClass('expand')
|
|
|
|
|
|
- // 删除其他cityList
|
|
|
- container.find('.city-list').remove()
|
|
|
+ // 删除其他cityList
|
|
|
+ container.find('.city-list').remove()
|
|
|
|
|
|
- // 插入当前cityList
|
|
|
- var pName = $this.attr('data-p-name')
|
|
|
- // 找到cityList
|
|
|
- var cityListDOM = _this.findCityListDOMFromOrigin(pName).clone().attr('data-p-children-name', pName).show()
|
|
|
- cityListDOM.find('.city-list-footer').show()
|
|
|
- // 计算cityList插入哪一行后
|
|
|
- var target = _this.calcTargetDOM(container, $this)
|
|
|
- if (target) {
|
|
|
- $(target).after(cityListDOM)
|
|
|
- } else {
|
|
|
- container.append(cityListDOM)
|
|
|
- }
|
|
|
- })
|
|
|
- container.on('click', '.action-button', function () {
|
|
|
- container.find('.j-button-item.can-expand').removeClass('expand')
|
|
|
- container.find('.city-list').remove()
|
|
|
- })
|
|
|
- },
|
|
|
- cacheOriginDOM: function () {
|
|
|
- this.caches.originDOM = this.$el.html()
|
|
|
- },
|
|
|
- // 整理出按字母排序的省份选择的html结构
|
|
|
- addLetterToList: function () {
|
|
|
- var indexBarList = this.$view.find('.index-bar')
|
|
|
- if (indexBarList.length > 0) {
|
|
|
- return
|
|
|
- }
|
|
|
- // 对目标元素位置进行调整
|
|
|
- var map = this.provinceListMap
|
|
|
- var domArr = []
|
|
|
- for (var key in map) {
|
|
|
- if ($.isArray(map[key])) {
|
|
|
- var sortedDOM = this.sortLetterDOM(key, map[key])
|
|
|
- domArr.push(sortedDOM)
|
|
|
- }
|
|
|
+ // 插入当前cityList
|
|
|
+ var pName = $this.attr('data-p-name')
|
|
|
+ // 找到cityList
|
|
|
+ var cityListDOM = _this.findCityListDOMFromOrigin(pName).clone().attr('data-p-children-name', pName).show()
|
|
|
+ // cityListDOM.find('.city-list-footer').show()
|
|
|
+ // 计算cityList插入哪一行后
|
|
|
+ var target = _this.calcTargetDOM(container, $this)
|
|
|
+ if (target) {
|
|
|
+ $(target).after(cityListDOM)
|
|
|
+ } else {
|
|
|
+ container.append(cityListDOM)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ container.on('click', '.action-button', function () {
|
|
|
+ container.find('.j-button-item.can-expand').removeClass('expand')
|
|
|
+ container.find('.city-list').remove()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setHighlight: function (area) {
|
|
|
+ if (area && area !== '全国') {
|
|
|
+ // 1. 用area找,先找一级
|
|
|
+ var p = this.getProvinceDOMWithName(area)
|
|
|
+ if (p.length) {
|
|
|
+ // 打开
|
|
|
+ this.openCityContainer(area)
|
|
|
+ } else {
|
|
|
+ // 找二级
|
|
|
+ var p2 = this.findCityInWhichProvince(area)
|
|
|
+ if (p2.length) {
|
|
|
+ // 二级是哪个一级的子集
|
|
|
+ var pName = p2.attr('data-p-name')
|
|
|
+ this.openCityContainer(pName)
|
|
|
+ var city = this.$view.find('.city-list').find('[data-c-name=' + area + ']')
|
|
|
+ city.addClass('active')
|
|
|
+ } else {
|
|
|
+ this.setHighlight()
|
|
|
}
|
|
|
- this.$origin.hide()
|
|
|
- this.$view.html(domArr).show()
|
|
|
- },
|
|
|
- // 整理字母容器
|
|
|
- sortLetterDOM: function (key, provinces) {
|
|
|
- var letterContainer = $('<div class="index-item"></div>')
|
|
|
- letterContainer.attr('data-index', key).append('<span class="index-bar">' + key.toUpperCase() + '</span>')
|
|
|
- for (var i = 0; i < provinces.length; i++) {
|
|
|
- var pName = provinces[i]
|
|
|
- var originProvinceDOM = this.$el.find('.selected-list.origin').find('[data-p-name=' + pName + ']')
|
|
|
- var originProvinceCities = originProvinceDOM.parent().find('[data-c-name=all]')
|
|
|
- var provinceDOM = originProvinceDOM.clone()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ var d = this.getProvinceDOMWithName('全国')
|
|
|
+ d.addClass('active')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ openCityContainer: function (pName) {
|
|
|
+ var container = this.$view
|
|
|
+ var $p = this.getProvinceDOMWithName(pName)
|
|
|
|
|
|
- // 是否是直辖市/自治区/...
|
|
|
- var singleProvince = this.isSingleProvince(pName)
|
|
|
- if (singleProvince) {
|
|
|
- originProvinceCities.removeClass().addClass('j-button-item single').attr('data-p-name', pName)
|
|
|
- if (originProvinceCities) {
|
|
|
- letterContainer.append(originProvinceCities)
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (pName === '全国') {
|
|
|
+ // 是不是直辖市, 是直辖市直接高亮
|
|
|
+ var isSingle = this.isSingleProvince(pName)
|
|
|
+ if (isSingle) {
|
|
|
+ $p.addClass('active')
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
- } else {
|
|
|
- originProvinceCities.text('全省')
|
|
|
- provinceDOM.addClass('can-expand')
|
|
|
- }
|
|
|
- if (provinceDOM) {
|
|
|
- letterContainer.append(provinceDOM)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- if (key === '#') {
|
|
|
- letterContainer.find('.index-bar').hide()
|
|
|
- }
|
|
|
- return letterContainer
|
|
|
- },
|
|
|
- // 从$origin中找city-list
|
|
|
- findCityListDOMFromOrigin: function (pName) {
|
|
|
- var container = this.$origin
|
|
|
- return container.find('[data-p-name=' + pName + ']').parent().find('.city-list')
|
|
|
- },
|
|
|
- // 从$view中找city-list
|
|
|
- findCityListDOMFromView: function (pName) {
|
|
|
- var container = this.$view
|
|
|
- return container.find('.city-list[data-p-children-name=' + pName + ']')
|
|
|
- },
|
|
|
- // 找到当前行最后一个dom
|
|
|
- calcTargetDOM: function (container, $this) {
|
|
|
- var indexBarContainer = $this.parent()
|
|
|
- var indexList = container.find('.index-item')
|
|
|
- var thisIndexBarTop = indexBarContainer.position().top
|
|
|
- var target = null
|
|
|
- for (var i = indexList.length - 1; i >= 0; i--) {
|
|
|
- var dom = indexList[i]
|
|
|
- var top = $(dom).position().top
|
|
|
- var diff = Math.abs(thisIndexBarTop - top)
|
|
|
- if (diff <= 5) {
|
|
|
- target = $(dom)
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- return target
|
|
|
- },
|
|
|
- initProvinceNameList: function () {
|
|
|
- var provinceNameList = []
|
|
|
- var map = this.provinceListMap
|
|
|
- for (var key in map) {
|
|
|
- provinceNameList = provinceNameList.concat(map[key])
|
|
|
+ container.find('.j-button-item.can-expand').removeClass('expand')
|
|
|
+ $p.addClass('expand')
|
|
|
+
|
|
|
+ // 删除其他cityList
|
|
|
+ container.find('.city-list').remove()
|
|
|
+
|
|
|
+ // 插入当前cityList
|
|
|
+ var pName = $p.attr('data-p-name')
|
|
|
+ // 找到cityList
|
|
|
+ var cityListDOM = this.findCityListDOMFromOrigin(pName).clone().attr('data-p-children-name', pName).show()
|
|
|
+ // cityListDOM.find('.city-list-footer').show()
|
|
|
+ // 计算cityList插入哪一行后
|
|
|
+ var target = this.calcTargetDOM(container, $p)
|
|
|
+ if (target) {
|
|
|
+ $(target).after(cityListDOM)
|
|
|
+ } else {
|
|
|
+ container.append(cityListDOM)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cacheOriginDOM: function () {
|
|
|
+ this.caches.originDOM = this.$el.html()
|
|
|
+ },
|
|
|
+ // 整理出按字母排序的省份选择的html结构
|
|
|
+ addLetterToList: function () {
|
|
|
+ var indexBarList = this.$view.find('.index-bar')
|
|
|
+ if (indexBarList.length > 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 对目标元素位置进行调整
|
|
|
+ var map = this.provinceListMap
|
|
|
+ var domArr = []
|
|
|
+ for (var key in map) {
|
|
|
+ if ($.isArray(map[key])) {
|
|
|
+ var sortedDOM = this.sortLetterDOM(key, map[key])
|
|
|
+ domArr.push(sortedDOM)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$origin.hide()
|
|
|
+ this.$view.html(domArr).show()
|
|
|
+ // 全国button加上标识
|
|
|
+ this.getProvinceDOMWithName('全国').addClass('country')
|
|
|
+ },
|
|
|
+ // 整理字母容器
|
|
|
+ sortLetterDOM: function (key, provinces) {
|
|
|
+ var letterContainer = $('<div class="index-item"></div>')
|
|
|
+ letterContainer.attr('data-index', key).append('<span class="index-bar">' + key.toUpperCase() + '</span>')
|
|
|
+ for (var i = 0; i < provinces.length; i++) {
|
|
|
+ var pName = provinces[i]
|
|
|
+ var originProvinceDOM = this.$el.find('.selected-list.origin').find('[data-p-name=' + pName + ']')
|
|
|
+ var originProvinceCities = originProvinceDOM.parent().find('[data-c-name=all]')
|
|
|
+ var provinceDOM = originProvinceDOM.clone()
|
|
|
+
|
|
|
+ if (pName === '全国') {
|
|
|
+ // do something...
|
|
|
+ } else {
|
|
|
+ originProvinceCities.text('全省')
|
|
|
+ provinceDOM.addClass('can-expand')
|
|
|
+ }
|
|
|
+ if (provinceDOM) {
|
|
|
+ letterContainer.append(provinceDOM)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (key === '#') {
|
|
|
+ letterContainer.find('.index-bar').hide()
|
|
|
+ }
|
|
|
+ return letterContainer
|
|
|
+ },
|
|
|
+ // 从$origin中找city-list
|
|
|
+ findCityListDOMFromOrigin: function (pName) {
|
|
|
+ var container = this.$origin
|
|
|
+ return container.find('[data-p-name=' + pName + ']').parent().find('.city-list')
|
|
|
+ },
|
|
|
+ // 从$view中找city-list
|
|
|
+ findCityListDOMFromView: function (pName) {
|
|
|
+ var container = this.$view
|
|
|
+ return container.find('.city-list[data-p-children-name=' + pName + ']')
|
|
|
+ },
|
|
|
+ // 找到当前行最后一个dom
|
|
|
+ calcTargetDOM: function (container, $this) {
|
|
|
+ var indexBarContainer = $this.parent()
|
|
|
+ var indexList = container.find('.index-item')
|
|
|
+ var thisIndexBarTop = indexBarContainer.position().top
|
|
|
+ var target = null
|
|
|
+ for (var i = indexList.length - 1; i >= 0; i--) {
|
|
|
+ var dom = indexList[i]
|
|
|
+ var top = $(dom).position().top
|
|
|
+ var diff = Math.abs(thisIndexBarTop - top)
|
|
|
+ if (diff <= 5) {
|
|
|
+ target = $(dom)
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return target
|
|
|
+ },
|
|
|
+ initProvinceNameList: function () {
|
|
|
+ var provinceNameList = []
|
|
|
+ var map = this.provinceListMap
|
|
|
+ for (var key in map) {
|
|
|
+ provinceNameList = provinceNameList.concat(map[key])
|
|
|
+ }
|
|
|
+ this.provinceNameList = provinceNameList
|
|
|
+ },
|
|
|
+ // 找到市所在省份
|
|
|
+ findCityInWhichProvince: function (city) {
|
|
|
+ var city = this.$origin.find('[data-c-name=' + city + ']')
|
|
|
+ var pName = city.parents('.province-container').find('[data-p-name]').text()
|
|
|
+ return this.$view.find('[data-p-name=' + pName + ']')
|
|
|
+ },
|
|
|
+ // 是不是直辖市
|
|
|
+ isSingleProvince: function (area) {
|
|
|
+ return this.singleList.indexOf(area) !== -1
|
|
|
+ },
|
|
|
+ // 是不是省份
|
|
|
+ isProvince: function (area) {
|
|
|
+ return this.provinceNameList.indexOf(area) !== -1
|
|
|
+ },
|
|
|
+ // 获取省份名称对应的button
|
|
|
+ getProvinceDOMWithName: function (name) {
|
|
|
+ var container = this.$view
|
|
|
+ return container.find('[data-p-name=' + name + ']')
|
|
|
+ },
|
|
|
+ getSingleState: function () {
|
|
|
+ var area = {}
|
|
|
+ var container = this.$view
|
|
|
+ var activeList = container.find('.active:not(.country)')
|
|
|
+ activeList.each(function (index, item) {
|
|
|
+ var $item = $(item)
|
|
|
+ var single = $item.hasClass('single')
|
|
|
+ if (single) {
|
|
|
+ var city = $item.attr('data-p-name')
|
|
|
+ area[city] = []
|
|
|
+ } else {
|
|
|
+ var city = $item.attr('data-c-name')
|
|
|
+ var province = $item.parents('.city-list').attr('data-p-children-name')
|
|
|
+ if (city === 'all') {
|
|
|
+ area[province] = []
|
|
|
+ } else {
|
|
|
+ if (area[province]) {
|
|
|
+ area[province].push(city)
|
|
|
+ } else {
|
|
|
+ area[province] = [city]
|
|
|
+ }
|
|
|
}
|
|
|
- this.provinceNameList = provinceNameList
|
|
|
- },
|
|
|
- // 找到市所在省份
|
|
|
- findCityInWhichProvince: function (city) {
|
|
|
- var city = this.$origin.find('[data-c-name=' + city + ']')
|
|
|
- var pName = city.parents('.province-container').find('[data-p-name]').text()
|
|
|
- return this.$view.find('[data-p-name=' + pName + ']')
|
|
|
- },
|
|
|
- // 是不是直辖市
|
|
|
- isSingleProvince: function (area) {
|
|
|
- return this.singleList.indexOf(area) !== -1
|
|
|
- },
|
|
|
- // 是不是省份
|
|
|
- isProvince: function (area) {
|
|
|
- return this.provinceNameList.indexOf(area) !== -1
|
|
|
- },
|
|
|
- // 获取省份名称对应的button
|
|
|
- getProvinceDOMWithName: function (name) {
|
|
|
- var container = this.$view
|
|
|
- return container.find('[data-p-name=' + name + ']')
|
|
|
- },
|
|
|
- getSingleState: function () {
|
|
|
- var area = {}
|
|
|
- var container = this.$view
|
|
|
- var activeList = container.find('.active:not(.country)')
|
|
|
- activeList.each(function (index, item) {
|
|
|
- var $item = $(item)
|
|
|
- var single = $item.hasClass('single')
|
|
|
- if (single) {
|
|
|
- var city = $item.attr('data-p-name')
|
|
|
- area[city] = []
|
|
|
- } else {
|
|
|
- var city = $item.attr('data-c-name')
|
|
|
- var province = $item.parents('.city-list').attr('data-p-children-name')
|
|
|
- if (city === 'all') {
|
|
|
- area[province] = []
|
|
|
- } else {
|
|
|
- if (area[province]) {
|
|
|
- area[province].push(city)
|
|
|
- } else {
|
|
|
- area[province] = [city]
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- return area
|
|
|
- },
|
|
|
- restoreAreaSelectorState: function (conf) {
|
|
|
- var container = this.$view
|
|
|
- var area = conf.area || '全国'
|
|
|
- if (area === '全国') {
|
|
|
- container.find('.j-button-item.country').addClass('active')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return area
|
|
|
+ },
|
|
|
+ restoreAreaSelectorState: function (conf) {
|
|
|
+ var container = this.$view
|
|
|
+ var area = conf.area || '全国'
|
|
|
+ if (area === '全国') {
|
|
|
+ container.find('.j-button-item.country').addClass('active')
|
|
|
+ } else {
|
|
|
+ // 是不是省份
|
|
|
+ if (this.isProvince(area)) {
|
|
|
+ var pName = area
|
|
|
+ var button = this.getProvinceDOMWithName(pName)
|
|
|
+ if (this.isSingleProvince(pName)) {
|
|
|
+ button.addClass('active')
|
|
|
} else {
|
|
|
- // 是不是省份
|
|
|
- if (this.isProvince(area)) {
|
|
|
- var pName = area
|
|
|
- var button = this.getProvinceDOMWithName(pName)
|
|
|
- if (this.isSingleProvince(pName)) {
|
|
|
- button.addClass('active')
|
|
|
- } else {
|
|
|
- button.addClass('active')
|
|
|
- button.trigger('click')
|
|
|
- // 选中全省
|
|
|
- var cityListDOM = this.findCityListDOMFromView(pName)
|
|
|
- cityListDOM.find('.city-item.province').addClass('active')
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 找到市所在省份
|
|
|
- var city = area
|
|
|
- var provinceDOM = this.findCityInWhichProvince(city)
|
|
|
- provinceDOM.addClass('half')
|
|
|
- var pName = provinceDOM.text()
|
|
|
- var button = this.getProvinceDOMWithName(pName)
|
|
|
- button.trigger('click')
|
|
|
- // 选中当前市
|
|
|
- var cityListDOM = this.findCityListDOMFromView(pName)
|
|
|
- cityListDOM.find('.city-item[data-c-name=' + city + ']').addClass('active')
|
|
|
- }
|
|
|
+ button.addClass('active')
|
|
|
+ button.trigger('click')
|
|
|
+ // 选中全省
|
|
|
+ var cityListDOM = this.findCityListDOMFromView(pName)
|
|
|
+ cityListDOM.find('.city-item.province').addClass('active')
|
|
|
}
|
|
|
- },
|
|
|
+ } else {
|
|
|
+ // 找到市所在省份
|
|
|
+ var city = area
|
|
|
+ var provinceDOM = this.findCityInWhichProvince(city)
|
|
|
+ provinceDOM.addClass('half')
|
|
|
+ var pName = provinceDOM.text()
|
|
|
+ var button = this.getProvinceDOMWithName(pName)
|
|
|
+ button.trigger('click')
|
|
|
+ // 选中当前市
|
|
|
+ var cityListDOM = this.findCityListDOMFromView(pName)
|
|
|
+ cityListDOM.find('.city-item[data-c-name=' + city + ']').addClass('active')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|