微信WeUI扩展组件
主要包括
下拉刷新pullToRefresh
downRefresh.html
主要的代码是$(document.body).pullToRefresh();
<div class="weui-pull-to-refresh__layer">
<div class='weui-pull-to-refresh__arrow'></div>
<div class='weui-pull-to-refresh__preloader'></div>
<div class="down">下拉刷新</div>
<div class="up">释放刷新</div>
<div class="refresh">正在刷新</div>
</div> </script>
<script>
$(document.body).pullToRefresh(function() {
setTimeout(function() {
$(document.body).pullToRefreshDone();
}, 2000); }); </script>
详细代码
<!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"/>
</head>
<body ontouchstart>
<!-- Your Code -->
<div class="weui-pull-to-refresh__layer">
<div class='weui-pull-to-refresh__arrow'></div>
<div class='weui-pull-to-refresh__preloader'></div>
<div class="down">下拉刷新</div>
<div class="up">释放刷新</div>
<div class="refresh">正在刷新</div>
</div> <h1 class="demos-title">下拉刷新</h1>
<p>Time: <span id="time">下拉我试试</span></p>
<p>
<a href="javascript:;" class="weui-btn weui-btn_primary" id="trigger">通过JS触发下拉刷新</a>
</p>
<div id="list" class='demos-content-padded'> <p>《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材，已被全世界100多个国家的1200多所大学用作教材。</p> </div> <script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document.body).pullToRefresh(function() {
setTimeout(function() {
$("#time").text(new Date);
$(document.body).pullToRefreshDone();
}, );
$("#list").append("<div class='weui-btn weui-btn_default'>下拉刷新的内容</div>");
});
$("#trigger").click(function () {
$(document.body).pullToRefresh('triggerPullToRefresh'); $("#list").append("<div class='weui-btn weui-btn_default'>js触发器新加载的内容</div>");
});
</script>
</body>
</html>
滚动刷新infinite（）
主要代码：
<div class="weui-loadmore">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加载</span>
</div>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
<script>
var loading = false;
$(document.body).infinite().on("infinite", function() {
if(loading) return;
loading = true;
setTimeout(function() {
$("#list").append("<div class='weui-btn weui-btn_primary'>我是加载的新内容。</div>");
loading = false;
}, 2000);//模拟延迟
});
</script>
详细代码
<!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"/>
</head>
<body ontouchstart>
<!-- Your Code -->
<h1 class="demos-title">滚动加载</h1>
<div id="list" class='demos-content-padded'>
<p>《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材，已被全世界100多个国家的1200多所大学用作教材。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》的最新版全面而系统地介绍了人工智能的理论和实践，阐述了人工智能领域的核心内容，并深入介绍了各个主要的研究方向。全书分为七大部分：第Ⅰ部分“人工智能”，第Ⅱ部分“问题求解”，第Ⅲ部分“知识、推理与规划”，第Ⅳ部分“不确定知识与推理”，第Ⅴ部分“学习”，第Ⅵ部分“通信、感知与行动”，第Ⅶ部分“结论”。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》既详细介绍了人工智能的基本概念、思想和算法，还描述了其各个研究方向最前沿的进展，同时收集整理了详实的历史文献与事件。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》适合于不同层次和领域的研究人员及学生，是高等院校本科生和研究生人工智能课的首选教材，也是相关领域的科研与工程技术人员的重要参考书。</p> <p>《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材，已被全世界100多个国家的1200多所大学用作教材。</p>
</div> <div class="weui-loadmore">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加载</span>
</div>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
<script>
var loading = false;
$(document.body).infinite().on("infinite", function() {
if(loading) return;
loading = true;
setTimeout(function() {
$("#list").append("<div class='weui-btn weui-btn_primary'>我是加载的新内容。</div>");
loading = false;
}, );//模拟延迟
});
</script>
</body>
</html>
拾取器picker
主要代码：
$('#Job').picker({
title:'请选择您的职业',
cols:[
{
values:['神圣','邪恶']
},
{
values:['法师','战士','辅助','NPC']
},
{
values:['人类','兽类','禽兽']
}
]
});
详细代码：
<!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"/>
</head>
<body ontouchstart>
<!-- Your Code -->
<header class='demos-header'>
<h1 class="demos-title">选择器</h1>
</header> <div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label for="name" class="weui-label">称呼</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="name" type="text" value="">
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label for="date" class="weui-label">手机</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="mobile" type="text" value="">
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label for="date" class="weui-label">职业</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="Job" type="text" value="">
</div>
</div>
</div> <div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label for="inline" class="weui-label">内联显示</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="inline" type="text" value="">
</div>
</div>
</div>
<div id="picker-container"></div>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
<script> $('#Job').picker({
title:'请选择您的职业',
cols:[
{
values:['神圣','邪恶']
},
{
values:['法师','战士','辅助','NPC']
},
{
values:['人类','兽类','禽兽']
}
]
}); $("#mobile").picker({
title: "请选择您的手机",
cols: [
{
textAlign: 'center',
values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
}
],
onChange: function(p, v, dv) {
console.log(p, v, dv);
},
onClose: function(p, v, d) {
console.log("close");
}
});
$("#name").picker({
title: "怎么称呼您？",
cols: [
{
textAlign: 'center',
values: ['Mr', 'Ms']
},
{
textAlign: 'center',
values: ['Amy', 'Bob', 'Cat', 'Dog', 'Ella', 'Fox', 'Google']
}
]
}); $("#inline").picker({
container: '#picker-container',
cols: [
{
textAlign: 'center',
values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
}
],
});
</script>
</body>
</html>
普通下拉选择器select
主要代码：
$("#job").select({
title: "选择职业",
items: ["法官", "医生", "猎人", "学生", "记者", "其他"],
});
详细代码：
<!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"/>
</head>
<body ontouchstart>
<!-- Your Code -->
<header class='demos-header'>
<h1 class="demos-title">Select</h1>
</header> <div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label for="name" class="weui-label">职业</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="job" type="text" value="请选择">
</div>
</div> <div class="weui-cell">
<div class="weui-cell__hd"><label for="name" class="weui-label">手机</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="mobile" type="text" value="请选择">
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label for="name" class="weui-label">爱好</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="in" type="text" value="画画,唱歌,打球">
</div>
</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>
$("#job").select({
title: "选择职业",
items: ["法官", "医生", "猎人", "学生", "记者", "其他"],
});
$("#mobile").select({
title: "选择手机",
items: [
{
title: "iPhone 3GS",
value: "",
},
{
title: "iPhone 5",
value: "",
},
{
title: "iPhone 5S",
value: "",
},
{
title: "iPhone 6",
value: "",
},
{
title: "iPhone 6S",
value: "",
},
{
title: "iPhone 6P",
value: "",
},
{
title: "iPhone 6SP",
value: "",
},
{
title: "iPhone SE",
value: "",
},
{
title: "iPhone 7",
value: ""
}
]
});
$("#in").select({
title: "您的爱好",
multi: true,
min: ,
max: ,
items: [
{
title: "画画",
value: ,
description: "额外的数据1"
},
{
title: "打球",
value: ,
description: "额外的数据2"
},
{
title: "唱歌",
value: ,
description: "额外的数据3"
},
{
title: "游泳",
value: ,
description: "额外的数据4"
},
{
title: "健身",
value: ,
description: "额外的数据5"
},
{
title: "不能选睡觉",
value: ,
description: "额外的数据6"
},
],
beforeClose: function(values, titles) {
console.log(values);//1,2,3
console.log(titles);//画画,打球,唱歌
if(values.indexOf("") !== -) {
$.toast("不能选睡觉", "cancel");
return false;
}
return true;
},
onChange: function(d) {
console.log(d);
},
onClose: function (d) {
console.log('close')
}
});
</script>
</body>
</html>
城市选择器cityPicker
需要引入一个特殊的js
主要代码，就是用cityPicker方法：
$("#end").cityPicker({
title: "选择目的地"
});
详细代码：
<!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"/>
</head>
<body ontouchstart>
<!-- Your Code -->
<header class='demos-header'>
<h1 class="demos-title">City Picker</h1>
</header> <div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label for="name" class="weui-label">发出地</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="start" type="text" value="湖北省 武汉市 武昌区">
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label for="date" class="weui-label">目的地</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="end" type="text" value="">
</div>
</div>
</div>
<h2 class="demos-second-title">只选择城市</h2>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label for="home-city" class="weui-label">城市</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="home-city" type="text">
</div>
</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 src="js/city-picker.js" type="text/javascript" charset="utf-8"></script>
<script>
$("#start").cityPicker({
title: "选择出发地",
onChange: function (picker, values, displayValues) {
console.log(values, displayValues);
}
});
$("#end").cityPicker({
title: "选择目的地"
});
$("#home-city").cityPicker({
title: "选择目的地",
showDistrict: false,
onChange: function (picker, values, displayValues) {
console.log(values, displayValues);
}
});
</script>
</body>
</html>
cityPicker的底层实现是基于picker的
使用$.fn.functionName=function(){} 来定义自定义js函数
$.fn.cityPicker=function(param){
return this.each(function(){
$(this).picker(p);
});
}
时间选择器datetimePicker
详细代码
<!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"/>
</head>
<body ontouchstart>
<!-- Your Code -->
<header class='demos-header'>
<h1 class="demos-title">时间选择</h1>
<div class="demos-sub-title">基于picker</div>
</header> <!--微信团队2个空格的缩进，真的让人恼火-->
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label for="time" class="weui-label">默认配置</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="time" type="text" value="">
</div>
</div> <div class="weui-cell">
<div class="weui-cell__hd"><label for="time-format" class="weui-label">限制年月</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="years-monthes" type="text" value="2017-06-20 12:00">
</div>
</div>
</div> <div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label for="time-inline" class="weui-label">内联显示</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="time-inline" type="text" value="">
</div>
</div>
</div> <div id="time-container"></div> <script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("#time").datetimePicker();
$("#years-monthes").datetimePicker({
title: '限定年月',
years: [, ],
monthes: ['', ''],
onChange: function (picker, values, displayValues) {
console.log(values);
}
});
$("#time-inline").datetimePicker({
container: '#time-container'
})
</script>
</body>
</html>
日历控件calendar
主要代码：
<!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"/>
</head>
<body ontouchstart>
<!-- Your Code -->
<header class='demos-header'>
<h1 class="demos-title">日历</h1>
</header> <div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label for="date" class="weui-label">日期</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="date" type="text">
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label for="date-multiple" class="weui-label">多选</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="date-multiple" type="text" value="">
</div>
</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 type="text/javascript">
$("#date").calendar();
$("#date-multiple").calendar({
multiple:true
}); </script>
</body>
</html>
模拟顶部的消息提醒noti
主要代码：
<!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"/>
</head>
<body ontouchstart>
<!-- Your Code -->
<header class='demos-header'>
<h1 class="demos-title">Notification</h1>
</header> <div class='demos-content-padded'>
<a href="javascript:;" id='show-notification' class="weui-btn weui-btn_primary">显示通知</a>
</div> <script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("#show-notification").on("click",function () {
$.noti({
title: "中奖啦！",
text: "点击领取腾讯王者荣耀杯二等奖！",
media: "<img src='img/present.png' />",
data: {
message: "逗你玩的!"
},
time: ,
onClick: function(data) {
$.alert(data.message);
}
});
});
</script>
</body>
</html>
底部弹框层
其实就是通过样式和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"/>
</head>
<body ontouchstart>
<!-- Your Code -->
<header class='demos-header'>
<h1 class="demos-title">底部弹框层</h1>
</header> <div class='demos-content-padded'>
<a href="javascript:;" class="weui-btn weui-btn_primary open-popup" data-target="#full">显示全屏(默认)Popup</a>
<a href="javascript:;" class="weui-btn weui-btn_primary open-popup" data-target="#half">显示底部的Popup</a>
</div> <div id="full" class='weui-popup__container'>
<div class="weui-popup__overlay"></div>
<div class="weui-popup__modal">
<header class='demos-header'>
<h2 class="demos-second-title">关于 jQuery WeUI</h2>
<p class="demos-sub-title">By 言川 @//</p>
</header>
<article class="weui-article">
<h1>大标题</h1>
<section>
<h2 class="title">章标题</h2>
<section>
<h3>1.1 节标题</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<p>
<!--<img src="./images/pic_article.png" alt="">
<img src="./images/pic_article.png" alt="">-->
</p>
</section>
<section>
<h3>1.2 节标题</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</section>
</article>
<a href="javascript:;" class="weui-btn weui-btn_primary close-popup">关闭</a>
</div>
</div> <div id="half" class='weui-popup__container popup-bottom'>
<div class="weui-popup__overlay">
<!--<img src="img/avatar.jpg" />-->
</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-grids">
<a href="javascript:$.alert('发布《王者荣耀》');" class="weui-grid js_grid" data-id="dialog">
<div class="weui-grid__icon">
<img src="img/icon_nav_dialog.png" alt="">
</div>
<p class="weui-grid__label">
发布
</p>
</a>
<a href="javascript:$.alert('编辑《斗破苍穹》');" class="weui-grid js_grid" data-id="progress">
<div class="weui-grid__icon">
<img src="img/icon_nav_progress.png" alt="">
</div>
<p class="weui-grid__label">
编辑
</p>
</a>
<a href="javascript:$.confirm('保存吗');" class="weui-grid js_grid" data-id="msg">
<div class="weui-grid__icon">
<img src="img/icon_nav_msg.png" alt="">
</div>
<p class="weui-grid__label">
保存
</p>
</a>
<a href="javascript:;" class="weui-grid js_grid" data-id="dialog">
<div class="weui-grid__icon">
<img src="img/icon_nav_dialog.png" alt="">
</div>
<p class="weui-grid__label">
发布
</p>
</a>
<a href="javascript:;" class="weui-grid js_grid" data-id="progress">
<div class="weui-grid__icon">
<img src="img/icon_nav_progress.png" alt="">
</div>
<p class="weui-grid__label">
编辑
</p>
</a>
<a href="javascript:;" class="weui-grid js_grid" data-id="msg">
<div class="weui-grid__icon">
<img src="img/icon_nav_msg.png" alt="">
</div>
<p class="weui-grid__label">
保存
</p>
</a>
</div>
</div>
</div>
</div>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script> </body>
</html>
图片滚动swiper
需要引入一个特殊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>
.swiper-container {
width: 100%;
} .swiper-container img {
display: block;
width: 100%;
}
</style>
</head>
<body ontouchstart>
<!-- Your Code -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="img/swiper-1.jpg" /></div>
<div class="swiper-slide"><img src="img/avatar.jpg" /></div>
<div class="swiper-slide"><img src="img/swiper-3.jpg" /></div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></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 src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
<script>
$(".swiper-container").swiper({
loop: true,
autoplay: 3000
});
</script>
</body>
</html>
图片浏览器（基于swiper）
photoBrowser基于swiper组件
主要代码：
<!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"/>
</head>
<body ontouchstart>
<!-- Your Code -->
<header class='demos-header'>
<h1 class="demos-title">图片浏览器</h1>
</header> <div class='demos-content-padded'>
<a href="javascript:;" class="weui-btn weui-btn_primary" id="pb1">只有图片</a>
<a href="javascript:;" class="weui-btn weui-btn_primary" id="pb2">带说明文案</a>
</div> <script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
<script> var pb1 = $.photoBrowser({
items: [
"img/swiper-1.jpg",
"img/swiper-2.jpg",
"img/swiper-3.jpg",
"img/swiper-4.jpg"
], onSlideChange: function(index) {
console.log(this, index);
}, onOpen: function() {
console.log("onOpen", this);
},
onClose: function() {
console.log("onClose", this);
}
});
$("#pb1").click(function() {
pb1.open();
});
var pb2 = $.photoBrowser({
items: [
{
image: "img/swiper-1.jpg",
caption: "尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。在浏览器新标签页中打开它，跟着我们查看一些基础示例。如果你喜欢用包管理器下载/安装，查看安装教程。"
},
{
image: "img/swiper-2.jpg",
caption: "组件（Component）是 Vue.js 最强大的功能之一。"
},
{
image: "img/swiper-3.jpg",
caption: "组件可以扩展 HTML 元素，封装可重用的代码"
},
{
image: "img/swiper-4.jpg",
caption: "在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。"
}
],
initIndex:
});
$("#pb2").click(function() {
pb2.open();
});
</script>
</body>
</html>
购物车的计数器
基本上就是样式+js实现，增减的逻辑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 type="text/css">
.img-title{
width: 20px;
display: block;
}
</style>
</head>
<body ontouchstart>
<!-- Your Code -->
<header class='demos-header'>
<h1 class="demos-title">Count/计数器</h1>
</header>
<div class="bd">
<div class="page__bd">
<div class="weui-cells__title">带计数器的列表项</div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<p>优衣库轻薄羽绒服</p>
</div>
<div class="weui-cell__ft">
<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 class="weui-cell">
<div class="weui-cell__hd">
<img src="img/avatar.jpg" class="img-title"/>
</div>
<div class="weui-cell__bd">
<p>三叶草男士运动鞋</p>
</div>
<div class="weui-cell__ft">
<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 class="weui-cell weui-cell_swiped">
<div class="weui-cell__bd">
<div class="weui-cell">
<div class="weui-cell__bd">
<p>可滑动删除</p>
</div>
<div class="weui-cell__ft">
<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> <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>
微信WeUI扩展组件的更多相关文章
- 微信小程序使用weui扩展组件踩坑
最近在做微信小程序,引入weui的时候踩坑了好久,这里记录一下遇到的问题. 微信官方文档给了两种weui引入方式: 通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入 ...
- 【腾讯Bugly干货分享】微信终端跨平台组件 Mars 系列 - 我们如约而至
导语 昨天上午,微信在广州举办了微信公开课Pro.于是,精神哥这两天的朋友圈被小龙的"八不做"刷屏了.小伙伴们可能不知道,下午,微信公开课专门开设了技术分论坛.在分论坛中,微信开源 ...
- 微信 weui 初体验
最近微信推出他们自己的H5组件(weui)组件的优点有两个: 做为开发者的我们可以不用写太多css,直接拿过来就可以用. 组件都有点击态,大大增加了用户的体验好感 高清屏幕下 border : 0.5 ...
- WeUI Picker组件 源代码分析
前言 由于最近做的一个移动端项目需要使用到类似 WeUI Picker组件 的选择效果, 所以在这里来分析下 WeUI Picker 的实现逻辑.(weui.js项目地址) 之前也做过类似的组件, ...
- easyUI扩展组件
$.parser.plugins.push("aa"); //注册扩展组件 $.fn.aa= function (options, param) {//定义扩展组件 //当opti ...
- MEF(Managed Extensibility Framework)有选择性地使用扩展组件
在"MEF(Managed Extensibility Framework)使用全部扩展组件"中,客户端应用程序调用了所有的扩展组件,而且如果有新的扩展组件加入,必须先关闭程序,再 ...
- MEF(Managed Extensibility Framework)使用全部扩展组件
MEF(Managed Extensibility Framework),所在命名空间是System.ComponentModel.Composition.dll.简单来说,MEF是将符合约定(一般是 ...
- 【Android】10.1 扩展组件库和其他视图--本章示例主界面
分类:C#.Android.VS2015: 创建日期:2016-02-18 1.主界面运行截图 2.MainActivity.cs文件中对应的代码 chItems.Add(new Chapter() ...
- 微信WeUI入门2
引入需要的样式文件 最重要的css文件为 weui.min.css 基本的框架如下: <!DOCTYPE html> <html lang="zh-CN"> ...
随机推荐
- “全栈2019”Java异常第十章：throw与throws区别详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...
- 【文文殿下】后缀自动机(SAM)求最长公共子串的方法
首先,在A 串上建立一个SAM,然后用B串在上面跑.具体跑的方法是: 从根节点开始,建立一个指针 p ,指着B串的开头,同步移动指针,沿着SAM的边移动,如果可以移动(即存在边)那么万事皆好,直接le ...
- 根据IP获取IP定位
http://ip.taobao.com/service/getIpInfo.php?ip=27.17.60.152 {,"}} 不确定是否有次数限制
- Kali Linux来袭~老司机带你进击
Kali是BackTrackLinux完全遵循Debian开发标准彻底的完全重建.全新的目录框架,复查并打包所有工具,我们还为VCS建立了Git树. 本次推荐内容主要介绍Kali-Linux的安装,包 ...
- AI 的下一个重大挑战：理解语言的细微差别
简评:人类语言非常博大精妙,同一句话在不同的语境下,就有不同的含义.连人类有时候都不能辨别其中细微的差别,机器能吗?这就是人工智能的下一个巨大挑战:理解语言的细微差别.本文原作者是 Salesforc ...
- Postgres中的SpinLock锁
我们知道,在数据库中为了并发控制,少不了要使用各种各样的锁(lock).PostgreSQL中也不例外. 在PostgreSQL中有三种级别的锁,他们的关系如下: |上层 RegularLock | ...
- Python中复制、深拷贝和浅拷贝的区别
深拷贝定义(deepcopy) 在Python中,由于一切皆对象,所以任何变量都可以被引用,也即可以被赋值给任何变量.但是在Python中,给变量赋值,是区分的,一般情况下,Python中的变量赋值都 ...
- leetcode-73-矩阵置零
题目描述: 给定一个 m x n 的矩阵,如果一个元素为 0,则将其所在行和列的所有元素都设为 0.请使用原地算法. 示例 1: 输入: [ [1,1,1], [1,0,1], [1, ...
- O01-Linux CentOS7中利用RDO部署OpenStack
一.前言 1.RDO是红帽Red Hat 的一个开源项目,全称是RPM Distribution of OpenStack,能够帮助我们快捷部署OpenStack项目. 官方部署文档:https:// ...
- 查看 page页面某一个属性在 web ui 中的位置。
1:例如查询 description 属性在web ui 中的位置. 2:进入订单编辑状态,鼠标放到该字段上,按F2 3:出现该字段的详细信息,包括:component,contextNode 4: ...