基于jquery的城市选择插件
城市选择插件的难度不是很大,主要是对dom节点的操作。而我写的这个插件相对功能比较简答,没有加入省市联动。
上代码好了,参照代码的注释应该比较好理解。
/*
*基于jquery的城市选择插件
*author:youziclub
*2015-4-22
*/
;(function($){
$.fn.city=function(options){
// 城市信息
var nav=['热门','A-G','H-L','M-T','W-Z','其他'];
var cityName=["上海,北京,广州,昆明,西安,成都,深圳,厦门,乌鲁木齐,南京,重庆,杭州,大连,长沙,海口,哈尔滨,青岛,沈阳,三亚,济南,武汉,郑州,贵阳,南宁,福州,天津,长春,石家庄,太原,兰州",
"安庆,阿勒泰,安康,鞍山,安顺,安阳,阿克苏,包头,蚌埠,北海,北京,百色,保山,博乐,长治,长春,长海,常州,昌都,朝阳,潮州,常德,长白山,成都,重庆,长沙,赤峰,大同,大连,达县,大足,东营,大庆,丹东,大理,敦煌,鄂尔多斯,恩施,二连浩特,佛山,福州,阜阳,富蕴,贵阳,桂林,广州,广元,赣州,格尔木,广汉,固原",
"呼和浩特,哈密,黑河,海拉尔,哈尔滨,海口,衡阳,黄山,杭州,邯郸,合肥,黄龙,汉中,和田,惠州,吉安,吉林,酒泉,鸡西,晋江,锦州,景德镇,嘉峪关,井冈山,济宁,九江,佳木斯,济南,喀什,昆明,康定,克拉玛依,库尔勒,喀纳斯,库车,兰州,洛阳,丽江,梁平,荔波,庐山,林芝,柳州,泸州,连云港,黎平,连城,拉萨,临沧,临沂",
"牡丹江,芒市,满洲里,绵阳,梅县,漠河,南京,南充,南宁,南阳,南通,那拉提,南昌,宁波,攀枝花,衢州,秦皇岛,庆阳,且末,齐齐哈尔,青岛,汕头,深圳,石家庄,三亚,沈阳,上海,思茅,鄯善,韶关,沙市,苏州,唐山,铜仁,通化,塔城,腾冲,台州,天水,天津,通辽,太原,吐鲁番",
"威海,武汉,梧州,文山,无锡,潍坊,武夷山,乌兰浩特,温州,乌鲁木齐,芜湖,万州,乌海,兴义,西昌,厦门,香格里拉,西安,襄阳,西宁,锡林浩特,西双版纳,徐州,兴城,兴宁,邢台,义乌,永州,榆林,延安,运城,烟台,银川,宜昌,宜宾,盐城,延吉,玉树,伊宁,伊春,珠海,昭通,张家界,舟山,郑州,中卫,芷江,湛江,中甸,遵义",
"香港,澳门,台湾"]; var getCityName = function(arr,index){
var cityList = arr[index].split(',');
for(var i=0,len=cityList.length; i<len; i++){
$($(".city-catogory")[index]).append($('<a></a>',{"href" : "javascript: void(0);", "class" : "city-name", "title" : cityList[i], "text" : cityList[i]}));
}
}; // 是否支持input输入
if(options.inputDisabled){
$(options.inputText).attr("readonly" , "readonly");
}
// dom节点操作
this.append($("<div></div>",{"class" : "city-choose","style" : "display: none;"}));
$(".city-choose").append($("<ul></ul>",{"class" : "nav-ul clearfix"}));
$(".city-choose").append($("<ul></ul>",{"class" : "cato-ul"}));
for(var i=0,len=nav.length; i<len; i++){
$(".nav-ul").append($("<li></li>",{"class" : "city-nav", "text" : nav[i]}));
$(".cato-ul").append($("<li></li>",{"class" : "city-catogory"}));
$(".city-catogory").css('display','none');
} $($(".city-catogory")[0]).css("display" , "block");//当点击文本框时显示热门城市名称列表
var cityChoose = $($(".city-choose")[0]);//定义变量cityChoose和cityNav,加快查找效率
var cityNav=$(".city-nav");
// 点击文本输入框显示选择器
options.inputText.bind("focus",function(){ cityChoose.css("display","block");});
// 为选定标签设定样式
$(cityNav[0]).addClass("current"); for(var i=0,len=cityNav.length; i<len; i++){
cityNav[i].index = i;//或采用闭包的方式
getCityName(cityName,i);//调用getCityName方法插入城市名称 $(cityNav[i]).bind("click",function(){
cityNav.removeClass("current");
$(cityNav[this.index]).addClass("current");
$(".city-catogory").css("display", "none")
$($(".city-catogory")[this.index]).css("display", "block");
});
}
// 获取具体城市的a元素并绑定相应方法
var cityList = $(".city-name");
for(var i=0,len=cityList.length; i<len; i++){
cityList[i].index = i;
$(cityList[i]).bind("click",function(){
$(options.inputText).val($(cityList[this.index]).text());
cityChoose.css("display","none");
});
}
// 点击除选择器外的其他地方选择器隐藏(该处写的很糟糕,期待后面能想到更好的方式实现)
$(document.body).bind("click",function(e){
var events = e||window.event;
var targets = events.srcElement || events.target;
var targetClass = targets.className;
if(!((targets.id == "city-input")||(targetClass == "nav-ul clearfix"||targetClass == "city-nav current"||targetClass == "city-choose"||targetClass == "cato-ul"||targetClass == "city-catogory"))){
cityChoose.css("display","none");
}
}); }; })(jQuery);
调用:
<div id="city">
<label for="city">城市选择:<input id="city-input" type="text"></label>
</div>
<script type="text/javascript">
$(function(){
var inputText = $("#city input");
// inputText表示input元素,inputDisabled表示是否支持输入:true不支持,false支持
$("#city").city({"inputText" : inputText, "inputDisabled" : true});
});
10 </script>
源文件:https://github.com/Runlikewind/front-end-test/tree/master/demo/city
基于jquery的城市选择插件的更多相关文章
- 移动端城市选择JavaScript插件(基于WG的城市选择插件的修改版本)
周末的时候趁着一次机会,拿WG(博客)开发的城市选择插件改了一个移动端可以直接用的城市选择插件. 原版插件是基于原声JavaScript写的,在此先感谢作者. 我做的只是依照肯德基注册会员的页面的交互 ...
- 纯原生js移动端城市选择插件
接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...
- 源码来袭!!!基于jquery的ajax分页插件(demo+源码)
前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...
- 一款基于jQuery的QQ表情插件
我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您 ...
- 10 个基于 jQuery 的 Web 交互插件推荐
英文原文:10 jQuery for Web Interaction Plugins “用户交互”在现代的 Web 设计中占据了很大比例,这是互联网产品不可或缺的关键,对 Web 设计师也提出了更高的 ...
- 出位的template.js 基于jquery的模板渲染插件
找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...
- 基于jQuery全屏相册插件zoomVisualizer
基于jQuery全屏相册插件zoomVisualizer.这是一款基于jquery ui实现的相册插件,支持隐藏显示相册缩略图,支持左右箭头切换图片,支持放大缩及缩小图片.效果图如下: 在线预览 ...
- 基于jQuery的数字键盘插件
有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要 ...
- 基于jquery的ui选择之路
选定: 主框架:jqueryUi tree:ztree grid:jqGrid layout:jquery.layout 原由: 还有其他demo,ajax实现等参看连接: 正在做的一个项目选择jqu ...
随机推荐
- 真正从零开始,TensorFlow详细安装入门图文教程!
本文转载地址:https://www.leiphone.com/news/201606/ORlQ7uK3TIW8xVGF.html AI这个概念好像突然就火起来了,年初大比分战胜李世石的AlphaGo ...
- Oracle问题之ORA-01609、ORA-00362
Oracle问题之ORA-01609: 日志 4 是线程 1 的当前日志 - 无法删除成员 Oracle问题之ORA-00362: 要求输入成员以组成组 4 中的有效日志文件
- Java Servlet API中文说明文档
Java Servlet API中文说明文档 目 录 1.... Servet资料 1.1 绪言 1.2 谁需要读这份文档 1.3 Java Servlet API的组成 ...
- Android 基础:常用布局 介绍 & 使用(附 属性查询)
Android 基础:常用布局 介绍 & 使用(附 属性查询) 前言 在 Android开发中,绘制UI时常需各种布局 今天,我将全面介绍Android开发中最常用的五大布局 含 Andr ...
- esp8266 终于装上固件了!半个月了!开始进军简单粗暴的lua语言!!
第一次测试2017-10-2720:33:33 感谢这位大神的汇总资料太详细了 http://www.cnblogs.com/yangfengwu/p/7524326.html --first tes ...
- python下划线作用初识
单下划线(例:_textchar) 以单下划线做前缀的名称指定了这个名称是"私有的".在 有些 导入import * 的场景中,下一个使用你代码的人(或者你本人)会明白这个名称仅内 ...
- 谈谈JAVA程序的反编译
如今JAVA语言在全世界范围正如火如荼般的流行,它广范地应用在INTERNET的数据库.多媒体.CGI.及动态网页的制作方面.1999年在美国对JAVA程序员的需求量首次超过C++! 最近分析一些 ...
- 使用非java代码编程
使用非JAVA代码 JAVA语言及其标准API(应用程序编程接口)应付应用程序的编写已绰绰有余.但在某些情况下,还是必须使用非JAVA编码.例如,我们有时要访问操作系统的专用特性,与特殊的硬件 ...
- 前端工程构建工具FIS3
FIS3 是面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题. 一.安装 全局安装fis3 ...
- MS SQL 批量给存储过程/函数授权
在工作当中遇到一个类似这样的问题:要对数据库账户的权限进行清理.设置,其中有一个用户Test,只能拥有数据库MyAssistant的DML(更新.插入.删除等)操作权限,另外拥有执行数据库存储过程.函 ...