一、说明

前面实现了关键词订阅模块,现在实现站点订阅模块,主要实现的是站点添加界面。站点添加界面里面实现一个提示框不在提示的功能(保存到cookie中),还有就是实现一个站点的选择框,包括输入文字自动筛选的功能。如下效果图:

DIV+CSS实战(五)DIV+CSS实战(五)DIV+CSS实战(五)

 

 

 

二、提示框的实现

  先把添加的界面整体实现了,就是一个DIV中放了一个表格,表格有一行两列,分别是<td><table></table>(第一列放的是客户ID,状态.....)</td>        <td>DIV</td>(第二列放的是一个DIV提示框)。还有就是像顶部的标题,还有标签卡。这些前面都已经说过了,就不再细说。

 

JSP

  1   <body>
  2       <form id="adduserform" action="<%=basePath%>site/siteAdd" method="post">
  3           <div class="jc-demo-box">
  4               <div class="divHeader">
  5                 <h1 class="headerH1">全媒体订阅</h1>
  6                 <div class="f_r">
  7                     <p>
  8                     欢迎您:<span class="color2">中科大洋</span>&nbsp;&nbsp;&nbsp;&nbsp;上次登录时间:2小时前
  9                     </p>
 10                 </div>
 11             </div>
 12             <div class="divTab">
 13                 <a class="tabSet " name="typeAdd"  href="key/listAllKeys">关键词订阅</a>
 14                 <a class="tabSet tabin" name="keyAdd" href="site/siteList">网站论坛订阅</a>
 15                 <a class="tabSet" name="keyAdd"  href="weibo/weiboList">微博账号订阅</a>
 16                 <a class="tabSet" name="keyAdd"  href="weixin/weixinList">微信账号订阅</a>
 17                 <a class="addOther" href="javascript:history.go(-1);">返回上一级</a>
 18             </div>
 19             <div class="divContent">
 20             <div class="divTab">
 21                 <div id="keyadd" class="keyaddClass">
 22                     <a class="tabin clickA" rela="keyword_set" name="keyMessage" href="javascript:;">添加站点</a>
 23                     <a class="clickA" rela="keyword_set" name="keyMessage" href="site/siteList" style="float: right">返回URL列表</a>
 24                     <p class="clr"></p>
 25                 </div>
 26             </div>
 27             <div class="divExample">
 28                 <table align="left">
 29                     <tr>
 30                         <td >
 31                             <div class="divContent1" style="margin-left: 10px;">
 32                                 <table align="left" id="addTable">
 33                                     <tr>
 34                                         <td >
 35                                             <label title="1">&nbsp;&nbsp;ID:</label>
 36                                         </td>
 37                                         <td colspan="2">
 38                                             <input type="text" name="client_id">    
 39                                         </td>
 40                                     </tr>
 41                                     <tr>
 42                                         <td >
 43                                             <label title="1">&nbsp;&nbsp;&nbsp;&nbsp;态:</label>
 44                                         </td>
 45                                         <td colspan="2">
 46                                             <input type="radio" name="status" value="1" id="5"><label for="5">启用</label>
 47                                             <input type="radio" name="status" value="-1" id="6"><label for="6">禁用</label>
 48                                         </td>
 49                                     </tr>
 50                                     <tr>
 51                                         <td >
 52                                             <label title="1">开始时间:</label>
 53                                         </td>
 54                                         <td colspan="2">
 55                                             <input type="text" name="start_time" onClick="WdatePicker()"><br>
 56                                         </td>
 57                                     </tr>
 58                                     
 59                                     <tr>
 60                                         <td >
 61                                             <label title="1">结束时间:</label>
 62                                         </td>
 63                                         <td colspan="2">
 64                                             <input type="text" name="end_time" onClick="WdatePicker()">
 65                                         </td>
 66                                     </tr>
 67                                     <tr>
 68                                         <td >
 69                                             <label title="1">&nbsp;&nbsp;1:</label>
 70                                         </td>
 71                                         <td>
 72                                             <input type="text" name="site" onblur="" id="siteThis">    
 73                                             <label id="lsite"></label>
 74                                         </td>
 75                                         <td>
 76                                             <img alt="添加" src="images/yq/site/newSite.jpg"  onclick="IndustrySelect_3()">
 77                                         </td>
 78                                     </tr>
 79                                     <tr>
 80                                         <td>
 81                                             <input type="button" value="添加" id="enterImg" >
 82                                         </td>
 83                                         <td></td><td></td>
 84                                     </tr>
 85                                 </table>
 86                             </div>
 87                         </td>
 88                         <td>
 89                             <div class="divTip" style=" width: 377px;margin-top: -50px">
 90                                 <img alt="" src="images/yq/site/hander.jpg" width="20px" height="20px">
 91                                 <div class="pTip">
 92                                     <img alt="不再提醒" src="images/yq/site/noTip.jpg" title="不再提醒" id="cancleTip">
 93                                     <p>1.至少选择一个站点</p>
 94                                     <p>2.也可以点击下面的常用站点进行站点的添加</p>
 95                                     <p>3.格式: 大洋  http://www.dayang.com.cn</p>
 96                                     <p>4.红色X按钮,关闭提示框,不再显示</p>                
 97                                 </div>
 98                             </div>
 99                         </td>
100                     </tr>
101                 </table>
102             </div>
103         </div>
104         <div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>
105         </div>
106         <div id="maskLayer" style="display:none">
107             <iframe id="maskLayer_iframe" frameBorder=0 scrolling=no style="filter:alpha(opacity=50)"></iframe>
108             <div id="alphadiv" style="filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5"></div>
109                 <div id="drag">
110                     <h3 id="drag_h"></h3>
111                     <div id="drag_con"></div><!-- drag_con end -->
112                 </div>
113         </div><!-- maskLayer end -->
114       </form>
115     
116   </body>
View Code

相关文章:

  • 2021-10-26
  • 2022-01-14
  • 2022-12-23
  • 2021-12-30
  • 2021-12-05
  • 2022-01-07
  • 2022-02-08
猜你喜欢
  • 2021-05-20
  • 2022-01-08
  • 2022-01-22
  • 2021-12-19
  • 2022-12-23
  • 2022-12-23
  • 2021-05-23
相关资源
相似解决方案