摘要:本篇文章探讨了jQuery教程之微信页面设计weui(1)——入门,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
本篇文章探讨了jQuery教程之微信页面设计weui(1)——入门,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
<
1.weui下载
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页开发量身设计,可以令用户的使用感知更加统一。在微信网页开发中使用 WeUI,有如下优势:
同微信客户端一致的视觉效果,令所有微信用户都能更容易地使用你的网站
便捷获取快速使用,降低开发和设计成本
微信设计团队精心打造,清晰明确,简洁大方
该样式库目前包含 button、cell、dialog、progress、toast、article、icon 等各式元素,已经在 GitHub 上开源。访问 //weui.github.io/weui/
下载后,在文件夹中导入,如下图所示
2)
3)
2 使用
1)新建html,导入如下代码:
<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.css"/>
<link rel="stylesheet" href="css/example.css"/>
<script src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/jweixin-1.0.0.js"></script>
<script src="js/weui.min.js"></script>
<script src="js/example.js"></script>
2)body
body中需要加ontouchstart,
需要空div 其中class为container,<script type="tpl_home"></script>写主页面代码
<body ontouchstart style="width:100%;max-width:800px;margin:0 auto;
background:#eeeeee;top:0px; bottom:0px; left:0px; right:0px;
min-width:320px;">
<div id="container"></div>
<script type="text/html" id="tpl_home">
。。。。
</script>
3.form表单
1.整体页面
整体页面需要在<div class=”page">中写
2.头页面
<div>
<h1>
<img src="./image/guojiadianwang.jpg" alt="WeUI" width="100%" max-width="800px" style="margin: 0 auto" />
</h1>
</div>
3.form表单
<div class="page__bd page__bd_spacing">
<ul>
<li>
<div class="weui-flex js_category">
<p>表单</p>
<img src="./images/icon_nav_form.png" alt="form">
</div>
<div class="page__category js_categoryInner">
<div class="weui-cells page__category-content">
<a href="javacript:;" class="weui-cell weui-cell_access js_item" data-id="button">
<div>
<p>成绩查询</p>
</div>
<div></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="input" href="javascript:;">
<div>
<p>Input</p>
</div>
<div></div>
</a>
</div>
</div>
</li>
</ul>
</div>
4.js动态显示
<script type="text/javascript">
$(function(){
var winH = $(window).height();
var categorySpace = 10;
$(‘.js_item‘).on(‘click‘, function(){
var id = $(this).data(‘id‘);
window.pageManager.go(id);
});
$(‘.js_category‘).on(‘click‘, function(){
var $this = $(this),
$inner = $this.next(‘.js_categoryInner‘),
$page = $this.parents(‘.page‘),
$parent = $(this).parent(‘li‘);
var innerH = $inner.data(‘height‘);
bear = $page;
if(!innerH){
$inner.css(‘height‘, ‘auto‘);
innerH = $inner.height();
$inner.removeAttr(‘style‘);
$inner.data(‘height‘, innerH);
}
if($parent.hasClass(‘js_show‘)){
$parent.removeClass(‘js_show‘);
}else{
$parent.siblings().removeClass(‘js_show‘);
$parent.addClass(‘js_show‘);
if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
var scrollTop = this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;
if(scrollTop > this.offsetTop){
scrollTop = this.offsetTop - categorySpace;
}
$page.scrollTop(scrollTop);
}
}
});
});
</script>
5.button页面
<script type="text/html" id="tpl_button">
<div>
<div>
<h1>Button</h1>
<p>按钮</p>
</div>
<div class="page__bd page__bd_spacing">
<a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作 Normal</a>
<a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_loading"><i></i>页面主操作 Loading</a>
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">页面主操作 Disabled</a>
<a href="javascript:;" class="weui-btn weui-btn_default">页面次要操作 Normal</a>
<a href="javascript:;" class="weui-btn weui-btn_default weui-btn_loading"><i></i>页面次操作 Loading</a>
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">页面次要操作 Disabled</a>
<a href="javascript:;" class="weui-btn weui-btn_warn">警告类操作 Normal</a>
<a href="javascript:;" class="weui-btn weui-btn_warn weui-btn_loading"><i></i>警告类操作 Loading</a>
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告类操作 Disabled</a>
<div>
<a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_plain-default weui-btn_plain-disabled">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_plain-primary weui-btn_plain-disabled">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">按钮</a>
</div>
</div>
<div>
<a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
</div>
</div>
</script>
全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>安全培训系统代码</title>
<link rel="stylesheet" href="css/weui.css"/>
<link rel="stylesheet" href="css/example.css"/>
<script src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/jweixin-1.0.0.js"></script>
<script src="js/weui.min.js"></script>
<script src="js/example.js"></script>
</head>
<body ontouchstart style="width:100%;max-width:800px;margin:0 auto;
background:#eeeeee;top:0px; bottom:0px; left:0px; right:0px;
min-width:320px;">
<div id="container"></div>
<script type="text/html" id="tpl_home">
<div>
<div>
<h1>
<img src="./image/guojiadianwang.jpg" alt="WeUI" width="100%" max-width="800px" style="margin: 0 auto" />
</h1>
</div>
<div class="page__bd page__bd_spacing">
<ul>
<li>
<div class="weui-flex js_category">
<p>表单</p>
<img src="./images/icon_nav_form.png" alt="form">
</div>
<div class="page__category js_categoryInner">
<div class="weui-cells page__category-content">
<a href="javacript:;" class="weui-cell weui-cell_access js_item" data-id="button">
<div>
<p>成绩查询</p>
</div>
<div></div>
</a>
<a class="weui-cell weui-cell_access js_item" data-id="input" href="javascript:;">
<div>
<p>Input</p>
</div>
<div></div>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
var winH = $(window).height();
var categorySpace = 10;
$(‘.js_item‘).on(‘click‘, function(){
var id = $(this).data(‘id‘);
window.pageManager.go(id);
});
$(‘.js_category‘).on(‘click‘, function(){
var $this = $(this),
$inner = $this.next(‘.js_categoryInner‘),
$page = $this.parents(‘.page‘),
$parent = $(this).parent(‘li‘);
var innerH = $inner.data(‘height‘);
bear = $page;
if(!innerH){
$inner.css(‘height‘, ‘auto‘);
innerH = $inner.height();
$inner.removeAttr(‘style‘);
$inner.data(‘height‘, innerH);
}
if($parent.hasClass(‘js_show‘)){
$parent.removeClass(‘js_show‘);
}else{
$parent.siblings().removeClass(‘js_show‘);
$parent.addClass(‘js_show‘);
if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
var scrollTop = this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;
if(scrollTop > this.offsetTop){
scrollTop = this.offsetTop - categorySpace;
}
$page.scrollTop(scrollTop);
}
}
});
});
</script>
<!--button页面-->
<script type="text/html" id="tpl_button">
<div>
<div>
<h1>Button</h1>
<p>按钮</p>
</div>
<div class="page__bd page__bd_spacing">
<a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作 Normal</a>
<a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_loading"><i></i>页面主操作 Loading</a>
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">页面主操作 Disabled</a>
<a href="javascript:;" class="weui-btn weui-btn_default">页面次要操作 Normal</a>
<a href="javascript:;" class="weui-btn weui-btn_default weui-btn_loading"><i></i>页面次操作 Loading</a>
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">页面次要操作 Disabled</a>
<a href="javascript:;" class="weui-btn weui-btn_warn">警告类操作 Normal</a>
<a href="javascript:;" class="weui-btn weui-btn_warn weui-btn_loading"><i></i>警告类操作 Loading</a>
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告类操作 Disabled</a>
<div>
<a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_plain-default weui-btn_plain-disabled">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_plain-primary weui-btn_plain-disabled">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">按钮</a>
</div>
</div>
<div>
<a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
</div>
</div>
</script>
本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号