缘多多
缘多多
  • 发布:2015-07-07 10:40
  • 更新:2015-08-19 10:41
  • 阅读:4377

固定搜索框,弹出框。

分类:MUI

问题一:H5或MUI有木有固定位置的搜索框?就是时时显示在页面的最上方,在导航栏的下方,就好像两个导航栏似的效果,只是下方的导航栏是一个搜索框或按钮。或者有固定的方法也可以。

问题二:想实现点击按钮,弹出一个弹出框,类似于安卓原生的dialog,在dialog里想添加复选框,然后选择复选框后点击确定,在页面显示出复选框内选中的内容。有能实现的方法么?也就是在dialog里选的数据可以带出来。

以上问题有解决方案的可以说一说,指点一下就好,十分感谢!

2015-07-07 10:40 负责人:无 分享
已邀请:
小微

小微

第一个问题:
<div class="mui-input-row mui-search">
<input id="qdkey" type="search" placeholder="搜索" >
</div>
通过document.getElementById("qdkey").addEventListener('input',function(){
搜索的具体代码
});

第二个问题有几种方法,但是最简单的方法是更新最新的hbuild。查看example里的indexed-list-select.html

  • 缘多多 (作者)

    感谢回答!第一个问题我主要是想让他的位置固定,你确定你这个是固定位置的么?可以时时显示在在页面的最上方,比如让页面向下滑动了,这个搜索框是否可以做到一直在你可见的屏幕最上方,想导航栏一样,可以随时点击搜索框。第二个问题我在MUI的JS文档里找到一个弹出菜单,正在修改研究。

    2015-07-07 12:46

  • 缘多多 (作者)

    我看了demo里的list,就是想要这种效果,正在努力研究,先来给你点个赞。

    2015-07-07 14:24

  • 缘多多 (作者)

    请问MUI的开关的滑动触发能取消么?只要动画效果,但不要滑动触发,只靠点击。

    2015-07-09 16:30

缘多多

缘多多 (作者)

感谢回答!第一个问题我主要是想让他的位置固定,你确定你这个是固定位置的么?可以时时显示在在页面的最上方,比如让页面向下滑动了,这个搜索框是否可以做到一直在你可见的屏幕最上方,想导航栏一样,可以随时点击搜索框。第二个问题我在MUI的JS文档里找到一个弹出菜单,正在修改研究,修改好后会把成品放过来。

缘多多

缘多多 (作者)

问题二中我实现了一个弹出菜单

<a href="#popover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>  
<div id="popover" class="mui-popover">  
  <ul class="mui-table-view">  
    <li class="mui-table-view-cell"><a href="#">Item1</a></li>  
    <li class="mui-table-view-cell"><a href="#">Item2</a></li>  
    <li class="mui-table-view-cell"><a href="#">Item3</a></li>  
    <li class="mui-table-view-cell"><a href="#">Item4</a></li>  
    <li class="mui-table-view-cell"><a href="#">Item5</a></li>  
  </ul>  
</div>

我怎么监听这弹出框我选取了哪些信息呢?或者说怎么对这个弹出菜单进行监听?我在这个菜单里加了一个按钮,怎么实现点击按钮让弹出菜单关闭呢?

mui('.mui-popover').popover('toggle');

这句是是什么作用,文档描述mui会自动控制弹出菜单的打开和关闭,那也就是说这并不是打开或关闭的单一方法,也不能获取选择结果。

缘多多

缘多多 (作者)

问题二的弹出菜单的问题已解决,需要的可以私信我。就不在这贴代码了。
问题一的搜索框的位置还是不固定,我把例子倒进项目,想把搜索框换成按钮,研究了一下,没有成功,主要不知道MUI是怎么固定这个输入框的,原理尚不理解,就不好迁移。。。

缘多多

缘多多 (作者)

谁知道开关的滑动效果怎么取消?不想让它滑动操作开关,只能点击操作。

缘多多

缘多多 (作者)

刚刚给你私信打完,结果碰到键盘写的全没了,在这里再打一遍吧。
在弹出框中添加复选框和按钮,点击按钮关闭弹出框。@yicixing 代码如下:

<a href="#popover" class="mui-btn mui-btn-primary car-button-login " style="width:100%;font-size: 18px;">添加内容 </a>    
            <div id="popover" class="mui-popover">  
                <form class="mui-input-group">  
                    <div class="mui-input-row mui-checkbox" >  
                        <label>内容1</label>  
                        <input  name="neirong1" type="checkbox" checked="true">  
                    </div>  
                    <div class="mui-input-row mui-checkbox" >  
                        <label>内容2</label>  
                        <input name="neirong2" type="checkbox">  
                    </div>  
                    <div class="mui-input-row mui-checkbox" >  
                        <label>内容3</label>  
                        <input name="neirong3" type="checkbox">  
                    </div>  
                    <div class="mui-input-row mui-checkbox" >  
                        <label>内容4</label>  
                        <input name="neirong4" type="checkbox">  
                    </div>  
                    <ul>  
                        <li class="mui-table-view-cell" >  
                        &nbsp;  
                        <button type="button" onclick="close()" class="mui-btn mui-btn-primary " style="width: 100px;margin: auto;" >  
                        关闭弹出框  
                        </button>  
                        </li>  
                    </ul>  
                </form>  
            </div>

在js中天加close()方法,并在方法中添加:

mui('.mui-popover').popover('toggle');  

这样写的话,有一个问题,同一个webview中,如果存在多个弹出框,会出现混乱,比如我通过上面的关闭方式关闭第一个弹出框,由于js中有多个上面的方法,第二个或者第三个弹出框就会被自动打开。如果页面中只有一个的话是没有问题的。

该问题目前已经被锁定, 无法添加新回复