Code Monkey home page Code Monkey logo

mobile-select-area's Introduction

mobile-select-area

手机联动选择地区 效果图如下:

mobile-select-area

mobile-select-area

例子见[DEMO] (http://tianxiangbing.github.io/mobile-select-area/)

或 (http://www.lovewebgames.com/jsmodule/mobile-select-area.html)

npm install mobile-select-area --save-dev

用法

node http.js

或者

打开start.bat

注:依赖于dialog

<!DOCTYPE>
<html>
	<head>
		<title>选择日期</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" type="text/css" href="../dist/mobile-select-area.css">
		<link rel="stylesheet" type="text/css" href="../dist/dialog.min.css">
		<script type="text/javascript" src="../dist/zepto.js"></script>
		<script type="text/javascript" src="../dist/dialog.js"></script>
		<script type="text/javascript" src="../dist/mobile-select-area.js"></script>
	</head>
	<body>
		<input type="text" id="txt_area" value="浙江省 杭州市 滨江区"/>
		<input type="hidden" id="hd_area" value="1,1,1"/>
		<script>
		var selectArea = new MobileSelectArea();
		selectArea.init({trigger:$('#txt_area'),value:$('#hd_area').val(),data:'data.json'});
		</script>
	</body>
</html>

属性及方法

position:'bottom'

当这个值为bottom时,弹层固定显示在底部,不传时居中显示,默认居中.

default:0||1

0为空,true时默认选中第一项,默认1

trigger:

触发弹窗的DOM元素 ,可以是input或其他

value:

初始值,

level: int

级别数,默认是3级的,省、市、区。

separator: ,

id值分隔符

eventName:tap|click

触发事件名称,默认click,使用zeptojs的可以用tap事件

data:

当data为json对象时可以直接解析,此时直接接收数组
当data为string发送ajax请求后返回json,格式如下:
{
	"data": [{
		"id": 1,
		"name": "浙江省",
		"child": [{
			"id": "1",
			"name": "杭州市",
			"child": [{
				"id": 1,
				"name": "滨江区"
			}]
		}]
	}, {
		"id": 2,
		"name": "江苏省",
		"child": [{
			"id": "1",
			"name": "南京",
			"child": [{
				"id": 1,
				"name": "解放区"
			}]
		}]
	}, {
		"id": 3,
		"name": "湖北省"
	}]
}

show:function()

直接显示弹窗的方法
selectArea2.show();

callback:function(scroller,text,value)

第一个是容器,第二个是选中后的text值,第三个参数是选中后的id。
并且this指向当前对象。
选中后的回调,默认有填充trigger的value值,以及赋值它后面紧跟着的hidden的value值,以逗号分隔id,空格分隔文字

cancelCallback(scroller,text,value)

点击取消时的回调,与`callback`参数相同,`this`指向当前对象

autoHide : bool

点击遮罩层时退出窗口,与取消同样,默认为true.

mobile-select-area's People

Contributors

tianxiangbing avatar ximige 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

mobile-select-area's Issues

webpack还有几个问题

package.json中main设置不正确参考jquery
dist文件未更新
我现在是用的webpack提供的resolve映射的js文件

  resolve: {
    alias: {
      dialog: "dialog/dist/dialog",
      "mobile-select-area": "mobile-select-area/dist/mobile-select-area"
    }
  }

但是这样写了后对css的引用就会变成

require("mobile-select-area/../../dist/mobile-select-area.css")

level参数不生效

使用level增加到4级,level得到的参数改变了,页面展示没有生成4级

不能分级获得数据

现在似乎还做不到选择完一级数据后通过ajax获得下一级数据。希望能增加

怎样使用zepto?

首先谢谢作者。
我在使用时的过程中,需要用zepto来,实现三级联动。

然后:

`

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>新增收货地址</title>
	<link rel="stylesheet" href="../plugins/mobileSelect/mobile-select-area.css" />
</head>

<body class="bg-blank">
	

	<input type="text" id="txt_area"  placeholder="所在城市" style="padding-left: 0;" />

	<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://unpkg.com/[email protected]/src/dialog.js"></script>
	<script type="text/javascript" src="https://unpkg.com/[email protected]/src/mobile-select-area.js"></script>-->

//注释以上的线上链接的话就没有问题

	<script src="../plugins/libs/zepto.min.js"></script>
	<script type="text/javascript" src="../plugins/mobileSelect/dialog.js" ></script>
	<script type="text/javascript" src="../plugins/mobileSelect/mobile-select-area.js" ></script>
	
</body>
` 文件链接顺序大概如图所示,我的需求是基于zepto 实现一个三级联动的选择器。

使用 zepto和本地的文件就会报错。使用JQ 就没有报错。我现在应该怎么做,才能让它用zepto 跑起来。

背景滑动

在弹出层上操作 背景层也会滑动哦.还有显示数量可以调吗

请添加webpack支持

问题1 package.config中没有main设置,直接require("mobile-select-area")找不到模块
问题2 dialog的package.config中没有main设置导致 mobile-select-area require("dialog") 找不到模块
问题3 mobile-select-area 中对jquery的引用是require("$")而npm的jquery包需要require("jquery")

大神,有bug

在部分chrome以及基于chrome的第三方浏览器下选择地址的触摸滚动事件不会触发,问题最先出现在 chrome 47.0.2526.73 m (64-bit)PC版的手机调试工具,后续测了部分第三方浏览器。火狐移动版,ie移动版都能正常使用。但是为什么大神的那些demo在同一个chrome却能运行良好呢??神奇

新发现,似乎因为amd规范的原因,不能随意更换jquery版本?

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.