一、说明

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

二、提示框的实现

　　先把添加的界面整体实现了，就是一个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="data: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="data:images/yq/site/hander.jpg" width="20px" height="20px">
  91.                                  <div class="pTip">
  92.                                      <img alt="不再提醒" src="data: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>

CSS设计（site.css）

页面风格基本上和前面的一样，这里就不在说明CSS了

  1.  body{
  2.              background:url(../../../../images/yq/key/body_bj.gif) repeat 0 0;
  3.              color: #818389;
  4.              font: 12px "宋体",Arial,Helvetica,sans-serif;
  5.          }
  6.  
  7.          a{
  8.              cursor: pointer;
  9.          }
  10.          .jc-demo-box{
  11.               width:96%;
  12.               text-align: left;
  13.                 margin: 2em auto;
  14.                 background: white;
  15.                 border: 1px #bbb solid;
  16.               -webkit-border-radius: 4px;
  17.               -moz-border-radius: 4px;
  18.               border-radius: 4px;
  19.               -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
  20.               -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
  21.               box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
  22.               padding: 25px 30px;
  23.               min-width: 960px;
  24.          }
  25.          .divHeader{
  26.              height: 28px;
  27.              margin-bottom: 13px;
  28.              width:100%;
  29.          }
  30.          .divHeader .headerH1{
  31.              background: url("../../../../images/yq/key/blue_user.png") no-repeat 5px 5px;
  32.          }
  33.  
  34.          .divHeader .headerH2{
  35.              background-image: url("../../../../images/yq/site/hander.jpg");
  36.          }
  37.          .divHeader h1{
  38.              color: #212121;
  39.              float: left;
  40.              font-family: "微软雅黑";
  41.              font-size: 18px;
  42.              height: 28px;
  43.              line-height: 28px;
  44.              padding-left: 34px;
  45.          }
  46.          .divHeader .f_r{
  47.              color: #434343;
  48.              line-height: 30px;
  49.              float: right;
  50.          }
  51.          .divHeader .f_r .color2{
  52.              color: #257bb4;
  53.          }
  54.  
  55.          .divHeader h1{
  56.              color: #212121;
  57.              float: left;
  58.              font-family: "微软雅黑";
  59.              font-size: 18px;
  60.              height: 28px;
  61.              line-height: 28px;
  62.              padding-left: 34px;
  63.          }
  64.  
  65.          .divTab{
  66.              height: 34px;
  67.              width:100%;
  68.              float: left;
  69.          }
  70.  
  71.          .divTab a{
  72.              background-color:#E6E6E6;
  73.               -webkit-border-radius: 4px;
  74.               -moz-border-radius: 4px;
  75.               border-radius: 4px;
  76.              color: #5e5e5e;
  77.              float: left;
  78.              font-size: 14px;
  79.              height: 34px;
  80.              line-height: 34px;
  81.              margin-right: 4px;
  82.              text-align: center;
  83.              width: 96px;
  84.              text-decoration:none;
  85.          }
  86.  
  87.          .divTab .tabin{
  88.              background-color: #257CB5;
  89.              color: white;
  90.          }
  91.  
  92.          .divTab .addOther {
  93.              margin-right: 0px;
  94.              float: right
  95.          }
  96.  
  97.          .divArrow{
  98.              width:100%;
  99.              float: left;
  100.              padding-left: 40px;
  101.              height: 7px;
  102.              margin-top: -4px;
  103.              z-index:;
  104.          }
  105.  
  106.          .divArrow img{
  107.              margin-right: 76px;
  108.              visibility: hidden;
  109.          }
  110.  
  111.          .divArrow .showImage{
  112.              visibility: visible;
  113.          }
  114.          .divContent1{
  115.              width: auto;
  116.              float: left;
  117.          }
  118.  
  119.          .divExample{
  120.              width: 100%;
  121.              float: left;
  122.              margin: auto,auto;
  123.              margin-top: 20px;
  124.          }
  125.  
  126.          .divExample a{
  127.              width: 270px;
  128.              height: 170px;
  129.              border: 1px solid #dfdfdf;
  130.              display: block;
  131.              float: left;
  132.              margin: 10px;
  133.               -webkit-border-radius: 4px;
  134.               -moz-border-radius: 4px;
  135.               border-radius: 4px;
  136.          }
  137.  
  138.          .divExample a:HOVER{
  139.              width: 270px;
  140.              height: 170px;
  141.              border: 1px solid #dcdcdc;
  142.              display: block;
  143.              float: left;
  144.              margin: 10px;
  145.               -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
  146.               -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
  147.               box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
  148.          }
  149.  
  150.          .imagespan{
  151.              display: block;
  152.              width: 270px;
  153.          }
  154.  
  155.          .imagespan img{
  156.              width: 270px;
  157.              height: 150px;
  158.          }
  159.          .titlespan{
  160.              display: block;
  161.              width: 264px;
  162.              padding-left: 6px;
  163.              font: 12px "宋体",Arial,Helvetica,sans-serif;
  164.          }
  165.  
  166.          .titlespan img{
  167.              width:20px;
  168.              height: 20px;
  169.              margin-top: -2px;
  170.          }
  171.  
  172.          .hideImg{
  173.              visibility: hidden;
  174.          }
  175.  
  176.          .showImg{
  177.              visibility: visible;
  178.          }
  179.          .keyaddClass{
  180.              border-bottom: 2px solid #348bc4;
  181.              margin-bottom: 15px;
  182.              width: 98%;
  183.              float: left;
  184.              padding-left: 2%;
  185.          }
  186.  
  187.          .keyaddClass a{
  188.              float: left;
  189.              font-size: 12px;
  190.              font-weight: bold;
  191.              height: 30px;
  192.              line-height: 30px;
  193.              overflow-y: hidden;
  194.              text-align: center;
  195.              width: 100px;
  196.              color: #818389;
  197.              text-decoration: none;
  198.              border-radius:4px 4px 0px 0px;
  199.          }
  200.  
  201.          .keyaddClass .tabin{
  202.              background-color: #257CB5;
  203.              color: white;
  204.          }
  205.  
  206.          .keyaddClass .notabin:hover{
  207.              color:#257CB5;
  208.          }
  209.  
  210.          #addTable{
  211.  
  212.          }
  213.  
  214.          #addTable label{
  215.              color: #818389;
  216.              font: 13px "宋体",Arial,Helvetica,sans-serif;
  217.          }
  218.  
  219.          label{
  220.              color: #818389;
  221.              font: 13px "宋体",Arial,Helvetica,sans-serif;
  222.          }
  223.  
  224.          #addTable input[type='text']{
  225.              border: 1px solid #dfdfdf;
  226.              border-radius: 5px;
  227.              height: 30px;
  228.              width: 350px;
  229.              line-height: 30px;
  230.              padding: 0 10px;
  231.              color: #818389;
  232.          }
  233.  
  234.          #addTable tr td img{
  235.              width: 20px;
  236.              height: 20px;
  237.              margin-left: 3px;
  238.              cursor: pointer;
  239.          }
  240.          #addTable tr:last-child td img{
  241.              width: 20px;
  242.              height: 20px;
  243.              margin-left: 3px;
  244.              cursor: pointer;
  245.          }
  246.  
  247.          .footer{
  248.              width: 100%;
  249.              float: left;
  250.              margin: auto;
  251.          }
  252.  
  253.          .footer span{
  254.              text-align:center;
  255.              display: block;
  256.              width: 100%;
  257.              font: 14px "宋体",Arial,Helvetica,sans-serif;
  258.              color: gray;
  259.          }
  260.  
  261.          .divTip{
  262.          }
  263.          .divTip img{
  264.              width: 20px;
  265.              height: 20px;
  266.              margin-left: 25px;
  267.          }
  268.  
  269.          .divTip .PTip{
  270.              margin-left:45px;
  271.              width: auto;
  272.              border: 1px solid #dcdcdc;
  273.          }
  274.          .divTip .PTip p{
  275.              margin-left: 3px;
  276.          }
  277.  
  278.          .divTip .PTip img{
  279.              width: 20px;
  280.              height: 20px;
  281.              text-align: right;
  282.              float: right;
  283.              margin-top: -10px;
  284.              margin-right: -10px;
  285.              cursor: pointer;
  286.          }
  287.  
  288.          .divContent{
  289.              width: 100%;
  290.              float: left;
  291.              margin-top: 3px;
  292.              border: 1px solid #e8e7e7;
  293.              padding-top: 20px;
  294.              height: auto;
  295.          }
  296.  
  297.          .header{
  298.              width: 100%;
  299.              float: left;
  300.          }
  301.  
  302.          .middle{
  303.              width: 99%;
  304.              float: left;
  305.              border: 1px solid #dcdcdc;
  306.          }
  307.          .middle .tab{
  308.              width:98%;
  309.              height:40px;
  310.              float: left;
  311.              border-bottom: 1px solid #dcdcdc;
  312.          }
  313.  
  314.          .middle .tab a{
  315.              width: 100px;
  316.              height: 28px;
  317.              line-height: 28px;
  318.              margin-left: 10px;
  319.              border: 1px solid #dcdcdc;
  320.              border-bottom:1px solid white;
  321.              display: block;
  322.              float: left;
  323.              background-color: white;
  324.              margin-top: 12px;
  325.              text-align: center;
  326.              text-decoration: none;
  327.              color: #3c3c3c;
  328.              font-family: Microsoft YaHei,Simsum,serif;
  329.              font-size: small;
  330.          }
  331.          .content{
  332.              width:99%;
  333.              float: left;
  334.          }
  335.  
  336.          .content li{
  337.              height: 28px;
  338.              line-height: 28px;
  339.              color: #3c3c3c;
  340.                  font-family: Microsoft YaHei,Simsum,serif;
  341.              font-size: small;
  342.          }
  343.  
  344.          input[type='button']{
  345.               border: 1px solid #dfdfdf;
  346.              border-radius: 5px;
  347.              height: 30px;
  348.              line-height: 30px;
  349.              padding: 0 10px;
  350.              color: #818389;
  351.              font: 13px "宋体",Arial,Helvetica,sans-serif;
  352.              cursor:pointer;
  353.          }
  354.  
  355.          input[type='button']:HOVER{
  356.               border: 1px solid #257cb5;
  357.              border-radius: 5px;
  358.              height: 30px;
  359.              line-height: 30px;
  360.              padding: 0 10px;
  361.              color: white;
  362.              font: 13px "宋体",Arial,Helvetica,sans-serif;
  363.              cursor:pointer;
  364.              background-color: #257cb5;
  365.          }
  366.  
  367.          input[type='text']{
  368.              border: 1px solid #dfdfdf;
  369.              border-radius: 5px;
  370.              line-height: 30px;
  371.              padding: 0 10px;
  372.              color: #818389;
  373.          }
  374.          .middle{
  375.              width: 99%;
  376.              float: left;
  377.              border: 1px solid #dcdcdc;
  378.          }
  379.          .middle .tab{
  380.              width:98%;
  381.              height:40px;
  382.              float: left;
  383.              border-bottom: 1px solid #dcdcdc;
  384.          }
  385.  
  386.          .middle .tab .addCheck{
  387.              width: 100px;
  388.              height: 28px;
  389.              line-height: 28px;
  390.              margin-left: 10px;
  391.              border: 1px solid #dcdcdc;
  392.              border-bottom:1px solid white;
  393.              display: block;
  394.              float: left;
  395.              background-color: white;
  396.              margin-top: 12px;
  397.              text-align: center;
  398.              text-decoration: none;
  399.              color: #3c3c3c;
  400.              font-family: Microsoft YaHei,Simsum,serif;
  401.              font-size: small;
  402.          }
  403.  
  404.          .middle .tab a{
  405.              width: 100px;
  406.              height: 28px;
  407.              line-height: 28px;
  408.              margin-left: 10px;
  409.              border: 1px solid #dcdcdc;
  410.              border-bottom:1px solid #dcdcdc;
  411.              display: block;
  412.              float: left;
  413.              background-color: #EEEEEE;
  414.              margin-top: 12px;
  415.              text-align: center;
  416.              text-decoration: none;
  417.              color: #3c3c3c;
  418.              font-family: Microsoft YaHei,Simsum,serif;
  419.              font-size: small;
  420.          }
  421.  
  422.          .content{
  423.              width:99%;
  424.              float: left;
  425.          }
  426.  
  427.          .content li{
  428.              height: 28px;
  429.              line-height: 28px;
  430.              color: #3c3c3c;
  431.                  font-family: Microsoft YaHei,Simsum,serif;
  432.              font-size: small;
  433.          }

　　

