遮层 搜索的例子
来源：互联网 发布：软件研发工作内容 编辑：程序博客网 时间：2024/05/16 19:37
<html><div class="top_total"> <div id="mask" class="mask"> <div class="panel"> <table class="top_table" cellspacing="0" cellpadding="0" border="0" width="0"> <tr> <td style="text-align:center"> <input type="text" class="texstyle" placeholder="搜索"> </td> <td><label id="canceltext">取消</label></td> </tr> </table> </div> </div> <div id="mask1" class="mask1"> </div><div class="top_info"><table width="0" border="0" cellpadding="0" cellspacing="0" class="depar_table_top"> <tr> <td><a href="index.html" class="ke_bg_top"><img src="images/icon_left.png" class="icon_pic15"/> 可用部位</a></td> <td class="pic_td"> <a href="#" class="ke_bg_top"><img src="images/muti_select.png" class="icon_pic25"> <a href="#" class="ke_bg_top"><img src="images/icon_search.png" id='msearch' class="icon_pic25"></a> <a href="add_body_part.html" class="ke_bg_top"><img src="images/icon_add.png" class="icon_pic25"></a> </td> </tr></table> </div><div class="menu_top"> <ul> <li id="m1" class="menu_select" onclick="goShow('m1')">可用部位（4）</li> <li id="m2" class="" onclick="goShow('m2')">不可用部位（2）</li> </ul></div></div><div style="margin:70px 0px 70px 0px"><a href="body_part.html" class="ke_bg"><table width="0" border="0" cellpadding="0" cellspacing="0" class="depar_table" id="tab"> <tr> <td>xxx</td> <td class="pic_td"><img src="images/icon_right.png" width="20px" height="20px"/></td> </tr></table></a><div class="line_index"></div><a href="#" class="ke_bg"><table width="0" border="0" cellpadding="0" cellspacing="0" class="depar_table" > <tr> <td>xxx</td> <td class="pic_td"><img src="images/icon_right.png" width="20px" height="20px"/></td> </tr></table></a><div class="line_index"></div><a href="#" class="ke_bg"><table width="0" border="0" cellpadding="0" cellspacing="0" class="depar_table"> <tr> <td>xxx</td> <td class="pic_td"><img src="images/icon_right.png" width="20px" height="20px"/></td> </tr></table></a><div class="line_index"></div><a href="#" class="ke_bg"><table width="0" border="0" cellpadding="0" cellspacing="0" class="depar_table"> <tr> <td>xxx</td> <td class="pic_td"><img src="images/icon_right.png" width="20px" height="20px"/></td> </tr></table></a><div class="line_index"></div></div><script type="text/javascript" charset="gb2312" src="js/jquery-1.10.2.min.js"></script></body> <script> $(function(){ $("#msearch").click(function(){ //遮层已经覆盖 $(".panel").slideToggle("slow"); //$(".top_info").css("background-color","#000"); //$(".top_info").hide(); $("#mask").css("height","40px"); $("#mask").css("width",$(document).width()); $("#mask").show(); $("#mask1").css("height",$(document).height()-40); $("#mask1").css("width",$(document).width()); $("#mask1").css("margin-top","40px"); $("#mask1").show(); }); $("#canceltext").click(function(){ $(".panel").slideToggle("slow"); $("#mask").hide(); $("#mask1").hide(); }); $(".texstyle").keyup(function(){ var jdata=null; var size=0; //获取table的全部第一行的所有的字符 var tableId= $(".depar_table tr"); size=tableId.length; var arr = new Array(size); for(var i=0;i<size;i++) { //获取的第1列的值 var oprice=$(tableId[i]).children("td").eq(0).text(); //获取相应的字符存到相应的字符串当中 arr[i]=oprice; } //获取文本框的值 //存放table的坐标的值 var numArray=new Array(); var num=0; var texvalue=new RegExp($(".texstyle").val()); for(var i=0;i<arr.length;i++){ //获取相应的table的坐标 //判断table里面的查询的内容是否与我键入的字符串相等，如果相等就为true var bp=texvalue.test(arr[i]); if(bp){ num++; numArray.push(i); } } $("#mask1").hide(); var tabId= $(".depar_table"); if(num==0){ for(var i=0;i<tabId.length;i++){ $(tabId[i]).hide(); } }else{ for(var i=0;i<numArray.length;i++){ $(tabId[numArray[i]]).show(); } } }); $("#mask1").click(function(){ $(".panel").slideToggle("slow"); $("#mask").hide(); $("#mask1").hide(); }); }); </script> <style> .bckcor{ height:40px; width:100%; background:#fff; z-index: 1002; display:none; position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #fff; z-index: 1002; left: 0px; opacity:0.5; -moz-opacity:0.5; } .mask { position: absolute; top: 0px; filter: alpha(opacity=60); background-color:#777; z-index: 1002; left: 0px; opacity:1; -moz-opacity:1; } .mask1 { position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; z-index: 1002; left: 0px; opacity:0.5; -moz-opacity:0.5; } .top_table{ width:100%; height:40px; } div.panel { height:40px; display:none; background-color:#0A85C8; } .texstyle{ margin-left:9%; margin-right:10%; margin-top:0.5px; border-top:1px solid #dddddd; border-left:1px solid #dddddd; border-right:1px solid #ffffff; border-bottom:1px solid #ffffff; BACKGROUND-COLOR: #f5f5f5; line-height:18px; width:80%; HEIGHT: 30px;border-radius:3px; font-size:15px;padding-left:10px; } </style> </html> 0 0
- 遮层 搜索的例子
- 递归搜索注册表的例子
- Lucene-搜索的入门例子
- QT4文件搜索的例子
- [转]层JLayeredPane使用的小例子
- 两个页面弹出层的例子
- zigbee无线传播的例子 应用层
- 7层网络协议对应的例子
- 分治法的典型例子 --- 二分搜索
- lucene笔记(搜索的小例子)
- 一个搜索路径的例子程序 注释
- 带搜索框的listbox 例子
- 类似淘宝搜索排序的例子
- jquery 实现百度搜索过滤的例子
- 遍历搜索空间的例子：熄灯问题
- layer的弹出层的简单的例子
- JQuery弹出层例子
- 弹出层 div 例子
- 如何将本地sqlserver的2000万数据迁移到虚拟机中的Oracle数据库里面
- 读书笔记->大型网站架构案例分析
- USACO 1.3 - Wormholes（暴力图论）
- nyoj 135 取石子（二） 【NIM】
- HDOJ 题目 1079 Calendar Game（博弈）
- 遮层 搜索的例子
- 支付宝移动接入报系统繁忙，参数错误等错误
- 罪孽
- Codeforces 484D Kindergarten(dp)
- Wireshark图解教程
- This的用法
- nyoj 585 取石子（六） 【Nim】
- 水平触发和边缘触发的区别
- mysql编码设置为utf8
