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具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
根据输入邮箱号跳转到相应登录地址的解决方法
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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
python在非root权限下的安装方法
2018/01/23 Python
python在每个字符后添加空格的实例
2018/05/07 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
python3.7 sys模块的具体使用
2019/07/22 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
劳动模范事迹材料
2014/01/19 职场文书
单位承诺书格式
2014/05/21 职场文书
体育馆的标语
2014/06/24 职场文书
中队活动总结
2014/08/27 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
2014年资料员工作总结
2014/11/18 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
优秀教师个人总结
2015/02/11 职场文书
党员评议自我评价
2015/03/03 职场文书
刑事申诉状范文
2015/05/20 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js