Coder Social home page Coder Social logo

larea's Introduction

LArea v1.72移动端城市选择控件

纯原生js的移动端城市选择插件,不依赖任何库 ##用法 在html页面中引入input标签,写法如下:

...
<input id="demo1" type="text" readonly="" name="input_area" placeholder="城市选择特效"/>
...

将样式文件引入到页面中:

...
 <link rel="stylesheet" href="css/LArea.css">
...

同时引入js文件到页面中:

...
<script src="js/LArea.js"></script>
...

初始化插件:

...
var area = new LArea();
area.init({
    'trigger': '#demo1',//触发选择控件的文本框,同时选择完毕后name属性输出到该位置
    'valueTo':'#value1',//选择完毕后id属性输出到该位置
    'keys':{id:'id',name:'name'},//绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
    'type':1,//数据源类型
    'data':LAreaData//数据源
});
...

自定义数据源结构参考:

//初始化type=1时,参考下列数据源
var LAreaData1 = [{
         "id": "2",
         "name": "一级",
         "child": [{
              "id": "21",
              "name": "二级1",
              "child": [{
                  "id": "211",
                  "name": "三级1"
             }, {
                 "id": "212",
                 "name": "三级2"
             }, {
                 "id": "213",
                 "name": "三级3"
             }]
         }, {
             "id": "22",
             "name": "二级2"
         }, {
             "id": "23",
             "name": "二级3"
         }]
     }];
     
//初始化type=2时,参考下列数据源
var provs_data = [{
    "text": "省",
    "value": "1"
}, {
    "text": "省",
    "value": "2"
}];
var citys_data = {
    "1": [{
        "text": "市",
        "value": "11"
    }, {
        "text": "市",
        "value": "12"
    }],
    "2": [{
        "text": "市",
        "value": "21"
    }, {
        "text": "市",
        "value": "22"
    }]
};
var dists_data = {
    "11": [{
        "text": "区",
        "value": "111"
    }, {
        "text": "区",
        "value": "112"
    }],
    "21": [{
        "text": "区",
        "value": "211"
    }, {
        "text": "区",
        "value": "212"
    }]
};

代码会持续优化,如果喜欢望赏颗星。

larea's People

Contributors

xfhxbb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

larea's Issues

无限循环报错

image
选择地址框弹出鼠标点击非选中的地址,会无限循环报错

建议确定后增加回调

建议确定后增加回调函数,数据能否直接引用json文件
area1.init({
'data': 'js/AreaData.json' ,//数据源
callback:function(id,value)(){}
});

楼主报错n多

在用户知识单击时,不会产生记录target["new_"+target.id]跟target["n_t"+target.id],及不会执行touchmove事件,导致错误

您好,在用插件的时候遇到个问你题..求解决.....比较着急

"id": "2",
"name": "东二区",
"units": [
{
"id": "1008",
"name": "7号楼",
"units": [
{
"id": "5020",
"name": "1单元",
"select":"false"
}, {
"id": "5021",
"name": "2单元",
"select":"false"
}, {

                "id": "5022",
                "name": "3单元",
                "select":"false"
            }]
        },

这代码里面有两个units是一样的才能进行联动,但是我现在想要把第一个units改成buildings,第二个还是用units....在js里面要如何改????????

性能问题

finish后,不应该 document.body.removeChild(_self.gearArea);
_self.gearArea=null;
应该判断,页面中无gearArea的话popupArea方法,有gearArea用display:none,来控制选择控件的显示与否。

两个bug

bug1.触发点击事件的时候持续报错
bug2.滚动没有结束的时候点击取消持续报错

默认值没有选中

input value="默认值",另一个 input value="默认值ID";点击弹出选择层,默认值没有选中,选中的是其他值

移动端呼出时会出现按键的情况

虽然input设置了readonly;但是还是会呼出按键;所以把呼出的dom换成span或者其他的文本标签,然后修改finish函数中_self.trigger.value = provinceText + ((cityText)?(',' + cityText):(''))+ ((countyText)?(',' + countyText):(''));_self.trigger.inneHTML = provinceText + ((cityText)?(',' + cityText):(''))+ ((countyText)?(',' + countyText):(''));
这样就避免了呼出时按键出现的情况

Uncaught TypeError: Cannot read property 'nodeType' of undefined

中间滑动 右面会跟着联动....快速滑动右面会有这个错误,求解
Uncaught TypeError: Cannot read property 'nodeType' of undefined
at attr (jquery-1.11.3.js:7946)
at jQuery.access (jquery-1.11.3.js:4182)
at jQuery.fn.init.attr (jquery-1.11.3.js:7933)
at LArea.js:359

andriod端选中项目上下没有渐变遮罩的效果

andriod端选中项目上下没有渐变遮罩的效果 -webkit-mask好像没有生效,andriod4.2到andriod5.1的所以pad都不行。但是在chorme里面模拟的移动端是有遮罩效果的。
联系方式qq:281886917

flag需要默认值

/**

  • LArea移动端城市选择控件
  • version:1.7.2
  • author:黄磊
  • git:https://github.com/xfhxbb/LArea
  • Copyright 2016
  • Licensed under MIT
  • 最近修改于: 2016-6-12 16:47:41
    */

185行: 需要调整为
var flag = (target["new_" + target.id] - target["old_" + target.id]) / (target["n_t_" + target.id] - target["o_t_" + target.id]) || 0;

点击最后一列,一直报错

在滑块弹出后如果直接在最后一列的地址上单击就会不停的报错
希望这个问题能得到解决
LArea.js:285 Uncaught TypeError: Cannot read property 'id' of undefined

常常报错

1112
LArea.js:277 Uncaught TypeError: Cannot read property 'querySelectorAll' of null

LArea.js:334 Uncaught TypeError: Cannot read property 'textContent' of undefined

20LArea.js:285 Uncaught TypeError: Cannot read property 'id' of undefined
怎么破?

关于使用选择之后的监听事件

你好,我遇到一个问题,我需要在选择地址之后能监控到该文本框发生了变化,但是常规的一些方法change onchange都不能用,因为他们需要失去焦点才会触发。请问我应该怎么监控该选择器呗重新选择了 ,多谢。
找到解决方法了
$('input[name="demo2"]').bind('input propertychange', function() {
alert(123123);
});

可以监控通过js改变的value值 。 谢谢。

滑动时点击确定报错

Uncaught TypeError: Cannot read property 'querySelectorAll' of null
at MobileArea.setGearTooth (LArea.js:277)
at setGear (LArea.js:244)
at LArea.js:229

用下来的几个建议

建议调用方式可以如下:
var area=new LArea();
area.config(options);
//执行事件再调用,以JQ语法举例:
$(".a").click(function(){
//执行请求获得城市数据data
......
area.init(data,function(res){
//回调在点确定的时候触发,res里返回选中城市的id和name
});
});
config可以灵活配置一些样式或者为以后添加功能预留,加入回调可以灵活的使用在所有场景,城市的数据一般从服务器获取,我觉得没必要写在插件里啦。还有最好能在config里配置接口的格式,都写死了id,name,child就不灵活啦。还有要是可以第一次init的时候滚到当前城市就好了,这个建议可以在config里或者init的时候传入当前城市添加。

最后,谢谢写了这个插件。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.