weui学习总结——1、weui表单常用标签
前言:weui是一个专门用于开发手机移动web或微信的样式库。但是官方只提供了demo没有提供相关文档,所以这篇博客就当是方便以后开发而使用吧。
weui资源下载(也可以从官网下载):
http://download.csdn.net/download/zhengyikuangge/9940737
- 手机移动web开发必须要做的两点:1、body中加上ontouchstart,即
<body ontouchstart>...</body>
;2、页面上加入<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
- 该博客中所描述的代码只需要导入weui.css即可,例如:
<link rel="stylesheet" href="weui.css" />
。 weui.css在上述weui资源中有,请自行下载。大约是在weui-1.1.2\dist\example 路径下。也可到我的百度网盘下载,链接:http://pan.baidu.com/s/1cFAHNS 密码:iq4d。
该博客中的代码原理上只是修改了html标签中的class而已,请大家对照效果图和代码。
按钮
效果图如下:
普通按钮
<a class="weui-btn weui-btn_primary">普通按钮</a>
刷新按钮
<a class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-loading"></i></a>
不可点按钮
<a class="weui-btn weui-btn_disabled weui-btn_primary">不可点按钮</a>
小按钮
<a class="weui-btn weui-btn_mini weui-btn_primary">按钮</a>
<a class="weui-btn weui-btn_mini weui-btn_default">按钮</a>
<a class="weui-btn weui-btn_mini weui-btn_warn">按钮</a>
- 注:都可以按照自己的需要改css属性也可以,比如修改按钮的颜色,代码如下:
<a class="weui-btn weui-btn_primary" style="background:yellow">普通按钮</a>
Input
效果图如下:
单选
<div class="weui-cells weui-cells_radio"><label class="weui-cell weui-check__label" for="x11"><div class="weui-cell__bd"><p>1111</p></div><div class="weui-cell__ft"><input type="radio" class="weui-check" name="radio1" id="x11"/><span class="weui-icon-checked"></span></div></label><label class="weui-cell weui-check__label" for="x12"><div class="weui-cell__bd"><p>2222</p></div><div class="weui-cell__ft"><!-- 注意checked属性,可以获取checked属性的值判断是否被选择 --><input type="radio" name="radio1" class="weui-check" id="x12" checked="checked"/><span class="weui-icon-checked"></span></div></label></div>
多选
<div class="weui-cells weui-cells_checkbox"><label class="weui-cell weui-check__label" for="s11"><div class="weui-cell__hd"><!-- 注意checked属性,可以获取checked属性的值判断是否被选择 --><input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked"/><i class="weui-icon-checked"></i></div><div class="weui-cell__bd"><p>standard is dealt for u.</p></div></label><label class="weui-cell weui-check__label" for="s12"><div class="weui-cell__hd"><input type="checkbox" name="checkbox1" class="weui-check" id="s12"/><i class="weui-icon-checked"></i></div><div class="weui-cell__bd"><p>standard is dealicient for u.</p></div></label></div>
表单内容
<div class="weui-cells weui-cells_form">
<div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label">qq</label></div><div class="weui-cell__bd"><input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入qq号"/></div></div>
<div class="weui-cell"><div class="weui-cell__hd"><label for="" class="weui-label">日期</label></div><div class="weui-cell__bd"><input class="weui-input" type="date" value=""/></div></div><div class="weui-cell"><div class="weui-cell__hd"><label for="" class="weui-label">时间</label></div><div class="weui-cell__bd"><input class="weui-input" type="datetime-local" value="" placeholder=""/></div></div></div>
开关
<div class="weui-cell weui-cell_switch"><div class="weui-cell__bd">标题文字</div><div class="weui-cell__ft"><input class="weui-switch" type="checkbox" checked="checked"/></div>
</div>
文本框
<div class="weui-cells"><div class="weui-cell"><div class="weui-cell__bd"><input class="weui-input" type="text" placeholder="请输入文本"/></div></div>
</div>
文本域
<div class="weui-cells weui-cells_form"><div class="weui-cell"><div class="weui-cell__bd"><textarea class="weui-textarea" placeholder="请输入文本" rows="3" id="textarea"></textarea><div class="weui-textarea-counter" id="shownumber">0/200</div></div></div>
</div>
选择(select)
<div class="weui-cell weui-cell_select"><div class="weui-cell__bd"><select class="weui-select" name="select1"><option selected="" value="1">微信号</option><option value="2">QQ号</option><option value="3">Email</option></select></div></div><div class="weui-cell weui-cell_select weui-cell_select-after"><div class="weui-cell__hd"><label for="" class="weui-label">国家/地区</label></div><div class="weui-cell__bd"><select class="weui-select" name="select2"><option value="1">中国</option><option value="2">美国</option><option value="3">英国</option></select></div>
</div>
阅读并同意《相关条款》
<label for="weuiAgree" class="weui-agree"><input id="weuiAgree" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="javascript:void(0);">《相关条款》</a></span>
</label>
weui学习总结——1、weui表单常用标签相关推荐
- html表单的常用属性有哪些,html/form表单常用属性认识
1.form表单常用属性练习 .form1 { margin: auto; height: 900px; width: 500px; text-align: center; line-height: ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- mysql 表单属性_php表单常用属性有什么?
程序开发中,必不可少的会使用到form表单,以前只是在前端开发时简单使用,对它的属性不甚了解,最近在后端学习中,不断接触到它的属性,现记录一二.下面本篇文章给大家介绍php表单常用的5个属性. act ...
- 在php中表单传值怎么用,PHP学习笔记 01 之表单传值
一.HTML传值/PHP接收方法 1.GET(地址栏+问号+数据信息) (1)方式一:表单Form: method = 'get' GET接收数据方式: $_GET['表单元素name对应的值] (2 ...
- bootstrap学习(三)表单
bootstrap学习(三)表单 基本实例: from-group:可以是其内的标签排列更好 from-control:使标签宽度为100% <form><div class=&qu ...
- 学习通构建Web表单
1[单选题] <form>与</form>之间的表单控件是由用户自定义的.下列选项中,不属于表单标记<form>的常用属性的是( ). A. action B ...
- 学习前端——表格、表单
学习前端--表格.表单 表格在日常生活中使用的非常的多,比好excel就是 专门用来创建表格的工具, 表格就是用来表示一些格式化的数据的,比如:课程表.银行对账单 在网页中也可以来创建出不同的表格. ...
- html表单中默认选中的值,前端学习笔记一一HTML表单标签(form)
form表单细节 一.表单 1.表单 标签用于为用户输入创建 HTML 表单 2.表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 3.表单还可以包含 menus.text ...
- HTML学习笔记8:表单
什么是表单? 一个网页表单可以将用户输入的数据发送到服务器进行处理.因为互联网用户使用复选框,单选按钮或文本字段填写表格,所以WebForms的形式类似文件或数据库.例如,WebForms可以用来进入 ...
最新文章
- 100_框架对象事件
- 怎样用ABBYY FineReader中的电子邮件发送OCR结果
- ASP.NET 2.2 Preview 1首次支持Java SignalR客户端
- C#访问postgresql数据库类MyPostDB的实现
- matlab 返回变量类型的命令,MATLAB主要命令汇总
- 操作系统上机题目(多进程1)
- 【Flink】Flink key 应该分配到哪个 KeyGroup 以及 KeyGroup 分配在哪个subtask
- 博文视点大讲堂第45期——我们应该向魔兽世界学习什么 圆满结束
- 系统还原点设置被系统管理员禁用
- pta 天梯赛 7-3 换硬币 (20 分)day4
- 通往SDN之路:可编程网络的思想史
- jmeter性能测试1-录制脚本
- 手机恢复出厂设置命令_三星 手机 恢复 出厂 设置 指令 密码 串号
- 三维空间中平面的法向量计算
- Jmeter调用第三方jar包,配合BeanShell使用
- java把字符串转换为数组
- 游侠区块链10月10日分析:多头释放,假期入手筹码止盈收米。
- ElasticsearchException: Bulk indexing has failures
- 珊瑚虫QQ不显对方IP的故障排除
- 坐标提取,坐标定位(根据经纬度在地图上定位)
热门文章
- 【小程序专栏】个人及企业资质该如何注册小程序?
- 原创 全城公交标注系统 (2)
- Struts1.x 登录实验-无数据库版
- 插值与逼近_数值分析计算方法
- 微软Excel输入1.之后,小数点消失了
- 最近很火的在线文件预览txt、doc、ppt、pdf、excel、jpg、png、zip、tar.gz等各种文件及压缩文件在线解压和预览,包括前后端设计和源码,编写搜索引擎多关键词检索名称和内容(四)
- php js抽奖,JS做出随机抽奖系统
- 计算机excel没点保存,【2人回答】电脑突然断电,EXCEL没保存怎么找回已录入的资料?-3D溜溜网...
- 《大师说栏目第一期》汽车以太网测试项那么多,到底该测啥呢?
- 翻译《Pro SQL Server Internals,2nd edition》的CHAPTER 3 Statistics的Introduction to SQL Server Statistics等