jquery.addressSelect.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710
  1. /**
  2. * Created by Andste on 2016/8/8.
  3. * version 1.0.5
  4. */
  5. import axios from 'axios'
  6. (function ($, window, document, undefined) {
  7. var addressSelect = function (ele, opts) {
  8. this.$element = ele;
  9. // 全局节点
  10. this.node = {};
  11. // 全局地区节点变量
  12. this.region_li = '';
  13. // 全局title节点变量
  14. this.titleView = '';
  15. // 全局地区id
  16. this.regions = {};
  17. // 初始化默认地区数组
  18. this.defaultArray = [];
  19. // 初始化默认地区index
  20. this.index = 0;
  21. this.defaults = {
  22. 'api': 'system/regions/parent/',
  23. 'deData': null,
  24. 'debug': false,
  25. 'quick': false,
  26. 'setInput': false,
  27. 'names': {
  28. province: 'province',
  29. city: 'city',
  30. region: 'region',
  31. town: 'town'
  32. }
  33. };
  34. this.options = $.extend({}, this.defaults, opts);
  35. };
  36. addressSelect.prototype = {
  37. // 初始化方法
  38. init: function () {
  39. // 创建css样式
  40. $('#addressSelectCss').length === 0 && this.createStyles();
  41. // 初始化element
  42. this.initElement();
  43. },
  44. // 初始化事件绑定
  45. initEvent: function () {
  46. var _this = this;
  47. // 初始化显示、隐藏事件
  48. _this.initShowHide();
  49. // 初始化绑定关闭事件
  50. _this.appClose();
  51. // 初始化选择tab事件
  52. _this.selectTab();
  53. // 初始化一级地区
  54. if (_this.options.deData && _this.options.deData[0]) {
  55. // 有默认值
  56. _this.hasDefault();
  57. } else {
  58. // 没有默认值
  59. _this.accessApi();
  60. }
  61. // 初始化地区选中事件
  62. _this.selectRegion();
  63. // 初始化地区鼠标移入事件
  64. _this.curRegion();
  65. // 初始化展示视图盒子宽度
  66. _this.node.app.css({
  67. width: parseInt(this.node.appTitleView.css('fontSize')) * this.node.appTitleView.html().length
  68. });
  69. _this.node.appBody.on('mouseenter', '#app_address_prompt', function (e) {
  70. e.stopPropagation();
  71. e.preventDefault();
  72. });
  73. },
  74. /* 事件处理区
  75. ============================================================================ */
  76. // 初始化绑定显示、隐藏事件
  77. initShowHide: function () {
  78. var _this = this,
  79. node = _this.node;
  80. node.app.on('mouseenter', function () {
  81. _this.showApp();
  82. });
  83. // 鼠标移出控件隐藏地区选择窗体
  84. node.app.on('mouseleave', function () {
  85. _this.hideApp();
  86. });
  87. },
  88. // 初始化绑定关闭事件
  89. appClose: function () {
  90. var _this = this;
  91. _this.node.appClose.on('click', function () {
  92. _this.hideApp();
  93. });
  94. },
  95. // 初始化绑定选择tab事件
  96. selectTab: function () {
  97. var _this = this;
  98. $(_this.node.appTab).on('click', '.app-address-tab-a', function () {
  99. _this.selectedTab($(this));
  100. });
  101. },
  102. // 初始化地区选中事件
  103. selectRegion: function () {
  104. var _this = this;
  105. var node = _this.node;
  106. node.appContent.on('click', '.app-address-area-a', function () {
  107. var $this = $(this),
  108. region_id = $this.attr('region_id'),
  109. region_grade = $this.attr('region_grade'),
  110. local_name = $this.attr('local_title');
  111. // 计算当前a标签所在盒子索引
  112. var _index = $this.closest('.app-address-area').index();
  113. // 根据索引获取对应索引的tab的a标签,并改变内容
  114. node.appBody.find('.app-address-tab-a').eq(_index).find('em').html(local_name);
  115. node.appBody.find('.app-address-tab-a').eq(_index).nextAll().find('em').html('请选择');
  116. _this.setNameTag(region_grade, region_id, local_name);
  117. // 移除后面元素
  118. _this.removeElement(_index);
  119. if (_this.options.debug) {
  120. console.log('index:' + _index + ' local_name:' + local_name);
  121. }
  122. node.app.off('mouseleave');
  123. node.app.on('mouseover', function () {
  124. node.app.on('mouseleave', function () {
  125. _this.hideApp();
  126. });
  127. });
  128. // 根据字数调整body宽度
  129. _this.wordCount(_index);
  130. if (Number(region_grade) === 4) {
  131. _this.complete();
  132. } else {
  133. // 调用API接口获取数据
  134. _this.accessApi(region_id, region_grade);
  135. }
  136. });
  137. },
  138. // 初始化地区鼠标移入事件
  139. curRegion: function () {
  140. var _this = this;
  141. var node = _this.node;
  142. node.appContent.on('mouseenter', '.app-address-area-a', function () {
  143. var $this = $(this);
  144. var title = $this.attr('local_title');
  145. if (title.length > 8) {
  146. var top = ($this.position().top - 28),
  147. left = $this.position().left,
  148. fontSize = parseInt($this.css('fontSize'));
  149. if (node.appContent.find('#app_address_prompt').length === 0) {
  150. var _html = '<div id="app_address_prompt"'
  151. + 'style="top: ' + (top - 5) + 'px; left: ' + left + 'px;'
  152. + '">'
  153. + title
  154. + '</div>';
  155. $(_html).appendTo(node.appContent);
  156. node.appContent.find('#app_address_prompt').css({
  157. left: left - (fontSize * title.length + 14 - $('#app_address_prompt')[0].offsetWidth)
  158. });
  159. setTimeout(function () {
  160. node.appContent.find('#app_address_prompt').css({
  161. opacity: 1,
  162. top: top
  163. });
  164. }, 200);
  165. }
  166. }
  167. });
  168. node.appContent.on('mouseleave', '.app-address-area-a', function () {
  169. node.appContent.find('#app_address_prompt').remove();
  170. $(this).parent().css({width: ''});
  171. });
  172. },
  173. // 初始化默认地区
  174. hasDefault: function () {
  175. var _this = this;
  176. _this.defaultArray.push({re_id: 0, index: 0});
  177. for (var i = 0; i < _this.options.deData.length; i++) {
  178. var _deData = _this.options.deData[i];
  179. if (_deData && _deData != 0 && _deData != -1) {
  180. var _index = parseInt(i) + 1;
  181. _this.defaultArray.push({re_id: _this.options.deData[i], index: _index});
  182. }
  183. }
  184. if (_this.options.debug) {
  185. console.log(this.defaultArray);
  186. }
  187. // 创建tab、app窗体
  188. _this.createDeElement();
  189. _this.accessApi(_this.defaultArray[_this.index].re_id);
  190. },
  191. // 初始化创建默认地区element
  192. createDeElement: function () {
  193. var _this = this;
  194. for (var i = 0, len = _this.defaultArray.length - 2; i < len; i++) {
  195. if (_this.defaultArray[i]) {
  196. _this.createElement();
  197. }
  198. }
  199. },
  200. /* 逻辑实现区
  201. ============================================================================ */
  202. // 显示APP
  203. showApp: function () {
  204. var node = this.node;
  205. node.appTitle.addClass('hover');
  206. node.appBody.addClass('show');
  207. },
  208. // 隐藏APP
  209. hideApp: function () {
  210. var node = this.node;
  211. node.appTitle.removeClass('hover');
  212. node.appBody.removeClass('show');
  213. },
  214. // tab选中处理
  215. selectedTab: function ($this) {
  216. var index = $this.index();
  217. $this.addClass('cur')
  218. .siblings()
  219. .removeClass('cur')
  220. .find('i').removeClass('cur');
  221. $this.find('i').addClass('cur');
  222. // 地区视图展示逻辑
  223. this.node.appBody.find('.app-address-area').eq(index).addClass('show')
  224. .siblings().removeClass('show');
  225. },
  226. // 创建tab、地区盒子
  227. createElement: function () {
  228. var node = this.node;
  229. // 创建tab
  230. var tabA = '<a href="javascript: void(0);" class="app-address-tab-a show"> <em>请选择</em> <i style="padding: 0;"></i> </a>';
  231. $(tabA).appendTo(node.appTab);
  232. // 创建地区视图
  233. var list = '<div class="app-address-area"><ul class="app-address-area-list"></ul></div>';
  234. $(list).appendTo(node.appContent);
  235. },
  236. // 移出选中tab+1之后的节点
  237. removeElement: function (index) {
  238. this.node.appBody.find('.app-address-tab-a').eq(index).nextAll().remove();
  239. this.node.appBody.find('.app-address-area').eq(index).nextAll().remove();
  240. },
  241. // 处理逻辑、API返回数据
  242. useApi: function (res, region_grade) {
  243. if (!res) return;
  244. var _this = this;
  245. var result = res,
  246. lenght = result.length;
  247. // 完事
  248. if (lenght === 0) {
  249. _this.complete();
  250. return;
  251. }
  252. // 遍历数据组织结构
  253. for (var i = 0, len = result.length; i < len; i++) {
  254. var local_title = result[i]['local_name'],
  255. local_name = local_title.substring(0, 8);
  256. _this.region_li += '<li><a href="javascript: void(0);" class="app-address-area-a" local_title="' + local_title + '" region_id="' + result[i].id + '" region_grade="' + result[i]['region_grade'] + '">' + local_name + '</a> </li>';
  257. }
  258. if (region_grade !== 0 && _this.node.app.find('.app-address-tab-a').eq(region_grade).length === 0) {
  259. _this.createElement();
  260. }
  261. _this.complyApi(region_grade);
  262. if (_this.options.quick === true && lenght === 1) {
  263. var r_id = result[0].id,
  264. r_grade = result[0]['region_grade'],
  265. l_name = result[0]['local_name'];
  266. _this.accessApi(r_id, r_grade);
  267. _this.setNameTag(r_grade, r_id, l_name);
  268. _this.node.appBody.find('.app-address-tab-a').eq(r_grade - 1).find('em').html(l_name);
  269. }
  270. },
  271. // API逻辑处理方法实现
  272. complyApi: function (index) {
  273. var _this = this;
  274. _this.node.appBody.find('.app-address-tab-a').eq(index).addClass('show cur').siblings().removeClass('cur').find('i').removeClass('cur');
  275. _this.node.appBody.find('.app-address-tab-a').eq(index).find('i').addClass('cur');
  276. var area = _this.node.appBody.find('.app-address-area').eq(index);
  277. area.find('ul').html(_this.region_li);
  278. area.addClass('show').siblings().removeClass('show');
  279. _this.region_li = '';
  280. },
  281. // 选择完成
  282. complete: function () {
  283. var _this = this;
  284. var node = _this.node,
  285. appTabA = node.appBody.find('.app-address-tab-a'),
  286. appTabALen = appTabA.length;
  287. _this.titleView = '';
  288. for (var i = 0; i < appTabALen; i++) {
  289. _this.titleView += appTabA.eq(i).find('em').html();
  290. }
  291. var titleLen = _this.titleView.length,
  292. fontSize = parseInt(node.appTitleView.css('fontSize'));
  293. node.app.css({
  294. width: fontSize * titleLen + 30
  295. });
  296. var regionData = {};
  297. regionData['string'] = _this.titleView;
  298. regionData['regions'] = _this.regions;
  299. regionData['last_id'] = _this.regions.town_id || _this.regions.region_id || _this.regions.city_id || _this.regions.province_id;
  300. var _callback = _this.options.callback;
  301. _callback && typeof(_callback) === 'function' && _callback(regionData);
  302. node.appTitleView.html(_this.titleView);
  303. _this.hideApp();
  304. },
  305. // 根据tab总字数设置body宽度
  306. wordCount: function (index) {
  307. var node = this.node;
  308. if (index > 1) {
  309. var appTabA = node.appBody.find('.app-address-tab-a'),
  310. fontSize = parseInt(node.appTitleView.css('fontSize')),
  311. _html = '';
  312. for (var i = 0, _len = appTabA.length; i < _len; i++) {
  313. _html += appTabA.eq(i).find('em').html();
  314. }
  315. var len = _html.length,
  316. width = fontSize * (len + 3) + 150;
  317. if (width < 460) {
  318. width = 460;
  319. }
  320. len > 20 ? node.appBody.css({width: width}) : node.appBody.css({width: ''});
  321. } else {
  322. node.appBody.css({width: ''});
  323. }
  324. },
  325. // 动态设置name标签
  326. setNameTag: function (region_grade, region_id, local_name) {
  327. var _this = this;
  328. var names = this.options.names;
  329. var _ele = this.$element;
  330. switch (parseInt(region_grade)) {
  331. case 1:
  332. _ele.find("input[name=" + names.province + "]").val(local_name);
  333. _ele.find("input[name=" + names.province + "_id]").val(region_id).nextAll().val('');
  334. _this.regions['province'] = local_name;
  335. _this.regions['province_id'] = region_id;
  336. break;
  337. case 2:
  338. _ele.find("input[name=" + names.city + "]").val(local_name);
  339. _ele.find("input[name=" + names.city + "_id]").val(region_id).nextAll().val('');
  340. _this.regions['city'] = local_name;
  341. _this.regions['city_id'] = region_id;
  342. _this.regions['region'] = undefined;
  343. _this.regions['region_id'] = undefined;
  344. _this.regions['town'] = undefined;
  345. _this.regions['town_id'] = undefined;
  346. break;
  347. case 3:
  348. _ele.find("input[name=" + names.region + "]").val(local_name);
  349. _ele.find("input[name=" + names.region + "_id]").val(region_id).nextAll().val('');
  350. _this.regions['region'] = local_name;
  351. _this.regions['region_id'] = region_id;
  352. _this.regions['town'] = undefined;
  353. _this.regions['town_id'] = undefined;
  354. break;
  355. case 4:
  356. _ele.find("input[name=" + names.town + "]").val(local_name);
  357. _ele.find("input[name=" + names.town + "_id]").val(region_id).nextAll().val('');
  358. _this.regions['town'] = local_name;
  359. _this.regions['town_id'] = region_id;
  360. break;
  361. }
  362. },
  363. // 默认地区使用
  364. complyDeApi: function (res) {
  365. var _this = this;
  366. var node = _this.node;
  367. var result = res,
  368. _local_name = '';
  369. // 遍历数据组织结构
  370. for (var i = 0, len = result.length; i < len; i++) {
  371. var region_id = result[i]['id'],
  372. local_title = result[i]['local_name'],
  373. local_name = local_title.substring(0, 8);
  374. _this.region_li += '<li><a href="javascript: void(0);" class="app-address-area-a" local_title="' + local_title + '" region_id="' + region_id + '" region_grade="' + result[i]['region_grade'] + '">' + local_name + '</a> </li>';
  375. if (region_id === _this.defaultArray[_this.index + 1].re_id) {
  376. _local_name = local_title;
  377. _this.titleView += _local_name;
  378. _this.node.appTab.find('a').eq(_this.index).find('em').html(_local_name);
  379. }
  380. }
  381. node.appBody.find('.app-address-area').eq(_this.index).find('ul').html(_this.region_li);
  382. _this.region_li = '';
  383. _this.index++;
  384. if (_this.index === _this.defaultArray.length - 1) {
  385. node.appBody.find('.app-address-tab-a').eq(_this.defaultArray.length - 2).addClass('cur').find('i').addClass('cur');
  386. node.appBody.find('.app-address-tab-a').eq(0).find('i').removeClass('cur');
  387. node.appBody.find('.app-address-area').eq(_this.defaultArray.length - 2).addClass('show');
  388. this.setNameTag(_this.index, _this.defaultArray[_this.index].re_id, _local_name);
  389. _this.defaultArray = []
  390. _this.wordCount();
  391. _this.complete();
  392. } else {
  393. _this.accessApi(_this.defaultArray[_this.index].re_id);
  394. }
  395. // 设置默认tab
  396. _this.defaultArray[0] && this.setNameTag(_this.index, _this.defaultArray[_this.index].re_id, _local_name);
  397. },
  398. /* 接口访问区
  399. ============================================================================ */
  400. accessApi: function (region_id, region_grade) {
  401. var _this = this;
  402. var _region_id = region_id || 0;
  403. var _region_grade = region_grade || 0;
  404. axios.get(_this.options.api.replace("@id", _region_id)).then(function (response) {
  405. response.status === 200 && (function () {
  406. _this.defaultArray.length > 0
  407. ? _this.complyDeApi(response.data)
  408. : _this.useApi(response.data, _region_grade);
  409. })();
  410. });
  411. },
  412. /* 初始化创建element
  413. ============================================================================ */
  414. initElement: function () {
  415. var _this = this,
  416. ele = this.$element;
  417. var names = _this.options.names;
  418. var province = names.province ? '<input type="hidden" value="" name="' + names.province + '"/>' : '',
  419. province_id = names.province ? '<input type="hidden" value="" name="' + names.province + '_id"/>' : '',
  420. city = names.city ? '<input type="hidden" value="" name="' + names.city + '"/>' : '',
  421. city_id = names.city ? '<input type="hidden" value="" name="' + names.city + '_id"/>' : '',
  422. region = names.region ? '<input type="hidden" value="" name="' + names.region + '"/>' : '',
  423. region_id = names.region ? '<input type="hidden" value="" name="' + names.region + '_id"/>' : '',
  424. town = names.town ? '<input type="hidden" value="" name="' + names.town + '">' : '',
  425. town_id = names.town ? '<input type="hidden" value="" name="' + names.town + '_id">' : '';
  426. var inputs = _this.options.setInput ? province + province_id + city + city_id + region + region_id + town + town_id : '';
  427. var html = '<div class="app-address">'
  428. + '<div class="app-address-title">'
  429. + '<div class="app-address-title-view">-- 请选择 --</div><i style="padding: 0;"></i></div>'
  430. + '<div class="app-address-body">'
  431. + '<div class="app-address-tab">'
  432. + '<a href="javascript: void(0);" class="app-address-tab-a show"><em>请选择</em> <i class="cur" style="padding: 0;"></i></a></div>'
  433. + '<div class="app-address-content">'
  434. + '<div class="app-address-area">'
  435. + '<ul class="app-address-area-list"></ul>'
  436. + '</div>'
  437. + '</div>'
  438. + '<div class="app-address-close"></div>'
  439. + '</div>'
  440. + inputs
  441. + '</div>';
  442. ele.html(html);
  443. // 缓存节点
  444. this.node = {
  445. app: ele.find('.app-address'),
  446. appBody: ele.find('.app-address-body'),
  447. appTitle: ele.find('.app-address-title'),
  448. appTitleView: ele.find('.app-address-title-view'),
  449. appClose: ele.find('.app-address-close'),
  450. appTab: ele.find('.app-address-tab'),
  451. appContent: ele.find('.app-address-content')
  452. };
  453. // 绑定事件
  454. _this.initEvent();
  455. },
  456. /* 初始化创建css样式
  457. ============================================================================ */
  458. createStyles: function () {
  459. var style = document.createElement('style'),
  460. head = document.head || document.getElementsByTagName('head')[0];
  461. style.type = 'text/css';
  462. style.id = 'addressSelectCss';
  463. if (style.styleSheet) {
  464. var func = function () {
  465. try { //防止IE中stylesheet数量超过限制而发生错误
  466. style.styleSheet.cssText = styles;
  467. } catch (e) {
  468. }
  469. };
  470. if (style.styleSheet.disabled) {
  471. setTimeout(func, 10);
  472. } else {
  473. func();
  474. }
  475. } else {
  476. var textNode = document.createTextNode(styles);
  477. style.appendChild(textNode);
  478. }
  479. head.appendChild(style);
  480. }
  481. };
  482. $.fn.addressSelect = function (options) {
  483. var select = new addressSelect(this, options);
  484. return this.each(function () {
  485. select.init();
  486. });
  487. };
  488. var icon_area_arrow = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAYAgMAAADiyMeaAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURQAAADMxMmdoaH9/fyFf1mIAAAABdFJOUwBA5thmAAAAOElEQVQI12NgoB2YwHiAgUEAxAphdQASIJaoKAMDYyiIxQrks7oCxRkYA4DiIIKBAchVYSigoZsAhOwFPZU4L9cAAAAASUVORK5CYII=';
  489. var icon_area_arrow2 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAoBAMAAADAhv0DAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAeUExURfT09P////Pz8/b29pmZmczMzPf39/z8/Le3t93d3f3YaqwAAABTSURBVAjXYygvLy9gSEtLS2AwNjY2IEAQC5SUlBQIEIKCggLoRAsDSwODi4OLAwOLiwvQGCCDgYEFiBFKpgqKTmAIDQwNYBANDQWKhQYCCVFBAQDyaxW6UHn2KQAAAABJRU5ErkJggg==';
  490. var icon_area_close = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACZklEQVRYR81X0XXTQBDcqQDTQaggpgJCBawqwFSAqYCkApwKCBXcUgFJBcEVEDrAFSxv9E56Z+lOOoHfc+7LzzrdjmZ292YhC5aqqoi8E5ELEVkBWPN1d/8pIn9E5AmAhRC+1x6LuY2qymCfRUQBrOb2R0AEYyLyycz4u7gmAajqtYh8rA08jOLuDL4zs5sSgiwAVeWX/ugorvnqqT1Rorc5NkYAVJW6MngV3bXgIhsEwXzp1xGA+OW/Th28ixZBvEqZ6AGcmvYSM5TDzF53z1MA1wCY7cN1EBHSRkkuKynfx7KknC8yyXljZkxwaQHEUnvMUH9w96tON1XdAvgyk3AsvV08dw3gfggilaIDcAfgfebghxDCVfq/qm4AfM2BcPcPZnaXPmuahgDeZFj4ZmabFkDTNKzXHFVHenWH5EDkgsezKd9IOrJgZi/B9gogTCRNT2mJiVLwOcncvSGAEv19vIkAG24a0h71L0qVlOUtShplNBvpW2JtKk8G7zwQQFaj2iQb7lsQvL1FCcAra7vdVpKjlvZhrGcB4GwSiMj+/El49jI8eyOaasXUKITQGs+5+2BpKxaRQwhh9TwuI5oRAE+Fa7O3UXO9PfaJrZnddtdxwd7xmr+gM5o1JPHubg1JrUlN5gT6gZG3dPdjQ9Lpu6QtL+meg71HeTUypTkp/iPY8NXf7r7OmtLEbGRt1AlAMLhO2vIEBPWmlao1oXP49tFbjsa02dEMwDZn1+YixufMdo5mrQPOrZrhlFm8A8DJeOQbC+cyMIdTluS/D6eZDkgQ9JDteJ5I1M4BsfzuzYzBq9ZfJia0fP+I1aUAAAAASUVORK5CYII=';
  491. var styles = '.app-address {'
  492. + 'position: relative;'
  493. + 'min-width: 20%;'
  494. + 'height: 26px;'
  495. + 'font-size: 12px;'
  496. + 'z-index: 1000;}'
  497. + '.app-address i {'
  498. + 'font-style: normal;}'
  499. + '.app-address-title {'
  500. + 'position: relative;'
  501. + 'border: 1px solid #cccccc;'
  502. + 'background-color: #ffffff;'
  503. + 'padding: 0 20px 0 4px;'
  504. + 'height: 23px;'
  505. + 'line-height: 23px;}'
  506. + 'z-index: 1;'
  507. + 'line-height: 36px;}'
  508. + '.app-address-title-view {'
  509. + 'text-align: center;}'
  510. + '.app-address-title.hover {'
  511. + 'z-index: 1;'
  512. + 'height: 24px;'
  513. + 'border-bottom: none;}'
  514. + '.app-address-title i {'
  515. + 'display: block;'
  516. + 'position: absolute;'
  517. //+ 'top: 0;'
  518. + 'top: 50%;'
  519. + 'margin-top: -12px;'
  520. + 'right: 5px;'
  521. + 'width: 17px;'
  522. + 'height: 24px;'
  523. + 'background: url(' + icon_area_arrow + ') 0 0 no-repeat;'
  524. + '*background: url(//7xlo8o.com1.z0.glb.clouddn.com/area_arrow.png) 0 0 no-repeat;}'
  525. + '.app-address-body {'
  526. + 'display: none;'
  527. + 'width: 460px;'
  528. + 'min-height: 100px;'
  529. + 'float: left;'
  530. + 'position: absolute;'
  531. + 'top: 24px;'
  532. + 'left: -85px;'
  533. + 'border: 1px solid #CECBCE;'
  534. + 'padding: 15px;'
  535. + 'background: #fff;'
  536. + 'z-index: 2;'
  537. + '-moz-box-shadow: 0 0 5px #ddd;'
  538. + '-webkit-box-shadow: 0 0 5px #ddd;'
  539. + 'box-shadow: 0 0 5px #ddd;}'
  540. + '.app-address-body.show {'
  541. + 'display: block;}'
  542. + '.app-address-close {'
  543. + 'position: absolute;'
  544. + 'z-index: 2;'
  545. + 'top: -8px;'
  546. + 'right: -8px;'
  547. + 'width: 17px;'
  548. + 'height: 17px;'
  549. + 'background: url(' + icon_area_close + ') no-repeat center;'
  550. + 'background-size: 100%;'
  551. + '*background: url(//7xlo8o.com1.z0.glb.clouddn.com/area_close.png) 0 0 no-repeat;'
  552. + 'cursor: pointer;}'
  553. + '.app-address-tab {'
  554. + 'width: 100%;'
  555. + 'height: 25px;'
  556. + 'border-bottom: 2px solid #edd28b;'
  557. + 'overflow: visible;}'
  558. + '.app-address-tab a {'
  559. + 'display: none;'
  560. + 'position: relative;'
  561. + 'float: left;'
  562. + 'height: 23px;'
  563. + 'line-height: 23px;'
  564. + 'padding: 0 21px 1px 11px;'
  565. + 'margin-right: 3px;'
  566. + 'border: 1px solid #ddd;'
  567. + 'border-bottom: 0;'
  568. + 'color: #005AA0;'
  569. + 'text-align: center;'
  570. + 'cursor: pointer;'
  571. + 'overflow: hidden;'
  572. + 'white-space: nowrap;'
  573. + 'text-overflow: ellipsis;}'
  574. + '.app-address-tab-a em {'
  575. + 'font-style: normal}'
  576. + '.app-address-tab a.show {'
  577. + 'display: block;}'
  578. + '.app-address-tab a i {'
  579. + 'position: absolute;'
  580. + 'right: 4px;'
  581. + 'top: 10px;'
  582. + 'display: block;'
  583. + 'width: 7px;'
  584. + 'height: 5px;'
  585. + 'overflow: hidden;'
  586. + 'background: url(' + icon_area_arrow2 + ') 0 -35px no-repeat;}'
  587. + '*background: url(//7xlo8o.com1.z0.glb.clouddn.com/area_arrow2.png) 0 -35px no-repeat;}'
  588. + '.app-address-tab a i.cur {'
  589. + 'background-position: 0 -28px;}'
  590. + '.app-address-tab a.cur {'
  591. + 'height: 25px;'
  592. + 'background-color: #fff;'
  593. + 'border: 2px solid #edd28b;'
  594. + 'border-bottom: 0;'
  595. + 'padding: 0 20px 0 10px;'
  596. + 'line-height: 22px;'
  597. + 'text-decoration: none;'
  598. + 'color: #000;}'
  599. + '.app-address-content {'
  600. + 'position: relative'
  601. + '}'
  602. + '.app-address-area {'
  603. + 'display: none;'
  604. + 'overflow: hidden;}'
  605. + '.app-address-area.show {'
  606. + 'display: block;}'
  607. + '.app-address-area ul {'
  608. + 'margin-top: 10px;}'
  609. + '.app-address-area li {'
  610. + 'float: left;'
  611. + 'min-width: 95px;'
  612. + 'line-height: normal;'
  613. //+ 'height: 25px;'
  614. + 'padding: 0 0 0 5px;'
  615. + 'clear: none;'
  616. + 'overflow: hidden;'
  617. + '-webkit-user-select: none;'
  618. + '-moz-user-select: none;'
  619. + '-ms-user-select: none;'
  620. + 'user-select: none;}'
  621. + '.app-address-area ul li a {'
  622. + 'padding: 3px 7px;'
  623. + 'color: #005aa0;'
  624. + 'font-size: 12px;'
  625. + 'line-height: 25px;}'
  626. + '.app-address-area ul li a:hover {'
  627. + 'background: #005ea7;'
  628. + 'color: #fff;}'
  629. + '#app_address_prompt {'
  630. + 'position: absolute;'
  631. + 'z-index: 999999;'
  632. + 'padding: 3px 7px;'
  633. + 'line-height: normal;'
  634. + 'background-color: #005ea7;'
  635. + 'color: #ffffff;'
  636. + 'opacity: 0;'
  637. + '-webkit-transition: opacity .3s ease-out;'
  638. + '-moz-transition: opacity .3s ease-out;'
  639. + '-ms-transition: opacity .3s ease-out;'
  640. + '-o-transition: opacity .3s ease-out;'
  641. + 'transition: opacity .3s ease-out;}';
  642. })(jQuery, window, document);