手机上的地区控件,树控件
github下载地址:
https://github.com/mrxu0/Mobile-Tree-Area/tree/master
效果图(我相信一部分人是无图不往下读的)
所谓无需求不功能,公司的地区控件采用的网上的一个LArea的手机控件,但是效果并不理想,在手机里死卡死卡的,本想优化一下,但是我从渲染入手发现人家处理的还不错,剩下的就是算法了,不过我发现让现在我整算法有点头大而且样式跟原生样式不一样,于是我就萌生了重新写一个地区控件的想法。
给你们看一下LArea插件的效果图,需要这种效果的可以用这个插件:
1.先有骨架后有样式
在这里给京东做个广告,我的骨架,样式参考的京东的。平时我用的购物软件是京东的,所以对京东了解比较多,做这个插件我就在想样式怎么写,就稀里糊涂的想到了京东的地区插件样式好像跟我这个差不多。找到京东的手机网页,使用谷歌浏览器控制台打开选中手机模式,选则元素查看结构,查看样式。里面的样式写的都很简单,相信你也能够看懂。看懂了就直接复制,一下都是我自己的样式,结构图
结构是不是很清晰
1.先有样式后有功能
写这个样式没什么麻烦的,不复制自己写也用不了多少个功夫。重点是写的时候要注意哪些东西:
1.使苹果手机丝般顺滑
-webkit-overflow-scrolling: touch;
如果你使用了overflow样式,一定要紧接着加上上面的代码,否则测试,产品都会找上门(要是公司没有测试和产品,估计老板就有可能找上门了)
2.有趣的样式
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
效果等同于:
position: fixed;
top: 0;
left: 0;
width:100%;
height:100%;
3.你最期待的功能,(我知道自己写的并不是很好,所以希望大家少喷多指点)
功能就不能抄袭了,感觉自己肯定没有人家京东的大拿写的好,我是很想膜拜一下,感觉这样有比较的写代码成长肯定超快。
先给大家补充一波知识点,确保小白别看的云里雾里的,大拿直接进入下一环节。
1.addEventListener:事件监听
包含俩个参数,参数1:什么事件,可填写click,change,mousemove等等;参数2:函数,当监听到对应的操作的时候就会触发。如:
document.getElementById("local-panel-body-list").addEventListener("click",function (e){}
括号里面的e不懂得可以参考这篇文章,不过需要跨域:看文戳我
2.this,prototype.这里不会讲的太细,只大概让不懂的人能够了解作用即可
整个插件都是基于构造函数的,而构造函数都会有自己的作用域,在自己的作用域中都有一个this对象,这个this对象是指向构造函数原型的。
prototype是这个构造函数的原型,可以往这上面添加函数。函数这里面能够引用this,在其他的ptototype定义的函数下可以通过this引用这个函数
但是要注意,如果潜逃了不属于构造函数原型的函数就会改变this的指向。例如代码中clickElement中的一个个监听事件,我都先初始化了var that=this;想深入了解的可以看这篇文章:戳我看好文
3.||和&&的妙用
你可能知道||和&&的含义和用法,但你可能没有这么用过
true||console.log("hello world");//不打印
false||console.log("hello world");//打印
true&&console.log("hello world");//打印
false&&console.log("hello world");//不打印
//代码中有很多地方用到了这个特性
this.tree=params.tree||3;//初始默认值
//如果你将&&俩边的表达式位置替换将会报错
if(this.event&&this.event.target.parentNode.getAttribute("value")==this.data[i].id)
4.三元运算符
作用等同于if else,但是比他要简洁的多。如:
//先判断that.name存不存在,如果存在就赋值,不存在就不用赋值,这里好像使用||更合适一些。哈哈哈
that.name?document.getElementById(that.name).value=arrName.join(","):"";
//换成if else 就这样写,是不是特别麻烦。
if(that.name){
return document.getElementById(that.name).value=arrName.join(",")
}else{
return "";
}
我写这个插件的过程完全就是莽夫进村一般,没有先设身处地的规划好。何为莽夫进村呢,就是看着想到哪个功能实现哪个功能((,仅为第一个版本,没有必要本文后期应该不会在更新))。如今让我讲如果我还按照我做的思路讲估计能写好几万字。希望你们别跟我一样,最好先规划好了,再下手
主要方法有4个,
- InitAndChangeData:初始化数据和改变数据方法
- createFragment:创建数据列表DOM片段
- clickElement:监听单机操作
- createLi:创建tabs方法
其中最麻烦的方法是clickElement,因为他掌管的一切用户的交互
整个插件的使用简单概括就是:
我需要使用地区控件所以我要拿一个控件过来(new 一个Location),发现用户动作触发createFragment上挂在的监听。用户选择了数据列表,我需要修改数据此时就调用InitAndChangeData方法和createLi。
使用 步骤:
1.引入文件
<link rel="stylesheet" href="plugin/Mobile-Tree-Area.css">
<script src="plugin/Mobile-Tree-Area.js"></script>
2.创建容器:
<input type="text" id="name" readonly>
<input type="hidden" id="id" readonly>
上面的用来展示你选中的内容,下面的用来承载选中内容的ID
3.生成实例
new Location({
id:"id",//存放选中内容的ID的容器的id,可不填
name:"name",//展示选中内容的id
tree:3,//你想让用户选到几层,可不填,不填默认为3
data:LAreaData//初始化数据格式为:[{id:1,name:2,child[{id:1,name:2}]},....]
});