城市插件的应用

 

在我们开发项目的过程中，往往会遇到一些要输入城市或地区来查询的文本，

而如果这些信息通过手动输入的话。就会让用户有不好的体验。所以呢？我们就需

要一个封装一个方法，但是呢如果要自己做一个选择城市或地区的方法，就会很消

耗时间。如果客户有时间上的限制，而你达不到客户的需求。所以呢，为了让客户使

用的方便，我们就要去合适的去使用插件，这样就可以提高效率。

下面我就那一个输入城市的插件来说一下，如何去引用插件。首先，我们的去下

载封装方法的脚本，下面是我下载的一个脚本：

下载完脚本以后，把脚本文件添加到开发的项目文件里面，

文件添加完成之后，我们就进行引入，如下：

当插件的脚本引入页面里面的时候，我们就可以根据它里面的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元素的时候，它就是弹出来一个

城市选择的窗口，点击选择城市的时候，在城市选择完之后，在窗口又会自动关

闭。使用插件的好处有很多，它可以减少你的代码量，让你用最少的代码，把你所

急需的功能做出来。