您的位置:首页 > 产品设计 > UI/UE

Weui 微信网站开发样式插件使用教程

2016-08-17 22:02 681 查看
微信的网页样式正式发布了,搜了一下,正式引入了乐学一百微信端的项目中。



<div class="weui_grids">
<a href="javascript:;" class="weui_grid js_grid" data-id="button">
<div class="weui_grid_icon">
<img src="./images/icon_nav_button.png" alt="">
</div>
<p class="weui_grid_label">
Button
</p>
</a>
<a href="javascript:;" class="weui_grid js_grid" data-id="cell">
<div class="weui_grid_icon">
<img src="./images/icon_nav_cell.png" alt="">
</div>
<p class="weui_grid_label">
Cell
</p>
</a>
<a href="javascript:;" class="weui_grid js_grid" data-id="toast">
<div class="weui_grid_icon">
<img src="./images/icon_nav_toast.png" alt="">
</div>
<p class="weui_grid_label">
Toast
</p>
</a>
...
</div>




调用方法



<!-- 微信样式引入开始 -->
<link rel="stylesheet" href="public/js/weui/dist/lib/weui.css">
<link rel="stylesheet" href="public/js/weui/dist/css/jquery-weui.css">
<script src="public/js/weui/dist/lib/jquery-2.1.4.js"></script>
<script src="public/js/weui/dist/js/jquery-weui.js"></script>
<!-- 微信样式引入结束 -->
在附件中下载,放入自己的项目中就可以使用了。
具体的样式书写格式
地址:

http://lihongxun945.github.io/jquery-weui/components

压缩包下载:
http://tieba.baidu.com/p/4314274996
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: