概述:

  遇到制作一个html5界面,需要选择年月日,其实这个功能很常用。一般我们都是网上找,之前也没有收藏一个自己常用的,今天发现一个不错的库。特此记录一下使用过程,以便以后遇到了方面查阅。

1.官方网站:https://www.mobiscroll.com/

  首先需要注册一个账户,否则不能下载。这个库包含了很多控件,用法官方网站上也都有现成的demo,这里我们只说明一下日期选择控件的使用过程,其他控件的使用过程也是类似的。

2.使用过程

①在页面中引入需要的js和css,其中js只有一个文件,css也只有一个文件,我下载的版本是:3.0.0-beta2,引入的文件是这样的:

<link href="css/mobiscroll.custom-3.0.0-beta2.min.css" rel="stylesheet" type="text/css" />
<script src="js/mobiscroll.custom-3.0.0-beta2.min.js" type="text/javascript"></script>

②添加input标签

<input id="birthday_input" class="birthday" type="text" name="birthday" placeholder="生日" />

③载入控件

// -----------------------------------------------------------------
// 初始化日期选择控件
$('#birthday_input').mobiscroll().date({
theme: 'ios',
display: 'bottom',
dateFormat: 'yy-mm-dd',
showScrollArrows: false,
setText: '确定',
cancelText: '取消',
dayText: '日', monthText: '月', yearText: '年'
});

上面date()传入的是一个对象,包含了用户自定义的配置,这些配置官方都有说明,这里就不赘述。

至此,改控件已经可以使用,点击该input元素,日期选择控件便会弹出,这里注意一点,月份的显示是英文的,如果想改成中文,可以就改mobiscroll.custom-3.0.0-beta2.min.js里面的源代码,搜索一下就能找到。

最后展示一下效果:

HTML5 UI 控件Mobiscroll的使用(年月日三级联动)的更多相关文章

  1. 推荐一款移动端的web UI控件 -- mobiscroll

    用mobiscroll 可实现ios系统自带的选择器控件效果,支持几乎所有的移动平台(iOS, Android, BlackBerry, Windows Phone 8, Amazon Kindle) ...

  2. 为什么我们不喜欢用富UI控件

    我们对于理解一般意义的抽象关系并没有问题,但如第一部分使用Entity Framework 时说明的,事实恰好相反.我们还喜欢在交付应用程序时利用抽象关系,比如使用Azure等云服务.在这两种情况下, ...

  3. ANDROID L——Material Design详解(UI控件)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...

  4. WinForm/Silverlight多线程编程中如何更新UI控件的值

    单线程的winfom程序中,设置一个控件的值是很easy的事情,直接 this.TextBox1.value = "Hello World!";就搞定了,但是如果在一个新线程中这么 ...

  5. 富客户端 wpf, Winform 多线程更新UI控件

    前言 在富客户端的app中,如果在主线程中运行一些长时间的任务,那么应用程序的UI就不能正常相应.因为主线程要负责消息循环,相应鼠标等事件还有展现UI. 因此我们可以开启一个线程来格外处理需要长时间的 ...

  6. UI控件(复习一下)

    如何修改控件状态• 可见,确实需要经常修改控件状态• 那如何去修改控件的状态呢?方法很简单➢ 每一个UI控件都是一个对象➢ 修改UI控件的状态,其实就是修改控件对象的属性➢ 比如修改UILabel显示 ...

  7. IOS学习资源收集--开发UI控件相关

    收集的一些本人了解过的iOS开发UI控件相关的代码资源(本文持续补充更新) 内容大纲: 1.本人在github上也上传了我分装好的一些可重复利用的UI控件 2.计时相关的自定义UILabel控件 正文 ...

  8. 《深入理解Windows Phone 8.1 UI控件编程》基于最新的Runtime框架

    <深入理解Windows Phone 8.1 UI控件编程>本书基于最新的Windows Phone 8.1 Runtime SDK编写,全面深入地论述了最酷的UI编程技术:实现复杂炫酷的 ...

  9. AppleWatch___学习笔记(二)UI布局和UI控件

    1.UI布局 直接开发,你会发现Apple Watch并不支持AutoLayout,WatchKit里有个类叫做WKInterfaceGroup,乍一看像是UIView,但是这货其实是用来布局的.从 ...

随机推荐

  1. 教你用DrawLayout 实现Android 侧滑菜单

    现在的APP越来越注重用户体验,百度视频客户端有一个特效还是挺吸引人的,在主界面手指向右滑动,就可以将菜单展示出来,而主界面会被隐藏大部分,但是仍有左侧的一小部分同菜单一起展示.类似的还有天天动听,人 ...

  2. Gradle设置代理

    在本地仓库路径下(如果没有修改的话默认C:\Users\用户名\.gradle),或者项目下,新建一个文件gradle.properties systemProp.http.proxyHost=网址 ...

  3. angular 如何使用第三方组件ng-bootstrap

    1.在你的项目中以下指令    npm install --save @ng-bootstrap/ng-bootstrap 安装完成会显示 + @ng-bootstrap/ng-bootstrap@1 ...

  4. 数据结构之队列(Python 版)

    数据结构之队列(Python 版) 队列的特点:先进先出(FIFO) 使用链表技术实现 使用单链表技术,在表首尾两端分别加入指针,就很容易实现队列类. 使用顺序表list实现 # 队列类的实现 cla ...

  5. image配准,发布geoserver服务

    1.arcmap配准:注:png只保留需要显示范围,多余部分删除,,配准后再进行栅格裁剪(为了去除偏移后出现的NoData值) 2.导出tif:注:NoData值设置,一般为256(有时候经过裁剪会默 ...

  6. 如何从TFS(Visual Studio Team Foundation Server)映射下载本地文件夹

    1.连接tfs项目 首先打开vs2017 ——>工具栏 中的   团队——> 选择团队的管理链接 2.选择管理工作区 显示管理工作区的弹窗,点击 编辑  显示弹窗,选择本地文件夹(即要保存 ...

  7. HTML5练习2

    1.邮箱注册网页 主要代码: <!doctype html> <html> <meta charset="utf-8"> <title&g ...

  8. day1作业二:多级菜单操作(函数实现)

    作业二:多级菜单 (1)三级菜单 (2)可以次选择进入各子菜单 (3)所需新知识点:列表.字典 要求:输入back返回上一层,输入quit退出整个程序 本示例的三级菜单是一个yaml文件格式,格式如下 ...

  9. scrapy中对于item的把控

    其实很简单,就是想要存储的位置发生改变.直接看例子,然后触类旁通. 以大众点评 评论的内容为例 ,位置:http://www.dianping.com/shop/77489519/review_mor ...

  10. 最短路算法 -- SPFA模板

    一.算法步骤 建立一个队列,初始时队列里只有起始点,再建立一个数组记录起始点到所有点的最短路径(该数组的初始值要赋为极大值,该点到它本身的路径赋为0,下面的模板中该数组为dist[]).然后执行松弛操 ...