framework7 picker 具体使用
官网地址:https://framework7.io/docs/picker.html#dom-events
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#2196f3">
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
<title></title>
//css引用样式
<link rel="stylesheet" href="../framework7-4.4.10/packages/core/css/framework7.bundle.css">
<link rel="stylesheet" href="../framework7-4.4.10/kitchen-sink/core/css/app.css">
<link rel="apple-touch-icon" href="../framework7-4.4.10/kitchen-sink/img/f7-icon-square.png">
//js引用
<script src="../framework7-4.4.10/packages/core/js/framework7.bundle.min.js"></script>
<script src="../framework7-4.4.10/kitchen-sink/core/js/routes.js"></script>
<script src="../framework7-4.4.10/kitchen-sink/core/js/app.js"></script>
<script src="../framework7-4.4.10/packages/core/components/picker.js"></script>
//html
<div class="list" onclick="xuanzhe()" style="background-color: #ffffff; color: #555454; margin-top: 0px; width: 100%">
<%--<p style="font-size: 14px; padding-left: 20px;">选择值:</p>--%>
<input type="text" placeholder="选择值" readonly="readonly" id="demo-picker-describe" style="font-size: 14px; margin-left: 20px" />
</div>
//js
<script type="text/javascript">
<!--
var pickerDescribe = null;
function xuanzhe() {
//判断是否已经创建,已经创建的话就先清理掉
if (pickerDescribe != null) {
pickerDescribe.destroy();
}
pickerDescribe = app.picker.create({
inputEl: '#demo-picker-describe',
rotateEffect: true,//3d效果
renderToolbar: function () {
return '<div class="toolbar">' +
'<div class="toolbar-inner">' +
'<div class="left">' +
'<a href="#" class="link toolbar-randomize-link">取消</a>' +
'</div>' +
'<div class="right">' +
'<a href="#" class="link sheet-close popover-close">确定</a>' +
'</div>' +
'</div>' +
'</div>';
},
cols: [
{
textAlign: 'left',
values: ('1 2 3 4 5 6 7 8 9 10 11 12 13').split(' ')
}
]
});
pickerDescribe.open();//打开选择器
}
//-->
</script>
注意:app.js中定义app时,参数:root:“#app”为默认值,使用时需要将html中最外层div的id改为“app”(与app.js中定义app变量中root参数一致,否则点击无效)
如图:
framework7 picker 具体使用的更多相关文章
- Framework7初始化
/** * Framework7初始化 * 需引用jQuery */ /*---------------------------函数---------------------------*/ /** ...
- framework7的改进,以及与vue组合使用遇到的问题以及解决方法 (附vue的原理)
framework7官方提供了vue+framework7的组合包,但是那个包用起来复杂度较高,而且不灵活.听说bug也不少. 所以我想用最原始的方式单独使用vue和framework7. 遇到以下问 ...
- picker(拖拽上下拉动的选项)
[b]新版本更新:鼠标上下拖动选择内容:http://hiuman.iteye.com/blog/2353563[/b] (如有错敬请指点,以下是我工作中遇到并且解决的问题) 一开始搜这个内容的时候, ...
- framework7 Autocomplete (自动完成) 具体使用
官网地址:https://framework7.io/docs/autocomplete.html#autocomplete-parameters 效果图: <meta charset=&quo ...
- iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果
具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的pi ...
- 16款最佳的 jQuery Time Picker 时间选择插件
jQuery 插件可以为你做许多事情,你可以很容易地把这些插件集成到您的网站.网络上的 jQuery 日期选择器和日历插件很多,但找不到很满意的时间选择器插件. 在这里,我们收集了最好的一组 jQue ...
- iosselect:一个js picker项目,在H5中实现IOS的下拉效果
iosselect是在webapp下的一个picker组件,可以轻松实现各类选择器效果.比如地区选择 时间选择 日期选择等. 下面是一个地址选择器demo截图,可以访问:http://zhoushen ...
- js picker webapp仿ios picker
iosselect 在webapp下的一个picker组件 可以轻松实现各类选择器效果.比如地区选择 时间选择 日期选择等. 可以定制依赖关系,可以定制选择层级,可以定制高度 展示项数.无论你是px还 ...
- Entity Framework7 有哪些不同?之具体功能
Entity Framework7 有哪些不同?之具体功能 前面我们介绍了关于EF7的新特性.开发计划和入门介绍.今天,我们来看看EF7的具体新功能及用法.本文中的环境,为EF7入门里介绍的环境. 1 ...
随机推荐
- JVM系列(2)- jmap+mat实战内存溢出
熟悉几个监控JVM的常用命令 1. jps -l 查出当前服务器运行的java进程 --- 2. jinfo用法(结合jps -l查到进程ID) 1).查看最大堆内存:jinfo -flag MaxH ...
- Java虚拟机学习笔记(二)--- 判断对象是否存活
Java堆中存放着所有的对象实例,垃圾收集器在堆进行回收之前,需要判断对象是“存活”还是“死亡”(即不可能再被任何途径引用的对象). 最常见的一种判断对象是否存活算法是引用计数算法, 给对象加一个引用 ...
- Caddy 源码全解析
caddy源码全解析 Caddy 源码全解析 Preface Caddy 是 Go 语言构建的轻量配置化服务器.同时代码结构由于 Go 语言的轻便简洁,比较易读,推荐学弟学妹学习 Go 的时候也去查看 ...
- alluxio源码解析-层次化存储(4)
层次化存储-特性介绍: https://www.alluxio.org/docs/1.6/cn/Tiered-Storage-on-Alluxio.html 引入分层存储后,Alluxio管理的数据块 ...
- nginx在线与离线安装
1.场景描述 项目要部署到新的服务器上,需要安装nginx,刚好安全部门通知了nginx存在安全漏洞(Nginx整数溢出漏洞,nginx1.13.2之后的版本无问题),就下载最新的nginx进行了安装 ...
- HelloDjango 第 07 篇:创作后台开启,请开始你的表演!
作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 在此之前我们完成了 django 博客首页视图的编写,我们希望首页展示发布的博客文章列 ...
- 算法与数据结构基础 - 双指针(Two Pointers)
双指针基础 双指针(Two Pointers)是面对数组.链表结构的一种处理技巧.这里“指针”是泛指,不但包括通常意义上的指针,还包括索引.迭代器等可用于遍历的游标. 同方向指针 设定两个指针.从头往 ...
- Kafka监控工具汇总
对于大数据集群来说,监控功能是非常必要的,通过日志判断故障低效,我们需要完整的指标来帮我们管理Kafka集群.本文讨论Kafka的监控以及一些常用的第三方监控工具. 一.Kafka Monitorin ...
- hmac模块和hashlib模块
hmac模块和hashlib模块 一.hash是什么 hash是一种算法(Python3.版本里使用hashlib模块代替了md5模块和sha模块,主要提供 SHA1.SHA224.SHA256. ...
- Mybatis延迟加载的实现以及使用场景
首先我们先思考一个问题,假设:在一对多中,我们有一个用户,他有100个账户. 问题1:在查询用户的时候,要不要把关联的账户查出来? 问题2:在查询账户的时候,要不要把关联的用户查出来? 解答:在查询用 ...