》》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 ...
随机推荐
- JavaScript变量存储浅析
var test=100; function foo(){ console.log(test);//undefined var test=200; console.log(test); } 我们明明定 ...
- 状态码为 200 from cache和304 Not modified的区别
1.请求状态码为 200 from cache: 表示该资源已经被缓存过,并且在有效期内,所以不再向浏览器发出请求,直接使用本地缓存. 如下图: 2.状态码为 304 Not modified: 表 ...
- Visual formatting model 可视化格式模型
在可视化格式模型里,每个元素都是由一个或者多个盒子组成,这些盒子的布局由下面规则控制: box dimensions and type.(块元素和行内元素) positioning scheme (n ...
- nohup和&后台运行,查看占用端口进程
1.nohup 用途:不挂断地运行命令. 语法:nohup Command [ Arg - ] [ & ] 无论是否将 nohup 命令的输出重定向到终端,输出都将附加到当前目录的 nohup ...
- tomcat配置虚拟路径保存、访问图片
一些项目中往往需要上传一些图片文件之类,一般不建议直接保存在数据库内,往往是讲图片等资源保存在服务器的某个文件夹下,传统做法是上传到部署目录下,通过相对路径进行访问.这样当我们系统需要进行升级,进行全 ...
- hibernate flushMode 错误
1 十一月 15, 2017 10:13:36 上午 org.apache.struts2.dispatcher.Dispatcher error 2 严重: Exception occurred d ...
- C#去掉字符串头尾指定字符
private void button2_Click(object sender, EventArgs e) {//去掉字符串头尾指定字符 string MyInf ...
- org.springframework.web.filter.DelegatingFilterProxy的作用
一.类结构 DelegatingFilterProxy类继承GenericFilterBean,间接实现了Filter,故而该类属于一个过滤器.那么就会有实现Filter中init.doFilter. ...
- gdb分析core文件
转载自:http://blog.chinaunix.net/u2/83905/showart_2134570.html 在Unix系统下,应用程序崩溃,一般会产生core文件,如何根据core文件查找 ...
- MySQL阿里云安装问题小记
1. [root@iZ2zeg11g0cdei5171kqskZ mysql]# ./scripts/mysql_install_db --user=mysql FATAL ERROR: please ...