微信WeUI常见页面模板
购物车模板
就是popup弹层(css样式+js)，还有slider滑动操作，还有增减的js
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<link rel="stylesheet" href="css/weui.min.css">
<link rel="stylesheet" href="css/demos.css">
<link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
<style>
.summary {
padding: 8px;
text-align: right;
background-color: white;
}
.price {
font-size: .9em;
margin-right: 6px;
}
</style>
</head>
<body ontouchstart>
<!-- Your Code --> <header class='demos-header'>
<h1 class="demos-title">购物车</h1>
</header> <div class='demos-content-padded'>
<article class="weui-article">
<p>这是一个购物车的模板，可以参考这个模板完成你自己的购物车。支持：</p>
<ul>
<li>可以加减数量</li>
<li>可以滑动删除</li>
</ul>
<a href="javascript:;" class="weui-btn weui-btn_primary open-popup" data-target="#cart">打开购物车</a>
</article>
</div> <div id="cart" class='weui-popup__container popup-bottom'>
<div class="weui-popup__overlay"></div>
<div class="weui-popup__modal">
<div class="toolbar">
<div class="toolbar-inner">
<a href="javascript:;" class="picker-button close-popup">关闭</a>
<h1 class="title">我的购物车</h1>
</div>
</div>
<div class="modal-content">
<div class="weui-cells">
<div class="weui-cell weui-cell_swiped">
<div class="weui-cell__bd">
<div class="weui-cell">
<div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>清风纸巾12包装</p>
</div>
<div class="weui-cell__ft">
<span class="price">￥24.00</span>
<div class="weui-count">
<a class="weui-count__btn weui-count__decrease"></a>
<input class="weui-count__number" type="number" value="" />
<a class="weui-count__btn weui-count__increase"></a>
</div>
</div>
</div>
</div>
<div class="weui-cell__ft">
<a class="weui-swiped-btn weui-swiped-btn_warn delete-swipeout" href="javascript:">删除</a>
<a class="weui-swiped-btn weui-swiped-btn_default close-swipeout" href="javascript:">关闭</a>
</div>
</div>
<div class="weui-cell weui-cell_swiped">
<div class="weui-cell__bd">
<div class="weui-cell">
<div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>七匹狼男士长筒袜</p>
</div>
<div class="weui-cell__ft">
<span class="price">￥35.00</span>
<div class="weui-count">
<a class="weui-count__btn weui-count__decrease"></a>
<input class="weui-count__number" type="number" value="" />
<a class="weui-count__btn weui-count__increase"></a>
</div>
</div>
</div>
</div>
<div class="weui-cell__ft">
<a class="weui-swiped-btn weui-swiped-btn_warn delete-swipeout" href="javascript:">删除</a>
<a class="weui-swiped-btn weui-swiped-btn_default close-swipeout" href="javascript:">关闭</a>
</div>
</div>
</div>
</div>
<p class="summary">
件商品, 共计 <strong>123.5</strong> 元
</p>
</div>
</div> <script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
<script>
add_delete();
slider_operate(); //封装成方法，便于调用
function add_delete () {
var MAX = , MIN = ;
$('.weui-count__decrease').click(function (e) {
var $input = $(e.currentTarget).parent().find('.weui-count__number');
console.log($input.val());
var number = parseInt($input.val() || "") -
if (number < MIN) number = MIN;
$input.val(number)
});
$('.weui-count__increase').click(function (e) {
var $input = $(e.currentTarget).parent().find('.weui-count__number');
var number = parseInt($input.val() || "") +
if (number > MAX) number = MAX;
$input.val(number)
});
} //封装成方法，便于调用
function slider_operate () {
$('.delete-swipeout').click(function () {
$(this).parents('.weui-cell').remove()
});
$('.close-swipeout').click(function () {
$(this).parents('.weui-cell').swipeout('close')
});
} </script>
</body>
</html>
tpl就是template的简写
聊天室模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<link rel="stylesheet" href="css/weui.min.css">
<link rel="stylesheet" href="css/demos.css">
<link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
<style type="text/css">
.badge-position{
position: absolute;
top: -.4em;
right: -.4em;
}
</style>
</head>
<body ontouchstart>
<!-- Your Code -->
<div class="page__pd">
<div class="weui-search-bar" id="searchBar">
<form class="weui-search-bar__form" action="#">
<div class="weui-search-bar__box">
<i class="weui-icon-search"></i>
<input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
</div>
<label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
<i class="weui-icon-search"></i>
<span>搜索</span>
</label>
</form>
<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
<div class="weui-panel weui-panel_access">
<div class="weui-panel__bd">
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-cell__bd">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar.jpg" alt="">
<span class="weui-badge badge-position" ></span>
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
刘亦菲
<span class="weui-media-box__title-after">下午8:</span>
</h4>
<p class="weui-media-box__desc">小李明天早上帮我带两个包子，一个猪肉粉丝和一个奶黄包</p>
</div> </a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar2.jpg" alt="">
<span class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;"></span>
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
Baby
<span class="weui-media-box__title-after">下午7:</span>
</h4>
<p class="weui-media-box__desc">晚上约吗？</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar3.jpg" alt="">
<span class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">+</span>
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
江户川-元芳
<span class="weui-media-box__title-after">上午10:</span>
</h4>
<p class="weui-media-box__desc">真相只有一个</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
刘亦菲
<span class="weui-media-box__title-after">下午8:</span>
</h4>
<p class="weui-media-box__desc">小李明天早上帮我带两个包子，一个猪肉粉丝和一个奶黄包</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar2.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
Baby
<span class="weui-media-box__title-after">下午7:</span>
</h4>
<p class="weui-media-box__desc">晚上约吗？</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar3.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
江户川-元芳
<span class="weui-media-box__title-after">上午10:</span>
</h4>
<p class="weui-media-box__desc">真相只有一个</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
刘亦菲
<span class="weui-media-box__title-after">下午8:</span>
</h4>
<p class="weui-media-box__desc">小李明天早上帮我带两个包子，一个猪肉粉丝和一个奶黄包</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar2.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
Baby
<span class="weui-media-box__title-after">下午7:</span>
</h4>
<p class="weui-media-box__desc">晚上约吗？</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar3.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
江户川-元芳
<span class="weui-media-box__title-after">上午10:</span>
</h4>
<p class="weui-media-box__desc">真相只有一个</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
刘亦菲
<span class="weui-media-box__title-after">下午8:</span>
</h4>
<p class="weui-media-box__desc">小李明天早上帮我带两个包子，一个猪肉粉丝和一个奶黄包</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar2.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
Baby
<span class="weui-media-box__title-after">下午7:</span>
</h4>
<p class="weui-media-box__desc">晚上约吗？</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar3.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
江户川-元芳
<span class="weui-media-box__title-after">上午10:</span>
</h4>
<p class="weui-media-box__desc">真相只有一个</p>
</div>
</a>
</div>
</div>
</div>
<style>
.weui-panel {
margin: ;
}
.weui-media-box {
padding: 8px 15px;
}
.weui-panel__bd .weui-media-box__hd {
width: 50px;
height: 50px;
line-height: 50px;
position: relative;
}
.weui-media-box__desc {
-webkit-line-clamp: ;
}
.weui-media-box__title {
margin-top: -4px;
}
</style>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script> </body>
</html>
微信WeUI常见页面模板的更多相关文章
- 微信WeUI入门2
引入需要的样式文件 最重要的css文件为 weui.min.css 基本的框架如下: <!DOCTYPE html> <html lang="zh-CN"> ...
- 微信 + weui 框架记录
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一: 包含button.cell.dialog. progress. to ...
- 微信jssdk常见错误及解决方法
调用config 接口的时候传入参数 debug: true 可以开启debug模式,页面会alert出错误信息.以下为常见错误及解决方法: invalid url domain当前页面所在域名与使用 ...
- 微信 weui 初体验
最近微信推出他们自己的H5组件(weui)组件的优点有两个: 做为开发者的我们可以不用写太多css,直接拿过来就可以用. 组件都有点击态,大大增加了用户的体验好感 高清屏幕下 border : 0.5 ...
- 微信WeUI扩展组件
主要包括 下拉刷新pullToRefresh downRefresh.html 主要的代码是$(document.body).pullToRefresh(); <div class=" ...
- 微信WeUI基础
首先引入样式css和js 虽然基础的其实还有weui.min.css,但是为了一些动态效果,也要引入其他的东西. 基本框架 <!DOCTYPE html> <html lang=&q ...
- 微信WeUI入门
为帮助网页开发者实现与微信客户端一致的视觉体验,并降低设计和开发成本,微信团队推出了网页设计样式库:WeUI. 该样式库目前包含 button (按钮).cell (单元格).toast (浮层提示) ...
- 基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...
- 移动端 常见布局CSS3的细节
结合 Framework7 和ios UI系统,微信weUI,支付宝H5 我们在移动端一些css用法 细节的有了更深的了解: 高斯模糊的显示效果,ios8以上支持,ios8以上0.5px,bac ...
随机推荐
- C#基础笔记(第十九天)
1.CSS 层叠样式表 对HTML的补充实现网页内容和页面效果的彻底分离1.内联样式表(在标签内设置元素的样式)<p style="background:red; font-size: ...
- Java NIO Selector选择器
Selector是Java NIO中的一个组件,用于检查一个或多个NIO Channel的状态是否处于可读.可写.如此可以实现单线程管理多个channels,也就是可以管理多个网络链接. 为什么使用S ...
- 大公司怎么做Android代码混淆的？
3月17日,网易资深安全工程师钟亚平在安卓巴士全球开发者论坛上做了<安卓APP逆向与保护>的演讲.其中就谈到了关于代码混淆的问题.现摘取部分重点介绍如下: Java代码是非常容易反编译 ...
- C语言的第零次作业
C语言--第0次作业 Q1:对于网络专业的了解 一开始我对网络工程这个专业并不是很了解,在报志愿之前,我完全没想过自己会进这个专业,但是经过了一个暑假的时间,我慢慢地开始了解这个学科,并开始对这个专业 ...
- JUC中Executor基本知识
Future And Callable 引用 http://www.cnblogs.com/dolphin0520/p/3949310.html http://www.iocoder.cn/JUC/ ...
- H-a
1.habit 习惯:毒瘾 in the habit of 有....习惯 派生:habitual a.通常的,习惯的:已养成习惯的: 2.hacker 黑客 3.hail n. 雹 vi.下雹 vt ...
- jQuery入门讲解
jQuery设计思想: (1)选择页面元素 css选择器: $(document) 选择整个文档对象, $("#myId") 选择id为myId的页面元素, $("div ...
- 快速搭建微信小程序开发环境
1.工具软件: 注:本文介绍的工具软件已分享到百度云盘,直接下载并按照本文介绍安装即可. 开发工具 v0.7 百度云链接: https://pan.baidu.com/s/1jIQ7i8A密码: aq ...
- [Objective-C语言教程]结构体（17）
Objective-C数组可定义包含多个相同类型的数据项的变量类型,但结构体是Objective-C编程中的另一个用户定义数据类型,它可组合不同类型的数据项. 结构体用于表示记录,假设要图书馆中跟踪书 ...
- oracle创建表空间、用户、权限
原链接:https://www.cnblogs.com/wxm-bk/p/6510654.html oracle 创建临时表空间/表空间,用户及授权 1:创建临时表空间 create tempor ...