》》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 ...
随机推荐
- js中的浅复制和深复制
浅复制:浅复制是复制引用,复制后的引用都是指向同一个对象的实例,彼此之间的操作会互相影响 深复制:深复制不是简单的复制引用,而是在堆中重新分配内存,并且把源对象实例的所有属性都进行新建复制,以保证深复 ...
- [转载] ConcurrentHashMap原理分析
转载自http://blog.csdn.net/liuzhengkang/article/details/2916620 集合是编程中最常用的数据结构.而谈到并发,几乎总是离不开集合这类高级数据结构的 ...
- canvas图表(4) - 散点图
原文地址:canvas图表(4) - 散点图 今天开始完成散点图,做完这一节,我的canvas图表系列就算是完成了,毕竟平时最频繁用到的就是这几类图表了:柱状,折线,饼图,散点.经过编写canvas图 ...
- Python 集合整理
- 一个简单的迷你jQuery实现
//仅提供与学习使用(function () { var _$ = window.$; var _jQuery = window.jQuery; //暴露外部使用的一个接口 var jQuery = ...
- 《Maven实战》 第7章 生命周期与插件
7.1什么是生命周期 软件开发人员每天都在对项目进行清理.编译.测试及部署,Maven生命周期是对所有构建过程进行抽象和统一,含项目的清理.初始化.编译.测试.打包.集成测试.验证.部署和站点生成等几 ...
- NodeJS网络爬虫
原文地址:NodeJS网络爬虫 网上有很多其他语言平台版本的网络爬虫,比如Python,Java.那怎么能少得了我们无所不能的javascript呢
- ThinkPHP中ajax绑定select下拉框无法显示
html代码: 控制器代码: 其中的<option value="{$vo.gradeId}">{$one.gradeName}</option> 在操作过 ...
- unity中.meta提交错误操作导致空脚本
工作时遇到了一个奇葩的问题,同事做的界面,再策划那里死活无法运行,其他同事的都没有问题.简单一查,是界面上挂了个空脚本,但是同事提交了对应的脚本,其他人那里脚本是正常.随后想到是否是.meta的问题. ...
- python网络编程之单线程之间的并发
单线程之间的并发就是利用一个线程实现并发的效果,也就是利用了cup遇到阻塞的那段时间去做别的事情,从而提高了cup的利用率,使之在单个线程中就实现了并发的效果. 下面就是一个简单的服务端单个线程实现并 ...