我们在进行手机端网页开发的时候,往往电脑上那些控件就不再适用了,不是很小看不清,就是风格不合适.
下面就推荐一个适合手机端网页开发适用的js插件 ,制作ios风格的日历控件
mobiscroll.all.min.js
设置ios风格的 日历控件
html 页面:
<ul class="title-list">
<li style="overflow:hidden;">
<span style="margin-right:20px; float:left;">生 日</span>
<div style="background:url(static/images/wechathelper/txl_script.png) no-repeat 0px -32px; background-size:18px; padding-left:20px; float:left;">
<input id="birthday" name="birthday" placeholder="点击输入生日" class="txt formOptions premium" validata="required" type="text" value="" style="font-family:'微软雅黑';"/>
</div>
</li>
</ul>
导入mobiscroll.all.min.js 及 birthday_component.js 插件(代码连接见文章最后.)
mobiscroll.all.min.js 是基础 ,birthday_component.js 是使我们的html代码 和 mobiscroll.all.min.js 关联起来的js 代码 .
在birthday_component.js 中设置各种详细信息,再将id="birthday" 的input 组件 挂上 日历控件 :$("#birthday").mobiscroll(optDate).date(optDate);
mobiscroll.all.min.js的地址:http://download.csdn.net/detail/yubin2009m/9454657
birthday_component.js 的地址 :http://download.csdn.net/detail/yubin2009m/9454664