》》jquery-weui 初

時間  2019-11-09
標籤 jquery weui 欄目 JQuery 简体版
原文   原文鏈接 
<!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">&#xe608;</span>
                    </div>
                    <p class="weui-tabbar__label">首頁</p>
                </a>
                <a href="#tab2" class="weui-tabbar__item ">
                    <div class="weui-tabbar__icon">
                        <span class="iconfont">&#xe600;</span>
                    </div>
                    <p class="weui-tabbar__label">分類</p>
                </a>
                <a href="#tab3" class="weui-tabbar__item ">
                    <div class="weui-tabbar__icon">
                        <span class="iconfont">&#xe631;</span>
                    </div>
                    <p class="weui-tabbar__label">搜索</p>
                </a>
                <a href="#tab4" class="weui-tabbar__item ">
                    <div class="weui-tabbar__icon">
                        <span class="iconfont">&#xe648;</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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程