　　JS设计

　　JS上的设计比较多，因为弹出框上面的内容都是通过数组形式保存在js文件中，下面说一下都用到那些JS

　　新闻类：

　　<script type="text/javascript" src="pages/gather/js/site/start_name_arr.js"></script> （这个是名字：如人民网）
     <script type="text/javascript" src="pages/gather/js/site/start_number_arr.js"></script>（这个是网址：如http://www.people.com.cn/）

　　还有军事、文人、企业高管、政坛官员、互联网风云这几类！可以下载这些js

　　

　　动态显示弹出框的js，并且实现输入框自动过滤（site_fun.js），要实现自动过滤还需要引入（jquery.fastLiveFilter.js，可以从网上查找），在sit_fun.js中动态引入

  1. //var ind_flag_arr = new Array();        //    已选中数组
  2. var ind_flag_arr = new Array('21','31','37');
  3.  
  4. var Industry = {
  5.     // 行业列表
  6.     init : function(){
  7.         var _str='',_id='';
  8.         if (ind_flag_arr.length>0){
  9.             for (var i in ind_flag_arr){
  10.                 _str+=','+label[ind_flag_arr[i]];
  11.                 _id+=','+ind_flag_arr[i];
  12.             }
  13.             $('#btn_IndustryID').val(_str.substring(1));
  14.             $('#IndustryID').val(_id.substring(1));
  15.         }
  16.     },
  17.  
  18.     // 单选输出
  19.     Show2 : function(){
  20.         var output='',flag,output2='',output3='';
  21.         output="<div class='header'>"
  22.           +"<script type='text/javascript' src='pages/gather/js/jquery.fastLiveFilter.js'></script>"
  23.             +"<input type='text' name='label' id='inputText' style='width:40%;margin-bottom:10px;margin-left:10px'>"
  24.             +"<input type='text' name='url' id='inputUrl' style='width:40%;margin-bottom:10px;margin-left:10px'>"
  25.             +"<input type='button' name='name' value='添加' style='width:10%;margin-bottom:10px;margin-left:10px' onclick='Industry.confirm2()'>"
  26.             +"</div>"
  27.             +"<div class='middle'>"
  28.             +"<div class='tab'>"
  29.             +"<a href='javascript:void(0)' onclick='Industry.changeLabel(this)' class='addCheck' alt='start'>新闻</a>"
  30.             +"<a href='javascript:void(0)' onclick='Industry.changeLabel(this)'  alt='media'>军事</a>"
  31.             +"<a href='javascript:void(0)' onclick='Industry.changeLabel(this)'  alt='people'>文人</a>"
  32.             +"<a href='javascript:void(0)' onclick='Industry.changeLabel(this)'  alt='qiye'>企业高管</a>"
  33.             +"<a href='javascript:void(0)' onclick='Industry.changeLabel(this)'  alt='department'>政坛官员</a>"
  34.             +"<a href='javascript:void(0)' onclick='Industry.changeLabel(this)'  alt='internet'>互联网风云</a>"
  35.             +"</div>"
  36.             +"<div class='content'>"
  37.             +"<ul id='search_list'>";
  38.  
  39.         for (var i in start){
  40.             output+='<li title="'+start_number[i]+'" onclick="Industry.Chk2(\''+i+'\',this)">'+start[i]+'</li>';
  41.         }
  42.  
  43.         output+="</ul></div></div>";
  44.         $('#drag').width('760px');
  45.         $('#IndustryList').html(output);
  46.         $('#IndustrySelected dd').html(output2);
  47.         // 鼠标悬停变色
  48.         $('#IndustryAlpha li').hover(function(){$(this).addClass('over')},function(){$(this).removeClass('over')});
  49.         $('#inputText').fastLiveFilter('#search_list');
  50.     },
  51.     confirm2 : function(){
  52.         var text=$("#inputText").val()+":";
  53.         var url=$("#inputUrl").val();
  54.         var trs="<tr>"
  55.             +"<td>"
  56.               +"<label>"
  57.               +text
  58.               +"</label>"
  59.             +"</td>"
  60.             +"<td>"
  61.               +"<input type='text' name='site' value='"
  62.               +url
  63.               +"'>"
  64.             +"</td>"
  65.             +"<td>"
  66.               +"<script type='text/javascript' src='pages/gather/js/sitedelete.js'></script>"
  67.               +"<img alt='' src='images/yq/site/noTip.jpg' onclick='deletetr(this)'>"
  68.             +"</td>"
  69.           +"</tr>";
  70.         $("#addTable tr").eq(4).before(trs);
  71.         var siteNum=$("#addTable tr").length-5;
  72.         var labelText="站点"+siteNum+":";
  73.         var trlength=$("#addTable tr").length-2;
  74.         $("#addTable tr").eq(trlength).children().children().eq(0).text(labelText);
  75.         $("#lsite").text("√");
  76.         $("#lsite").hide();
  77.         boxAlpha();
  78.     },
  79.     changeLabel:function(element){
  80.         $(".tab a").removeClass("addCheck");
  81.         $(element).addClass("addCheck");
  82.         //将content中的内容清空，重新载入数据
  83.         $(".content ul").html('');
  84.         var labelText=$(element).attr("alt");
  85.         var nameLabel=labelText;
  86.         var nameNumber=nameLabel+"_number";
  87.         var content="";
  88.         if(nameLabel=="start"){
  89.             for (var i in start){
  90.                 content+='<li title="'+start_number[i]+'" onclick="Industry.Chk2(\''+i+'\',this)">'+start[i]+'</li>';
  91.             }
  92.         }else if(nameLabel=="media"){
  93.             for (var i in media){
  94.                 content+='<li title="'+media_number[i]+'" onclick="Industry.Chk2(\''+i+'\',this)">'+media[i]+'</li>';
  95.             }
  96.         }else if(nameLabel=="people"){
  97.             for (var i in people){
  98.                 content+='<li title="'+people_number[i]+'" onclick="Industry.Chk2(\''+i+'\',this)">'+people[i]+'</li>';
  99.             }
  100.         }else if(nameLabel=="qiye"){
  101.             for (var i in qiye){
  102.                 content+='<li title="'+qiye_number[i]+'" onclick="Industry.Chk2(\''+i+'\',this)">'+qiye[i]+'</li>';
  103.             }
  104.         }else if(nameLabel=="department"){
  105.             for (var i in department){
  106.                 content+='<li title="'+department_number[i]+'" onclick="Industry.Chk2(\''+i+'\',this)">'+department[i]+'</li>';
  107.             }
  108.         }else if(nameLabel=="internet"){
  109.             for (var i in internet){
  110.                 content+='<li title="'+internet_number[i]+'" onclick="Industry.Chk2(\''+i+'\',this)">'+internet[i]+'</li>';
  111.             }
  112.         }
  113.         $(".content ul").html(content);
  114.         $('#IndustryAlpha li').hover(function(){$(this).addClass('over')},function(){$(this).removeClass('over')});
  115.         $('#inputText').fastLiveFilter('#search_list');
  116.     },
  117.     Chk2 : function(id,element){
  118.         var text=$(element).text();
  119.         var title=$(element).attr("title");
  120.         $('#inputText').val(text);
  121.         $("#inputUrl").val(title);
  122.         $(element).text();
  123.     }
  124. }
  125.  
  126. // 单选
  127. function IndustrySelect_3(){
  128.     console.info("进入了")
  129.     var dragHtml ='<div id="IndustryAlpha">';        //行业
  130.         dragHtml+='        <div id="IndustryList" class="radio"></div>';//行业列表
  131.         dragHtml+='</div>';
  132.     $('#drag_h').html('<b>请选择站点</b><span onclick="boxAlpha()">关闭</span>');
  133.     $('#drag_con').html(dragHtml);
  134.     Industry.Show2();
  135.     boxAlpha();
  136.     draglayer();
  137. }

　　

