JS实现微信弹出搜索框 多条件查询功能


Posted in Javascript onDecember 13, 2016

效果图如下所示:

JS实现微信弹出搜索框 多条件查询功能

JS实现微信弹出搜索框 多条件查询功能的实现代码如下所示:

<!--<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/views/include/mtaglib.jsp"%>-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-type" name="viewport"
  content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="telephone=no" name="format-detection">
<title>百望云票</title>
<link rel="stylesheet" href="css/weui.min.css">
<link rel="stylesheet" href="css/example.css">
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
</script>
<style>
  #kongzhi{
   position: relative;
   left: -20px;
   top: -30px;
  }
  .weui-dialog{
   width: 400px;
   height: 315px;
  }
  .weui-cell__bd input{
   width: 150px;
  }
</style>
</head>
<body>
  <!-- 内容 -->
  <div id="container" class="container">
   <div class="page input js_show">
     <div class="page__hd">
     </div>
     <div class="page__bd">
      <div class="weui-cell__ft">
        <a href="javascript:;" class="showIOSDialog2">
        点我弹出搜索框 点我 点我
        </a>
      </div>
     </div>
   </div>
   <!--弹出层begin-->
     <div id="dialogs">
      <div class="js_dialog" id="iosDialog2" style="opacity: 1; display: none;">
        <div class="weui-mask">
        </div>
        <div class="weui-dialog">
         <div class="weui-dialog__bd">
           <div id="kongzhi">
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">发票代码:</label></div>
              <div class="weui-cell__bd">
               <input class="weui-input" placeholder="输入发票代码.....">
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">发票号码:</label></div>
              <div class="weui-cell__bd">
               <input class="weui-input" placeholder="输入发票号码.....">
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">买方名称:</label></div>
              <div class="weui-cell__bd">
               <input class="weui-input" placeholder="购买方名称.....">
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label for="" class="weui-label">开始日期:</label></div>
              <div class="weui-cell__bd">
               <input class="weui-input" type="date" value="">
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd"><label for="" class="weui-label">结束日期:</label></div>
              <div class="weui-cell__bd">
               <input class="weui-input" type="date" value="">
              </div>
            </div>
           </div>
         </div>
         <div class="weui-dialog__ft">
           <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
           <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确认</a>
         </div>
        </div>
      </div>
     </div>
   <!--弹出层end-->
   </div>
  </div>
</body>
<script type="text/javascript" class="dialog js_show">
  $(function(){
    var $iosDialog2 = $('#iosDialog2');
    $('#dialogs').on('click', '.weui-dialog__btn', function(){
      $(this).parents('.js_dialog').fadeOut(200);
    });
    $('.showIOSDialog2').on('click', function(){
      $iosDialog2.fadeIn(200);
    });
  });
</script>
</html>

以上所述是小编给大家介绍的JS实现微信弹出搜索框 多条件查询功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 解析多维的Json数据格式
Nov 02 Javascript
javascript 回调函数详解
Nov 11 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
详解js获取video任意时间的画面截图
Apr 17 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
VUE动态生成word的实现
Jul 26 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 #Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 #Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 #Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 #Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 #Javascript
深入理解选择框脚本[推荐]
Dec 13 #Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 #Javascript
You might like
初级的用php写的采集程序
2007/03/16 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
在Python中使用第三方模块的教程
2015/04/27 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
英国香水店:The Perfume Shop
2017/03/27 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
小学美术教学反思
2014/02/01 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
社会实践活动总结
2015/02/05 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
python基于tkinter实现gif录屏功能
2021/05/19 Python
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技