<!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. AngularJS学习篇（十八）

    AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...

  2. javascript中new操作符

    当代码var p= new Person("tom")执行时,其实内部做了如下几件事情: 1.创建一个空白对象(new Object()). 2.拷贝Person.prototyp ...

  3. 单元测试框架 unittest 的运行方法if __name__ == '__main__': unittest.main()

    1. if __name__ == '__main__': unittest.main()2. 测试用例实例根据测试的特点分组在一起. unittest为此提供了一个机制:测试套件由unittest' ...

  4. [译]ASP.NET Core 2.0 区域

    问题 如何将一个规模庞大的ASP.NET Core 2.0应用程序进行逻辑分组? 答案 新建一个ASP.NET Core 2.0空项目,修改Startup类,增加Mvc服务和中间件: public v ...

  5. 基于 Aspose.Cells与XML导入excel 数据----操作类封装

    前言 导入excel数据, 在每个项目中基本上都会遇到,第三方插件或者基于微软office,用的最多的就是npoi,aspose.cells和c#基于office这三种方式,其中各有各的优缺点,在这也 ...

  6. 为什么选择使用Sass而不是Less？

    这篇文章主要解答以下几个问题,供前端开发者的新手参考. 1.什么是Sass和Less? 2.为什么要使用CSS预处理器? 3.Sass和Less的比较 4.为什么选择使用Sass而不是Less? 什么 ...

  7. 制作代码模板的 LaTex 模板

    Tex 真的是一个用起来非常舒服的排版工具(对于排版要求高的人来说),去比赛前一天放弃了markdown转pdf来生成代码模板,现学Tex(其实美赛已经用过了:P). 推荐一个链接:TeX - Bea ...

  8. 判断pdf、word文档、图片等文件类型（格式）、大小的简便方法

    判断pdf.word文档.图片等文件类型(格式).大小的简便方法 很久没发文了,今天有时间就写一下吧. 关于上传文件,通常我们都需要对其进行判断,限制上传的类型,如果是上传图片,我们甚至会把图片转化成 ...

  9. iOS学习——如何在mac上获取开发使用的模拟器的资源以及模拟器中每个应用的应用沙盒

    如题,本文主要研究如何在mac上获取开发使用的模拟器的资源以及模拟器中每个应用的应用沙盒.做过安卓开发的小伙伴肯定很方便就能像打开资源管理器一样查看我们写到手机本地或应用中的各种资源,但是在iOS开发 ...

  10. 【Win 10 应用开发】UI Composition 札记（八）：用 XamlLight 制作灯光效果

    前面老周已介绍过灯光的使用,如果你忘了,请用九牛二虎之力猛点击这里去复习一下.本篇老周再介绍另一种添加灯光的方法,这种方法是专为 XAML 元素而设计的,可以很方便地为可视化元素添加灯光效果. 不知道 ...