<!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. keepalived中的脑裂

    在高可用(HA)系统中,当联系2个节点的“心跳线”断开时,本来为一整体.动作协调的HA系统,就分裂成为2个独立的个体.由于相互失去了联系,都以为是对方出了故障.两个节点上的HA软件像“裂脑人”一样,争 ...

  2. Azure ARM虚拟机部署反恶意软件-安全扩展

    Azure虚拟机,默认情况下没有安装杀毒软件.如果您有此需求可以通过Azure 扩展进行安装,有关Azure反恶意软件的官方说明请参考:https://docs.azure.cn/zh-cn/secu ...

  3. 注销/etc/passwd带来的系统登陆不上

    今天在修改虚拟机密码上的时候,将/etc/passwd中root所在的哪行注销掉了,想象是注销了,root登陆时应该不要输入密码,结果是系统进度条走到最后的时候 进入不了系统了. 结果去普及了下/et ...

  4. 模拟制作网易云音乐(AudioContext)

    记得好早前在慕课网上看到一款可视化音乐播放器,当前是觉得很是神奇,还能这么玩.由于当时刚刚转行不久,好多东西看得稀里糊涂不明白,于是趁着现在有时间又重新梳理了一遍,然后参照官网的API模拟做了一款网易 ...

  5. VS2015编译VS2013工程文件出错

    错误:未能从程序集"C:\Program Files (x86)\MSBuild\14.0\bin\Microsoft.Build.Tasks.v14.0.dll"加载任务工厂&q ...

  6. 基于QEMU的ARM Cortex-A9开发板Vexpress-ca9的Linux内核的编译和运行

    宿主机:Ubuntu16.04 x64(Linux内核4.4.0) 交叉编译工具链:gcc-arm-linux-gnueabiarm-linux-gcc:4.4.3QEMU:2.5.0Linux ke ...

  7. 表空间与数据文件Offline,online的区别

    首先明确,表空间与数据文件的关系:Oracle数据库表空间有两种,一种smallfile小文件表空间(默认),另一种bigfile大文件表空间: 默认表空间与数据文件的关系:允许一对多的处理方式,一个 ...

  8. oracle精简客户端安装配置及常见问题

    有关Instant client 安装步骤 1.首先在官网下载两个安装包instant/sqlplus,对相关文件进行解压缩,存放本地路径 官网地址:http://www.oracle.com/tec ...

  9. ReentrantLock可重入锁的使用场景

    摘要 从使用场景的角度出发来介绍对ReentrantLock的使用,相对来说容易理解一些. 场景1:如果发现该操作已经在执行中则不再执行(有状态执行) a.用在定时任务时,如果任务执行时间可能超过下次 ...

  10. ssh相关原理学习与常见错误总结

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...