　　当点击关闭的时候，把一个值存入tipHide中，每次加载页面的时候，先读取这个值，当tipHide==show的时候，显示！tipHide==hide的时候，隐藏　

  1.          window.onload=function(){
  2.                  $(".divContent1 table tr:odd").addClass("journalBg");
  3.  
  4.                  //从cookie中读取，看是否隐藏小提示
  5.                  var tipHideValue=$.cookie("tipHide");
  6.                  if(tipHideValue==$.cookie("not_existing")){
  7.                      $.cookie("tipHide","show",{expires:30});
  8.                  }
  9.                  var tipHideValue=$.cookie("tipHide");
  10.                  if(tipHideValue=="show"){
  11.                      $(".divTip").show();
  12.                  }else{
  13.                      $(".divTip").hide();
  14.                  }
  15.  
  16.              };
  17.  
  18.              //点击取消提示
  19.              $("#cancleTip").click(function(){
  20.                  $(".divTip").hide();
  21.                  $.cookie("tipHide","hide",{expires:30});
  22.              });

　　

DIV+CSS实战（五）的更多相关文章

  1. DIV+CSS实战(三)

    一.说明 在上篇博客<DIV+CSS实战(二)>中,实现了头部以及Tab标签卡,下面开始实现内容区域,要实现的效果如下: 二.内容最外层的设计(边框) 给最外层加边框,并且设置高度随着里面 ...

  2. DIV+CSS实战(二)

    一.说明 在DIV+CSS实战(一)中,已经把框架搭建起来了,现在就需要往框架里面添加内容了.需要实现的内容如下图: 二.头部的设计(全媒体订阅) 左侧是一张图片+标题 ,右侧是登录名 和上次登录的时 ...

  3. DIV+CSS实战(四)

    一.说明 在上篇博文<DIV+CSS(三)>中,一个页面基本上展示出来了!下面实现以下页面上的一些功能,比方批量删除等功能.这里以批量删除为例,批量禁止,批量启用和批量删除差不多,只不过一 ...

  4. DIV+CSS实战(一)

    一.说明 作为一个后台的程序员,我也是很少写前端,最近有一个项目,前端主要是由我来负责,就把我在项目中所学到的东西,记录下来!我的页面要嵌入到另一个系统中,所以,并不是按照传统的top,left,co ...

  5. 2天驾驭DIV+CSS （实战篇）（转）

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  6. 第6天：DIV+CSS页面布局实战

    今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真 ...

  7. 项目实战之玩转div+css制作自己定义形状

    项目需求 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...

  8. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  9. DIV+CSS系统学习：转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

