weui学习总结——1、weui表单常用标签
来源:互联网 发布:ubuntu 16.04 安装ie 编辑:程序博客网 时间:2024/06/05 10:25
前言: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>
阅读全文
0 0
- weui学习总结——1、weui表单常用标签
- weui学习总结——2、操作反馈
- WeUI
- WeUI
- WEUI应用,用JS封装常用信息—Progress
- WEUI应用,用JS封装常用信息—ActionSheet
- weui学习总结——3、微信样式界面切换
- 照虎画虎——简单WeUI模板UX设计学习
- WeUI学习笔记
- h5学习笔记:weui
- 微信官方UI库—WeUI
- WEUI应用,用JS封装常用信息提示的弹层—Toast
- WEUI应用,用JS封装常用信息提示的弹层—Dialog
- WEUI应用,用JS封装常用信息提示的弹层—Msg
- 微信小程序开发之——weui-wxss的使用
- 微信小程序之拓展篇——weui-wxss
- WeUI 入门教程
- weui网址
- 一个基于jquery回到顶部的简单代码
- 浅谈数据库优化之-索引
- 苹果开发者计划电话
- 关于人生的一些思考
- Linux下禁用root远程登录并且新建一个用户赋予root权限
- weui学习总结——1、weui表单常用标签
- json to bean 和 bean to json
- MongoDB的常见问答—索引
- mysql处理重复数据
- activiti designer插件安装(MyEclipse 10,解决bpmn不能打开问题)
- vim大小写转换
- [js高手之路]面向对象+设计模式+继承一步步改造简单的四则运算
- java对象与json对象间的相互转换
- JAVA