programming/jsp

[jsp] 상단 헤더 고정 좌우 스크롤하기

labj 2013. 10. 1. 13:27

[jsp] 상단 헤더 고정 좌우 스크롤

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<%@ include file="/WEB-INF/pages/includes/variables.jspf" %>

<%--
  - Copyright (c) 1999-2013 ACTSoft, Co., Ltd. All rights reserved.
  -
  - Author      : HNJ
  - Date        : 2013-06-30 00:00:01
  - @(#)
  - Description :
 --%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <link rel="stylesheet" href="<c:url value="/commons/css/main.css" />" type="text/css"/>
 <link rel="stylesheet" href="<c:url value="/commons/css/sub.css" />" type="text/css"/>
 
 <style type="text/css">
  #container {
      width: 90%;
  }
 
  .contents {
      width: 100%;
  }
  
  .tbList {
   height: 600px;
      overflow: scroll;
   Z-INDEX:2;
   top: -10px;
  }
  
  .tbList table {
   width: 100%;
  }
  
  .tbList .bbs {margin:7px 0 0 0;table-layout:fixed;}
  .tbList .bbs th {height:31px;background:#f2f2f2 url('../images/sub/bg_bbs_th.gif') 0 0 no-repeat;border-top:1px solid #999;border-bottom:1px solid #e5e5e5;color:#999;}
  .tbList .bbs th.first {background-image:none;}
  .tbList .bbs td {height:29px;text-align:center;border-bottom:1px solid #e5e5e5;color:#666;}
  .tbList .bbs td.title {padding-left:16px;text-align:left;}
  .tbList .bbs td.title a {margin:0 5px 0 0;color:#666;}
  .tbList .bbs td.title a:hover {color:#e72429;}
  .tbList .bbs td.title img {margin:0 5px 0 0;}
  .tbList .bbs .endLine td {border-bottom:1px solid #ccc;}
  
  .tbList1 {
   height: 60px;
      overflow: scroll;
     
     
     
   SCROLLBAR-FACE-COLOR:#ffffff;
   Z-INDEX:1;
   SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;
   SCROLLBAR-SHADOW-COLOR:#ffffff;
   SCROLLBAR-3DLIGHT-COLOR:#ffffff;
   SCROLLBAR-ARROW-COLOR:#ffffff;
   SCROLLBAR-TRACK-COLOR:#ffffff;
   SCROLLBAR-DARKSHADOW-COLOR:#ffffff;
   HEIGHT:60px;
     
     
  }
  
  .tbList1 table {
   width: 100%;
  }
  
  .tbList1 .bbs {margin:7px 0 0 0;table-layout:fixed;}
  .tbList1 .bbs th {height:31px;background:#f2f2f2 url('../images/sub/bg_bbs_th.gif') 0 0 no-repeat;border-top:1px solid #999;border-bottom:1px solid #e5e5e5;color:#999;}
  .tbList1 .bbs th.first {background-image:none;}
  .tbList1 .bbs td {height:29px;text-align:center;border-bottom:1px solid #e5e5e5;color:#666;}
  .tbList1 .bbs td.title {padding-left:16px;text-align:left;}
  .tbList1 .bbs td.title a {margin:0 5px 0 0;color:#666;}
  .tbList1 .bbs td.title a:hover {color:#e72429;}
  .tbList1 .bbs td.title img {margin:0 5px 0 0;}
  .tbList1 .bbs .endLine td {border-bottom:1px solid #ccc;}
  
  div.g_tab {
      border-bottom: 1px solid #607E9D;
      height: 34px;
      margin: 0 30px;
      padding-top: 20px;
      position: relative;
  }  
 
  div.g_tab ul {
      border-left: 1px solid #5B7282;
      border-top: 1px solid #85A0B1;
      position: absolute;
  }
  
  ul, ol {
      list-style: none outside none;
  } 
 
  div.g_tab ul li {
      border-right: 1px solid #5B7282;
      float: left;
      font-weight: bold;
      height: 34px;
      line-height: 33px;
      text-align: center;
      width: 165px;
  } 
 
 </style>
 
 <script type="text/javascript" src="<c:url value="/commons/js/jquery1.8.3.js" />" ></script>
 
 <script type="text/javascript" >
  var jq = jQuery.noConflict();
  
  jq(document).ready(function(){ 
   
  });  
  
  window.onload=function(){ 
   setTimeout("autoscroll()", 7);
  }  
  
  function goSearch() {
   jq("#searchForm").attr("<c:url value="/joinlist/list" />");  
   jq("#searchForm").submit(); 
  }
  

  function autoscroll() {
      if ( self.div1 ) {
          self.div1.scrollLeft = self.div2.scrollLeft;
          setTimeout("autoscroll()", 7);
      }
  }
 </script>
 
</head>

<body>

 <div class="sub">
  
 <c:set var="sidebar_index" value="0"/>
 <c:set var="sidebar_single_yn" value="Y"/>
 <%@ include file="/WEB-INF/pages/includes/header.jspf" %>

  <div id="container" class="fix">

   <!-- contents -->
   <div class="contents">
    <div class="g_tab">
     <ul>
      <li><a href="<c:url value="/joinlist/list" />">가맹리스트</a></li>
      <li><a href="<c:url value="/joinlist/payList" />">결제내역</a></li>
      <li><a href="<c:url value="/joinlist/orderDetailList" />">주문상태상세내역</a></li>
     </ul>
    </div>
    <h3><%-- <img src="<c:url value="/commons/mileage/images/sub/h3_order_list.gif" />" alt="주문내역" /> --%><em>가맹 리스트입니다.</em></h3>
    
    <form method="get" name="searchForm" id="searchForm">
     <div>
      <input type="text" name="term_syear" id="term_syear"    value="${resultMap.term_syear }" />-
      <input type="text" name="term_smonth" id="term_smonth"  value="${resultMap.term_smonth}" />-
      <input type="text" name="term_sday" id="term_sday"      value="${resultMap.term_sday  }" />&nbsp;~&nbsp;
      <input type="text" name="term_eyear" id="term_eyear"    value="${resultMap.term_eyear }" />-
      <input type="text" name="term_emonth" id="term_emonth"  value="${resultMap.term_emonth}" />-
      <input type="text" name="term_eday" id="term_eday"      value="${resultMap.term_eday  }" />&nbsp;
      <a href="javascript:goSearch();">[검색하기]</a>
     </div>
    </form>
    
    <div  id='div1' class="tbList1">
     <!-- 게시물 리스트 -->
     <table class="bbs bbsOrdejoinList">
      <colgroup>
       <col width="60" />
       <col width="100" />
       <col width="100" />
       <col width="140" />
       <col width="140" />
       <col width="100" />
       <col width="200" />
       <%-- <col width="80" /> --%>
       <%-- <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" /> --%>
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="100" />
       <col width="100" />
       <col width="100" />
       <col width="100" />
       <col width="160" />
       <col width="100" />
       <col width="140" />
       <col width="140" />
      </colgroup>
      <thead>
       <tr>        
        <th class="first">가맹상태          </th>
        <th>아이디            </th>
        <th>이름              </th>
        <th>shop_id           </th>
        <th>shop_name         </th>
        <th>핸드폰            </th>
        <th>주소              </th>
        <%-- <th>마일리지          </th> --%>
        <%-- <th>1월               </th>
        <th>2월               </th>
        <th>3월               </th>
        <th>4월               </th>
        <th>5월               </th>
        <th>6월               </th>
        <th>7월               </th> --%>
        <th>8월               </th>
        <th>9월               </th>
        <th>10월              </th>
        <th>11월              </th>
        <th>12월              </th>
        <th>누적 보존 마일리지</th>
        <th>이용 마일리지     </th>
        <th>최종 마일리지     </th><%-- 담당자명 연락처 소속 직위 E-mail 예상 관리프로그램 게토PC방 ID  --%>
        <th>성함  </th>
        <th>연락처</th>
        <th>소속  </th>
        <th>직위  </th>
        <%-- <th>아이디</th> --%>
        <th>이메일</th>
        <th>예상 관리프로그램</th>
        <th>게토PC방 ID</th>
       </tr>
      </thead>
      <tbody>
     </tbody>
    </table>
   </div>   
    
    
    
    
    <div  id='div2' class="tbList">
     <!-- 게시물 리스트 -->
     <table class="bbs bbsOrdejoinList">
      <colgroup>
       <col width="60" />
       <col width="100" />
       <col width="100" />
       <col width="140" />
       <col width="140" />
       <col width="100" />
       <col width="200" />
       <%-- <col width="80" /> --%>
       <%-- <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" /> --%>
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="80" />
       <col width="100" />
       <col width="100" />
       <col width="100" />
       <col width="100" />
       <col width="160" />
       <col width="100" />
       <col width="140" />
       <col width="140" />
      </colgroup>
      <tbody>

      <c:forEach items="${resultMap.joinList}" var="joinList"> 
       <tr>        
        <td>${joinList.getStatus()}</td>
        <td>${joinList.getM_id()}</td>
        <td>${joinList.getM_name()}</td>
        <td>${joinList.getShop_id()}</td>
        <td>${joinList.getShop_name()}</td>
        <td>${joinList.getCellphone()}</td>
        <td>${joinList.getAddress()}</td>
        <%-- <td>${joinList.getMileage_sum()}</td> --%>        
        <%-- <td>${joinList.getMonth1()}</td>
        <td>${joinList.getMonth2()}</td>
        <td>${joinList.getMonth3()}</td>
        <td>${joinList.getMonth4()}</td>
        <td>${joinList.getMonth5()}</td>
        <td>${joinList.getMonth6()}</td>
        <td>${joinList.getMonth7()}</td> --%>
        <td>${joinList.getMonth8()}</td>
        <td>${joinList.getMonth9()}</td>
        <td>${joinList.getMonth10()}</td>
        <td>${joinList.getMonth11()}</td>
        <td>${joinList.getMonth12()}</td>
        <td>${joinList.getMileage_preserve()}</td>
        <td>${joinList.getMileage_use()}</td>
        <td>${joinList.getMileage_sum()}</td><%-- <td>${joinList.getMileage_final()}</td> --%> 
        <td>${joinList.getS_name()}</td>
        <td>${joinList.getS_phone()}</td>
        <td>${joinList.getDept()}</td>
        <td>${joinList.getPosition()}</td>         
        <%-- <td>${joinList.getS_id()}</td> --%>
        <td>${joinList.getS_email()}</td>
        <td>${joinList.getEtc1()}</td>
        <td>${joinList.getEtc2()}</td>
       </tr>
      </c:forEach> 
      
      </tbody>
     </table>
     
     <!-- //게시물 리스트 -->
    </div>
   </div>
   <!-- //contents -->
   
  </div>

  <div id="footer">
   <img src="<c:url value="/commons/mileage/images/common/footer.gif" />" alt="" />
  </div>
 </div>


</body>
</html>

 

[jsp] 상단 헤더 고정 좌우 스크롤

저작자표시 비영리

'programming > jsp' 카테고리의 다른 글

[jsp] textarea 글자 입력수 제한하기  (0) 2013.10.11
[jsp] 목록에서 상세보기 후 이전 페이지로 돌아가기  (0) 2013.10.02
[jsp] 상단 헤더 고정 좌우 스크롤하기  (0) 2013.09.30
[jsp] file upload  (0) 2013.06.27
[jsp] 톰캣 다중 도메인 적용하기  (0) 2013.06.11

'programming/jsp'의 다른글

  • 현재글[jsp] 상단 헤더 고정 좌우 스크롤하기

관련글

티스토리툴바