》》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 ...
随机推荐
- 解决Qt编译动态链接库could not find or load the Qt platform plugin "windows" in.问题
最近用Qt5做了一个项目的界面,在编译成可执行文件EXE之后,运行文件,提示: This application failed to start because it could not find o ...
- 数据库Oracle
一. 表空间和数据文件的关系: 文件组成:数据文件,控制文件,数据库日志文件 数据文件:.dbf 包含全部数据库数据(表,索引等),一个数据文件仅与一个数据库关联.一旦建立,只增不减. 表空间(Tab ...
- 关于ThinkPHP中的时间自动填充
<?php class NewsModel extends Model{ protected $_auto = array( array('time_at','mydate','1','call ...
- 机器学习之Logistic 回归算法
1 Logistic 回归算法的原理 1.1 需要的数学基础 我在看机器学习实战时对其中的代码非常费解,说好的利用偏导数求最值怎么代码中没有体现啊,就一个简单的式子:θ= θ - α Σ [( hθ( ...
- HBase流量限制和表负载均衡剖析
1.概述 在HBase-1.1.0之前,HBase集群中资源都是全量的.用户.表这些都是没有限制的,看似完美实则隐患较大.今天,笔者就给大家剖析一下HBase的流量限制和表的负载均衡. 2.内容 也许 ...
- 前端面试题(4)iframe有哪些优点？iframe缺点是什么？
优点: iframe能够原封不动的把嵌入的网页展现出来. 如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷. 网页如果为了统一风格,头 ...
- 【Java入门提高篇】Day1 抽象类
基础部分内容差不多讲解完了,今天开始进入Java提高篇部分,这部分内容会比之前的内容复杂很多,希望大家做好心理准备,看不懂的部分可以多看两遍,仍不理解的部分那一定是我讲的不够生动,记得留言提醒我. 好 ...
- 学python3的书
<Python Cookbook>3rd Edition http://python3-cookbook.readthedocs.io/zh_CN/latest/copyright.htm ...
- ubuntu下mysql提示Changed limits: max_open_files:1024解决办法
在配置我的md5解密网站cmd5.la的时候,mysql5.7出现了max_open_files: 1024, max_connections: 214,warning: Changed limits ...
- NullSafe基于Runtime的深度解析
Objective-C是一门动态语言,一个函数是由一个selector(SEL),和一个implement(IML)组成的. 执行一个方法时如果系统找不到方法会给几次机会寻找方法,实在没有此方法就会抛 ...