add searchbar

Tencent · Feb 25, 2016 · f081257 · f081257
1 parent fdf5c3f
commit f081257
Show file tree

Hide file tree

Showing 12 changed files with 463 additions and 3 deletions.
diff --git a/dist/example/example.css b/dist/example/example.css
diff --git a/dist/example/example.js b/dist/example/example.js
@@ -313,6 +313,49 @@ $(function () {
             }
         }
     };
+    var searchbar = {
+        name:"searchbar",
+        url:"#searchbar",
+        template: '#tpl_searchbar',
+        events:{
+            '#weui_search_input':{
+                focus:function(){
+                    //searchBar
+                    var $weuiSearchBar = $('.weui_search_bar');
+                    $weuiSearchBar.addClass('with_cancel');
+                },
+                blur:function(){
+                    var $weuiSearchBar = $('.weui_search_bar');
+                    $weuiSearchBar.removeClass('with_cancel');
+                    if($(this).val()){
+                        $('.weui_search_text').hide();
+                    }else{
+                        $('.weui_search_text').show();
+                    }
+                },
+                input:function(){
+                    var $searchShow = $(".search_show");
+                    if($(this).val()){
+                        $searchShow.show();
+                    }else{
+                        $searchShow.hide();
+                    }
+                }
+            },
+            "#weui_search_cancel":{
+                touchend:function(){
+                    $(".search_show").hide();
+                    $('#weui_search_input').val('');
+                }
+            },
+            "#weui_search_clear":{
+                touchend:function(){
+                    $(".search_show").hide();
+                    $('#weui_search_input').val('');
+                }
+            }
+        }
+    };
     var icons = {
         name: 'icons',
         url: '#icons',
@@ -334,6 +377,7 @@ $(function () {
         .push(card)
         .push(actionSheet)
         .push(icons)
+        .push(searchbar)
         .default('home')
         .init();
 });
diff --git a/dist/example/index.html b/dist/example/index.html
@@ -107,6 +107,14 @@ <h1 class="page_title">WeUI</h1>
                     Icons
                 </p>
             </a>
+            <a href="javascript:;" class="weui_grid js_grid" data-id="searchbar">
+                <div class="weui_grid_icon">
+                    <img src="./images/icon_nav_icons.png" alt="">
+                </div>
+                <p class="weui_grid_label">
+                    SearchBar
+                </p>
+            </a>
         </div>
     </div>
 </div>
@@ -766,6 +774,52 @@ <h1 class="page_title">Icons</h1>
         </div>
     </div>
 </div>
+</script>
+    <script type="text/html" id="tpl_searchbar">
+<div class="page">
+    <div class="hd">
+        <h1 class="page_title">searchBar</h1>
+    </div>
+    <div class="bd">
+        <!--<a href="javascript:;" class="weui_btn weui_btn_primary">点击展现searchBar</a>-->
+        <div class="weui_search_bar">
+            <form class="weui_search_outer">
+                <div class="weui_search_inner">
+                    <i class="weui_icon_search"></i>
+                    <input type="search" class="weui_search_input" id="weui_search_input" placeholder="搜索" required/>
+                    <a href="javascript:" class="weui_icon_clear" id="weui_search_clear"></a>
+                </div>
+                <label for="weui_search_input" class="weui_search_text">
+                    <i class="weui_icon_search"></i>
+                    <span>搜索</span>
+                </label>
+            </form>
+            <a href="javascript:" class="weui_search_cancel" id="weui_search_cancel">取消</a>
+        </div>
+        <div class="weui_cells weui_cells_access search_show">
+            <div class="weui_cell">
+                <div class="weui_cell_bd weui_cell_primary">
+                    <p>实时搜索文本</p>
+                </div>
+            </div>
+            <div class="weui_cell">
+                <div class="weui_cell_bd weui_cell_primary">
+                    <p>实时搜索文本</p>
+                </div>
+            </div>
+            <div class="weui_cell">
+                <div class="weui_cell_bd weui_cell_primary">
+                    <p>实时搜索文本</p>
+                </div>
+            </div>
+            <div class="weui_cell">
+                <div class="weui_cell_bd weui_cell_primary">
+                    <p>实时搜索文本</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
 </script>
     <script src="./zepto.min.js"></script>
     <script src="./example.js"></script>

diff --git a/dist/style/weui.css b/dist/style/weui.css
diff --git a/dist/style/weui.min.css b/dist/style/weui.min.css
diff --git a/src/example/example.js b/src/example/example.js
@@ -313,6 +313,49 @@ $(function () {
             }
         }
     };
