<!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 初的更多相关文章

  1. Jquery weui picker 支持label和value

    万年没更新了. 最近用jquery weui. 在使用picker时需要一些问题. 就是让picker 显示label, 但是取值的时候取value用于存储. 官网例子如下 Jquery-weui 官 ...

  2. jQuery WeUI V0.4.2 发布

    http://www.oschina.net/news/71590/jquery-weui-v0-4-2 jQuery WeUI V0.4.2 发布了! jQuery WeUI 中使用的是官方WeUI ...

  3. Jquery WeUI（一）

    用于微信端的控件UI , 首先,需要做的是开发一个微信能访问的网页,并和微信关联 A． 创建一个空网站 B． 增加一般处理程序 A． 增加 web 网页 和空文件到项目中 B． 申请和配置测试服务 创 ...

  4. jquery weui ajax滚动加载更多

    手机端使用jquery weui制作ajax滚动加载更多. 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: <!DOCTYPE html& ...

  5. jquery weui日期选择控件添加取消按钮

    如图: 上图是jQuery weui的时间选择控件,红框处本来应该有个“取消”按钮的,可惜偏偏没有,当用户不想选择的时候就不好处理,虽然插件提供了点击其他区域关闭的功能,但过于隐晦,不容易发现,因此本 ...

  6. jQuery weui Select组件显示指定值

    jQuery weui有个支持单选或者多选的select弹出层,默认他是这样的 第2部分选择什么值,第1部分就显示什么值,一般的场景支持是没问题了,但本次开发碰到了一个问题. 需求描述: 职业名称后面 ...

  7. jquery weui 图片浏览器Photo Browser

    jquery weui 图片浏览器Photo Browser 如何使用? 对应组件地址:http://jqweui.com/extends#swiper 先说说业务场景:类似朋友圈这样的布局效果,点击 ...

  8. jQuery WeUI

    jQuery WeUI jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时 ...

  9. 基于Jquery WeUI的微信开发H5页面控件的经验总结（1）

    在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...

  10. 基于Jquery WeUI的微信开发H5页面控件的经验总结(2)

    在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...

随机推荐

  1. CSS3 动画 animation和@keyframes

    CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...

  2. jQuery_DOM学习之------遍历节点

    一.children()方法 例子: <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

  3. 一款超好用轻量级JS框架——Zepto.js(下)

       前   言 絮叨絮叨 前面和大家分享了Zepto的原型方法,相信大家也对这个框架有了一定的了解,那么今天再和大家分享一下它的对象方法吧! 1add() 支持一到二个参数,第一个为选择器,与$() ...

  4. SVN服务迁移备份操作步骤

    SVN服务备份操作步骤 1.准备源服务器和目标服务器 源服务器:192.168.1.250 目标服务器:192.168.1.251 root/rootroot 2.对目标服务器(251)装SVN服务器 ...

  5. 微信支付——openid获取不到

    1.写微信支付遇到状况,通过wx.login获取code,然后向微信服务器获取openid,获取失败:{"errcode":40029,"errmsg":&qu ...

  6. C#.Net调用VB.Net中的MY

    用过VB.NET的人应该只要MY有多强大了吧,是不是很想在C#中也能调用呢? 当然是可以的,.net作为微软的跨语言的平台,必须是能实现的,不然微软就自己打自己嘴巴了~ 回到正题上: 1.在程序中加上 ...

  7. JavaScript:在JS中截取字符串的方法

    这篇主要说一说截取字符串的方法,用于帮助自己缕清方法的作用,参数的意义,返回值,是否对于原来的字符串进行了操作等. 在javascript中,常见的截取字符串的方法有slice().substring ...

  8. 使用一个for循环将N*N的二维数组的所有值置1

    <?php // 使用一个for循环将N*N的二维数组的所有值置1 $n = ; $a = []; ;$i<$n*$n;$i++){ $a[$i/$n][$i%$n] = ; } prin ...

  9. sockt初级了解 感悟 一起打怪升级偶

    刚接触来谈谈对sockt基础的一点理解,多线性下次再发.也逛了逛博客,有一篇基础讲的停息在这推荐下sockt套接字编程全绍辉 首先贴下代码#服务器 import socket skt=socket.s ...

  10. java中的static和final关键字

    一:static 1)修饰成员变量: static关键字可以修饰成员变量,它所修饰的成员变量不属于对象的数据结构,而是属于类的变量,通常通过类名来引用static成员. 当创建对象后,成员变量是存储在 ...