设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 716|回复: 0

[技巧手记] jQuery实现帝国CMS多表搜索切换(搜索模板同时切换)

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2014-4-19 09:29:33 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

jQuery实现帝国CMS多表搜索切换(搜索模板同时切换)

jQuery实现帝国CMS多表搜索切换.jpg


  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>全站搜索</title>
  6. <style type="text/css">
  7. body{ background:#ffffff;color:#333333;font:12px/20px SimSun,Tahoma,Helvetica,Arial,sans-serif;}
  8. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,p,img { padding: 0; margin: 0; }
  9. img {border:0;}
  10. ol,ul,li{ list-style: none; }
  11. a{color:#272727;text-decoration:none; outline:none;}
  12. a:hover {color:#005e9c; text-decoration:none; }
  13. .fl{ float:left; }
  14. .fr{ float:right; }
  15. .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
  16. .sousuo{ width:500px;margin: 120px auto 250px;}
  17. .sousuo img{ margin: 0 0 30px 80px;}
  18. .sousuo ul,.soujieguo ul{ width: 100%; clear: both;}
  19. .sousuo ul li,.soujieguo ul li{cursor: pointer; float: left; color: #005e9c;width:70px; text-align: center; padding: 2px 5px;}
  20. .sousuo ul li.on,.soujieguo ul li.on{ font-weight: bold; background: #0073c3; color:#fff;}
  21. .sousuo .soutext,.soujieguo .soutext{ border: 1px solid #cbcbcb; height: 30px; width: 400px; vertical-align: middle;line-height:30px;font-size: 14px; }
  22. .sousuo .sou,.soujieguo .sou{height: 32px; width: 80px; border: none; border-left: none; background: #0073c3; color: #fff;vertical-align: middle;}
  23. .soufoot{ text-align: center;width: 960px; margin: 0 auto;}
  24. .soufoot p.fl{float: none;}
  25. .soujieguo { padding: 20px;}
  26. .soujieguo dt{ line-height: 40px;}
  27. .soujieguo dd{ margin: 10px 0;border-bottom: 1px dashed #cccccc; padding-bottom: 10px;}
  28. .soujieguo  h2{ font-size: 14px; color: #005e9c;}
  29. .soujieguo  h2 a{color: #005e9c;}
  30. .soujieguo  h2 a:hover{text-decoration: underline;}
  31. .soujieguo  p{ margin: 0;}
  32. .soujieguo a{ color:#659B28; }
  33. </style>
  34. </head>
  35. <body>
  36. <!--主体开始-->
  37. <div class="main clearfix">
  38. <div class="sousuo">
  39. <form name="searchform" method="post" action="/e/search/index.php">
  40. <input type="hidden" name="tbname" id="biao" value="news">
  41. <input type="hidden" name="show" value="title,smalltext,newstext">
  42. <input type="hidden" name="tempid" id="tempid" value="1">
  43. <ul>
  44. <!-- 下面biao指的是数据表名,tempid是对应数据表名的搜索模板id  -->
  45. <li biao="news" tempid="1" class="on">新闻搜索</li>
  46. <li biao="download" tempid="2">下载搜索</li>
  47. <li biao="photo" tempid="3">图片搜索</li>
  48. <li biao="flash" tempid="4">flash搜索</li>
  49. </ul>
  50. <ul>
  51. <input type="text" name="keyboard" value="" class="soutext" /><input type="submit" value="搜 索" class="sou">
  52. </ul>
  53. </form>
  54. </div>
  55. </div>
  56. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  57. <script type="text/javascript">
  58. $(".sousuo li").click(function(){
  59. $(this).siblings().removeClass("on");
  60. $(this).addClass("on");
  61. var biao=$(this).attr("biao");
  62. $("#biao").val(biao);
  63. var tempid=$(this).attr("tempid");
  64. $("#tempid").val(tempid);
  65. });
  66. </script>
  67. </body>
  68. </html>
复制代码

以上代码自行研究
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-3 23:32

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表