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 相关文章推荐
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 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编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
Python生成随机数组的方法小结
2017/04/15 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
python读取LMDB中图像的方法
2018/07/02 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
Python流程控制 while循环实现解析
2019/09/02 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
探矿工程师自荐信
2014/01/24 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
校车安全责任书
2014/08/25 职场文书
起诉书范文
2015/05/20 职场文书
在职证明范本
2015/06/15 职场文书
2016春节放假通知范文
2015/08/18 职场文书
如何用python反转图片,视频
2021/04/24 Python
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js