随机推荐

  1. UI5-文档-4.27-Mock Server Configuration

    我们只是在一个真实的服务上运行我们的应用程序,但是对于开发和测试我们的应用程序,我们不希望依赖于“真实”服务的可用性,或者在数据服务所在的系统上增加额外的负载. 这个系统就是所谓的后端系统,我们现在将 ...

  2. something about facebook token

    There are two method origin token , you can use any one of them, first one may be easier. Origin fro ...

  3. Java8函数之旅（四） --四大函数接口

    前言   Java8中函数接口有很多,大概有几十个吧,具体究竟是多少我也数不清,所以一开始看的时候感觉一脸懵逼,不过其实根本没那么复杂,毕竟不应该也没必要把一个东西设计的很复杂. 几个单词   在学习 ...

  4. object-c语法

    Objective-C:C的超集 Objective-Objective-C是C语言的严格超集--任何C语言程序不经修改就可以直接通过Objective-C编译器,在Objective-C中使用C语言 ...

  5. Jquery detect page refresh

    first thing there are 3 functions we will use: function setCookie(c_name, value, exdays) {           ...

  6. tomcat 设置内存

    SET JAVA_OPTS=-Xms256m -Xmx512m -XX:PermSize=256M -XX:MaxPermSize=512M -Xms :初始化堆内存值 -Xmx :堆内存最大值 -X ...

  7. Nsis Sqlite Plugin

    1.https://stackoverflow.com/questions/15346338/nsis-and-sqlite-integration 2.http://nsis.sourceforge ...

  8. win10磁盘碎片整理

    如果我们想要加快win10系统运行速度的话,就需要定期整理碎片才可以,减少卡顿,提高性能. 一:注意事项 固态硬盘用户千万不要使用‘磁盘碎片整理功能’,因为使用的技术不一样,使用window自带的该功 ...

  9. MongoDB 分片副本集集群搭建

    配置准备 三台机器: A(193.168.10.101) B(193.168.10.102) C(193.168.10.103) MongoDB 安装目录:/usr/local/mongodb Mon ...

  10. unity profiler - Loading.ReadObject

    关于Loading.ReadObject耗费比较高,有什么推荐的方法吗? Loading.ReadObject是Unity引擎的资源加载函数,一般出现在切换场景和加载API调用时,这其中包括纹理.网格 ...