<!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. vs2013配置opencv环境

    首先本人的opencv版本是opencv2.4.9. 步骤如下: 1. 首先下载opencv2.4.9 2. 配置环境变量: 3. 系统变量:D:\opencv\build\x86\vc12\bin ...

  2. Android 开发笔记___基本适配器的使用__BaseAdapter

    之前用到过ArryAdapter适用于纯文本的列表数据,SimpleAdapter适用于带图标的列表数据,但在实际应用中常常有更复杂的列表,比如同一项中存在多个控件,这时候用前面的两个会比较复杂,而且 ...

  3. 原生 drag drop HTML5

    drag事件( dragstart -- drag -- dragend )   当按下鼠标开始drag一个可以拖动的对象时,触发dragstart事件,如果元素是不可拖动的话,会出现一个不可拖动的图 ...

  4. JAVA 的关键字 、

    关键字: 被JAVA语言赋予特定含义的单词, 特点: 组成关键字的单词的字母全部小写 注意: A:goto 和 const 是保留字 B: 类似于Notepad++ 这样的高级记事本,针对关键字有特殊 ...

  5. apply和call的区别

    每一个javascript中的Function对象都有一个apply()方法和call()方法,他们的基本用法为: /*apply()方法*/ function.apply(thisObj[, arg ...

  6. Vim自动补全神器YouCompleteMe的配置

    简介:YouCompleteMe号称Vim的自动补全神器,该项目在github的地址:YouCompleteMe:以下在10.0.1 build-1379776平台配置完成 插件安装操作: 1.确保V ...

  7. python基础（一）------Python基础语法与介绍

    编程语言的历史和Python开发 一.编程语言 1.编程语言也是"语言"与英语,汉语等类似,掌握其语法结构,灵活 的运用其语法规则为之重要.          编程语言实现的是程序 ...

  8. GridControl使用技巧总结，更新中...

    1如何禁用GridControl中单击列弹出右键菜单 设置Run Design->OptionsMenu->EnableColumnMenu 设置为:false 2如何定位到第一条数据/记 ...

  9. canvas三环加载进度条

    之前做了一个三个圆形叠加在一起的加载,用的是定位和cile来操作,但是加载的头部不能是圆形.后来用canvas做了一个,但是这个加载的进度不好调整,原理很简单,就是让一个圆,按照圆形轨迹进行运动就可以 ...

  10. [线性筛]P1865 A % B Problem

    题目背景 题目名称是吸引你点进来的 实际上该题还是很水的 题目描述 区间质数个数 输入输出格式 输入格式: 一行两个整数 询问次数n,范围m 接下来n行,每行两个整数 l,r 表示区间 输出格式: 对 ...