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函数
May 27 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 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 用数组降低程序的时间复杂度
2009/12/04 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
不同浏览器的怪癖小结
2010/07/11 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
微信小程序实现星级评分和展示
2018/07/05 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
Python 音频生成器的实现示例
2019/12/24 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
自动化专业个人求职信范文
2013/11/29 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
考试没考好检讨书
2014/01/31 职场文书
七年级历史教学反思
2014/02/05 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
给校长的建议书100字
2014/05/16 职场文书
个人总结与自我评价
2015/02/14 职场文书
小学科学课教学反思
2016/02/23 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
html中两种获取标签内的值的方法
2022/06/16 jQuery