》》jquery-weui 初
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title></title>
<link rel="stylesheet" href="css/weui.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-weui.min.css" />
<link rel="stylesheet" href="css/index.css" />
</head> <body> <div class="weui-tab">
<!--分页-->
<div class="weui-tab__bd">
<!--第一页-->
<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
<!--轮播-->
<div class="swiper-container" style="margin: 5px;"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="img/swiper-1.jpg" width="100%" height="200" /></div>
<div class="swiper-slide"><img src="img/swiper-2.jpg" width="100%" height="200" /></div>
<div class="swiper-slide"><img src="img/swiper-3.jpg" width="100%" height="200" /></div>
</div> <div class="swiper-pagination"></div>
</div>
<!--列表-->
<div class="weui-cells"> <div class="weui-cell">
<div class="weui-cell__hd"><img src="img/icon_nav_actionSheet.png"></div>
<div class="weui-cell__bd">
<p>一天</p>
</div>
<div class="weui-cell__ft">一天</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><img src="img/icon_nav_article.png"></div>
<div class="weui-cell__bd">
<p>一天</p>
</div>
<div class="weui-cell__ft">一天</div>
</div>
</div> </div>
<!--第二页-->
<div id="tab2" class="weui-tab__bd-item">
<div class="weui-search-bar" id="searchBar">
<form class="weui-search-bar__form">
<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="#" 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="#" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
<div class="weui-grids">
<a href="#" class="weui-grid ">
<div class="weui-grid__icon">
<img src="img/icon_nav_button.png" alt="">
</div>
<p class="weui-grid__label" id="clckajx">
Button
</p>
</a>
<a href="#" class="weui-grid ">
<div class="weui-grid__icon">
<img src="img/icon_nav_cell.png" alt="">
</div>
<p class="weui-grid__label">
List
</p>
</a>
<a href="#" class="weui-grid ">
<div class="weui-grid__icon">
<img src="img/icon_nav_icons.png" alt="">
</div>
<p class="weui-grid__label">
Toast
</p>
</a>
<a href="#" class="weui-grid ">
<div class="weui-grid__icon">
<img src="img/icon_nav_dialog.png" alt="">
</div>
<p class="weui-grid__label">
Dialog
</p>
</a>
<a href="#" class="weui-grid ">
<div class="weui-grid__icon">
<img src="img/icon_nav_calendar.png" alt="">
</div>
<p class="weui-grid__label">
Calendar
</p>
</a>
<a href="#" class="weui-grid ">
<div class="weui-grid__icon">
<img src="img/icon_nav_city.png" alt="">
</div>
<p class="weui-grid__label">
City
</p>
</a>
<a href="#" class="weui-grid ">
<div class="weui-grid__icon">
<img src="img/icon_nav_select.png" alt="">
</div>
<p class="weui-grid__label">
Select
</p>
</a>
<a href="#" class="weui-grid ">
<div class="weui-grid__icon">
<img src="img/icon_nav_panel.png" alt="">
</div>
<p class="weui-grid__label">
Panel
</p>
</a> </div>
<!--json-->
<div class="box"style="background-color: #0086B3;width: 100%;height: 300px;"> <h1>11</h1>
<img src="img/icon_nav_actionSheet.png"/>
<p>11</p>
<div class="box">
<span></span>
<span></span> </div> </div> </div>
<!--第三页-->
<div id="tab3" class="weui-tab__bd-item"> </div>
<!--第四页-->
<div id="tab4" class="weui-tab__bd-item"> </div>
</div> <div class="weui-tabbar">
<a href="#tab1" class="weui-tabbar__item weui-bar__item--on">
<div class="weui-tabbar__icon">
<span class="iconfont"></span>
</div>
<p class="weui-tabbar__label">首页</p>
</a>
<a href="#tab2" class="weui-tabbar__item ">
<div class="weui-tabbar__icon">
<span class="iconfont"></span>
</div>
<p class="weui-tabbar__label">分类</p>
</a>
<a href="#tab3" class="weui-tabbar__item ">
<div class="weui-tabbar__icon">
<span class="iconfont"></span>
</div>
<p class="weui-tabbar__label">搜索</p>
</a>
<a href="#tab4" class="weui-tabbar__item ">
<div class="weui-tabbar__icon">
<span class="iconfont"></span>
</div>
<p class="weui-tabbar__label">我的</p>
</a>
</div>
</div> </body>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery-weui.min.js"></script>
<script src="js/swiper.min.js"></script>
<script>
$(".swiper-container").swiper({
loop: true,
autoplay: 1500
}); $(function(){ $.ajax({
type:"get",
url:'js/index.json', dataType:"json",
async:true,
success:function(data){
console.log(data) }
})
})
</script> </html>
》》jquery-weui 初的更多相关文章
- Jquery weui picker 支持label和value
万年没更新了. 最近用jquery weui. 在使用picker时需要一些问题. 就是让picker 显示label, 但是取值的时候取value用于存储. 官网例子如下 Jquery-weui 官 ...
- jQuery WeUI V0.4.2 发布
http://www.oschina.net/news/71590/jquery-weui-v0-4-2 jQuery WeUI V0.4.2 发布了! jQuery WeUI 中使用的是官方WeUI ...
- Jquery WeUI（一）
用于微信端的控件UI , 首先,需要做的是开发一个微信能访问的网页,并和微信关联 A． 创建一个空网站 B． 增加一般处理程序 A． 增加 web 网页 和空文件到项目中 B． 申请和配置测试服务 创 ...
- jquery weui ajax滚动加载更多
手机端使用jquery weui制作ajax滚动加载更多. 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: <!DOCTYPE html& ...
- jquery weui日期选择控件添加取消按钮
如图: 上图是jQuery weui的时间选择控件,红框处本来应该有个“取消”按钮的,可惜偏偏没有,当用户不想选择的时候就不好处理,虽然插件提供了点击其他区域关闭的功能,但过于隐晦,不容易发现,因此本 ...
- jQuery weui Select组件显示指定值
jQuery weui有个支持单选或者多选的select弹出层,默认他是这样的 第2部分选择什么值,第1部分就显示什么值,一般的场景支持是没问题了,但本次开发碰到了一个问题. 需求描述: 职业名称后面 ...
- jquery weui 图片浏览器Photo Browser
jquery weui 图片浏览器Photo Browser 如何使用? 对应组件地址:http://jqweui.com/extends#swiper 先说说业务场景:类似朋友圈这样的布局效果,点击 ...
- jQuery WeUI
jQuery WeUI jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时 ...
- 基于Jquery WeUI的微信开发H5页面控件的经验总结（1）
在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...
- 基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...
随机推荐
- VMware三种网络模式
VMware网络配置详解一:三种网络模式简介安装好虚拟机以后,在网络连接里面可以看到多了两块网卡: 其中VMnet1是虚拟机Host-only模式的网络接口,VMnet8是NAT模式的网络接口,这些后 ...
- C# linq创建嵌套组
以下示例演示如何在 LINQ 查询表达式中创建嵌套组. 首先根据学生年级创建每个组,然后根据每个人的姓名进一步细分为小组. public void QueryNestedGroups() { var ...
- PTA 数据结构 银行业务队列简单模拟
仅供参考,请勿粘贴 设某银行有A.B两个业务窗口,且处理业务的速度不一样,其中A窗口处理速度是B窗口的2倍 -- 即当A窗口每处理完2个顾客时,B窗口处理完1个顾客.给定到达银行的顾客序列,请按业务完 ...
- PHPMailer < 5.2.18 远程代码执行漏洞（CVE-2016-10033）
PHPMailer < 5.2.18 Remote Code Execution 本文将简单展示一下PHPMailer远程代码执行漏洞(CVE-2016-10033)的利用过程,使用的是别人已经 ...
- 【译】Asp.Net Identity Cookies 格式化-中英对照版
原文出处 Trailmax Tech Max Vasilyev: ASP.Net MVC development in Aberdeen, Scotland I've been reached out ...
- Python函数篇：装饰器
装饰器本质上是一个函数,该函数用来处理其他函数,它可以让其他函数在不需要修改代码的前提下增加额外的功能,装饰器的返回值也是一个函数对象.它经常用于有切面需求的场景,比如:插入日志.性能测试.事务处理. ...
- Java面试宝典
相关概念 面向对象的三个特征 封装,继承,多态.这个应该是人人皆知.有时候也会加上抽象. 多态的好处 允许不同类对象对同一消息做出响应,即同一消息可以根据发送对象的不同而采用多种不同的行为方式(发送消 ...
- maven项目打包运行出错问题汇总
maven项目打包时总会出现莫名其妙的错误,现总结一下. 打包方式:在maven项目底下运行cmd,输入mvn clean package,会自动按pom.xml的配置打成包.使用java -jar ...
- C#2.0中使用yield关键字简化枚举器的实现
我们知道要使用foreach语句从客户端代码中调用迭代器,必需实现IEnumerable接口来公开枚举器,IEnumerable是用来公开枚举器的,它并不实现枚举器,要实现枚举器必需实现IEnumer ...
- MyEclipse10激活方法
背景:因为以前一直使用的是myeclipse8.6版本,但因为版本太低有些功能不支持,于是想试用下myeclipse10.0版本,但是下载后发现需要激活,但在激活的过程中遇到了很多坑,于是便有了本文的 ...