+    var searchbar = {
+        name:"searchbar",
+        url:"#searchbar",
+        template: '#tpl_searchbar',
+        events:{
+            '#weui_search_input':{
+                focus:function(){
+                    //searchBar
+                    var $weuiSearchBar = $('.weui_search_bar');
+                    $weuiSearchBar.addClass('with_cancel');
+                },
+                blur:function(){
+                    var $weuiSearchBar = $('.weui_search_bar');
+                    $weuiSearchBar.removeClass('with_cancel');
+                    if($(this).val()){
+                        $('.weui_search_text').hide();
+                    }else{
+                        $('.weui_search_text').show();
+                    }
+                },
+                input:function(){
+                    var $searchShow = $(".search_show");
+                    if($(this).val()){
+                        $searchShow.show();
+                    }else{
+                        $searchShow.hide();
+                    }
+                }
+            },
+            "#weui_search_cancel":{
+                touchend:function(){
+                    $(".search_show").hide();
+                    $('#weui_search_input').val('');
+                }
+            },
+            "#weui_search_clear":{
+                touchend:function(){
+                    $(".search_show").hide();
+                    $('#weui_search_input').val('');
+                }
+            }
+        }
+    };
     var icons = {
         name: 'icons',
         url: '#icons',
@@ -334,6 +377,7 @@ $(function () {
         .push(card)
         .push(actionSheet)
         .push(icons)
+        .push(searchbar)
         .default('home')
         .init();
 });
diff --git a/src/example/example.less b/src/example/example.less
@@ -168,6 +168,17 @@ body, .page {
     }
 }
 
+//search bar
+.search_show {
+    display: none;
+    margin-top: 0;
+    font-size: 14px;
+    .weui_cell_bd{
+        padding:2px 0 2px 20px;
+        color:#666;
+    }
+}
+
 @keyframes slideIn {
     from {
         transform: translate3d(100%, 0, 0);

diff --git a/src/example/fragment/home.html b/src/example/fragment/home.html
@@ -93,6 +93,14 @@ <h1 class="page_title">WeUI</h1>
                     Icons
                 </p>
             </a>
+            <a href="javascript:;" class="weui_grid js_grid" data-id="searchbar">
+                <div class="weui_grid_icon">
+                    <img src="./images/icon_nav_icons.png" alt="">
+                </div>
+                <p class="weui_grid_label">
+                    SearchBar
+                </p>
+            </a>
         </div>
     </div>
 </div>
diff --git a/src/example/fragment/searchbar.html b/src/example/fragment/searchbar.html
@@ -0,0 +1,44 @@
+<div class="page">
+    <div class="hd">
+        <h1 class="page_title">searchBar</h1>
+    </div>
+    <div class="bd">
+        <!--<a href="javascript:;" class="weui_btn weui_btn_primary">点击展现searchBar</a>-->
+        <div class="weui_search_bar">
+            <form class="weui_search_outer">
+                <div class="weui_search_inner">
+                    <i class="weui_icon_search"></i>
+                    <input type="search" class="weui_search_input" id="weui_search_input" placeholder="搜索" required/>
+                    <a href="javascript:" class="weui_icon_clear" id="weui_search_clear"></a>
+                </div>
+                <label for="weui_search_input" class="weui_search_text">
+                    <i class="weui_icon_search"></i>
+                    <span>搜索</span>
+                </label>
+            </form>
+            <a href="javascript:" class="weui_search_cancel" id="weui_search_cancel">取消</a>
+        </div>
+        <div class="weui_cells weui_cells_access search_show">
+            <div class="weui_cell">
+                <div class="weui_cell_bd weui_cell_primary">
+                    <p>实时搜索文本</p>
+                </div>
+            </div>
+            <div class="weui_cell">
+                <div class="weui_cell_bd weui_cell_primary">
+                    <p>实时搜索文本</p>
+                </div>
+            </div>
+            <div class="weui_cell">
+                <div class="weui_cell_bd weui_cell_primary">
+                    <p>实时搜索文本</p>
+                </div>
+            </div>
+            <div class="weui_cell">
+                <div class="weui_cell_bd weui_cell_primary">
+                    <p>实时搜索文本</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/example/index.html b/src/example/index.html
@@ -25,6 +25,7 @@
     <link rel="import" href="./fragment/card.html">
     <link rel="import" href="./fragment/actionsheet.html">
     <link rel="import" href="./fragment/icons.html">
+    <link rel="import" href="./fragment/searchbar.html">
     <script src="./zepto.min.js"></script>
     <script src="./example.js"></script>
 </body>

diff --git a/src/style/weui.less b/src/style/weui.less
@@ -44,3 +44,6 @@
 
 //action sheet
 @import "./widget/weui_tips/weui_actionsheet";
+
+//searchbar
+@import "./widget/weui_searchbar/weuui_searchbar";