在我们开发项目的过程中,往往会遇到一些要输入城市或地区来查询的文本,
而如果这些信息通过手动输入的话。就会让用户有不好的体验。所以呢?我们就需
要一个封装一个方法,但是呢如果要自己做一个选择城市或地区的方法,就会很消
耗时间。如果客户有时间上的限制,而你达不到客户的需求。所以呢,为了让客户使
用的方便,我们就要去合适的去使用插件,这样就可以提高效率。
下面我就那一个输入城市的插件来说一下,如何去引用插件。首先,我们的去下
载封装方法的脚本,下面是我下载的一个脚本:
下载完脚本以后,把脚本文件添加到开发的项目文件里面,
文件添加完成之后,我们就进行引入,如下:
当插件的脚本引入页面里面的时候,我们就可以根据它里面的js的方法,来进行对插件
的使用。首先,找到需要选择城市的那个input文本框,给它一个类或者一个ID,在这里
我给它的是一个类,如下:
给完类或者ID后,我们通过js代码来调用这个封装的方法,调用这个方法的方式很简单,它往往只需要一两句代码就可以了,下面是调用的代码:
<script>
$('.search').kuCity();
$('.search3').kuCity();
</script>
代码的调用可以使用类,也可以使用ID,一般封装的方法,调用它的代码都是固定的,就像这个插件的方法,只需要通过类和ID去调用.kuCity()的方法。而这些方法如何封装的呢?下面是调用这个方法的一段代码:
$.fn.kuCity = function(options) {
var target = $(this);
target.on('focus', function(e) {
var top = $(this).offset().top + $(this).outerHeight(),
left = $(this).offset().left;
kucity = kucity ? kucity : new KuCity(target);
kucity.target = $(e.target);
kucity.init();
kucity.container.show().offset({
'top': top + 7,
'left': left
});
kucity.triggleShow(true);
kucity.resultct.on('click', 'li', function() {
kucity.target.val($(this).find('.name').text());
kucity.triggleShow('all');
})
})
下面是插件引用成功的效果图:
当我们的鼠标点击到需要输入城市的那个input元素的时候,它就是弹出来一个
城市选择的窗口,点击选择城市的时候,在城市选择完之后,在窗口又会自动关
闭。使用插件的好处有很多,它可以减少你的代码量,让你用最少的代码,把你所
急需的功能做出来。