<!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. JavaScript--我发现，原来你是这样的JS：面向对象编程OOP[2]--(创建你的那个对象吧)

    一.介绍 我们继续面向对象吧,这次是面向对象编程的第二篇,主要是讲创建对象的模式,希望大家能从博客中学到东西. 时间过得很快,还是不断的学习吧,为了自己的目标. 二.创建对象 1.前面的创建对象方式 ...

  2. 搭建Maven私服那点事

    摘要:本文主要介绍在CentOS7.1下使用nexus3.6.0搭建maven私服,以及maven私服的使用(将自己的Maven项目指定到私服地址.将第三方项目jar上传到私服供其他项目组使用) 一. ...

  3. Android 开发笔记___滚动视图__scroll view

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  4. Clipboard 剪辑板

    ie是最早支持剪辑板相关事件(并且允许javascript接入)的浏览器(鼠标右键复制)   相关事件: beforecopy— Fires just before the copy operatio ...

  5. ⒃bootstrap组件 轮播图 基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. mac链接linux终端，shell脚本发布代码

    项目的业务需求:从mac端直接连上linux服务终端,并发布相关的代码 一.使用ssh链接上linux服务端 1.cd ~/.ssh 2.vi config,按照下面的内容配置config文件,然后: ...

  7. vue 使用axios 跨域请求数据的问题

    axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader(& ...

  8. 全排列Permutations

    描述 Given a collection of numbers, return all possible permutations.For example,[1,2,3] have the foll ...

  9. kickstart 实现批量安装centos7.x系统

    1.1 安装系统的方法 l  光盘(ISO文件,光盘的镜像文件)===>>每一台物理机都得给一个光驱,如果用外置光驱的话,是不是每台机器都需要插一下 l  U盘:ISO镜像刻录到U盘==& ...

  10. Spring+Spring MVC+MyBatis框架集成

    目录 一.新建一个基于Maven的Web项目 二.创建数据库与表 三.添加依赖包 四.新建POJO实体层 五.新建MyBatis SQL映射层 六.JUnit测试数据访问 七.完成Spring整合My ...