itsm_ysm/src/main/webapp/data-detail.html
JSYOO 85b209f93e 원문보기 부분 수정
소장자료 리스트 ,조회시 데이터 나오는 형식 수정

소장자료 리스트에서 상세검색 탭 검색시 탭안나오게 ,

검색필터 초기화 수정

상세조회시 데이터 가지고있는 컬럼들 추가

관심클릭시 로그인이 안돼있으면 로그인하세요 alert 출력
2021-11-12 18:26:52 +09:00

636 lines
37 KiB
HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no" />
<title>소장자료관 - 소장자료 상세페이지</title>
<link rel="shortcut icon" type="image/x-icon" href="#">
<link href="/css/common.css" rel="stylesheet">
<link href="/css/jquery.mCustomScrollbar.css" rel="stylesheet">
<link href="/css/swiper.min.css" rel="stylesheet">
<link href="/css/default.css" rel="stylesheet">
<script src="/js/jquery-1.11.2.min.js"></script>
<script src="/js/jquery.mCustomScrollbar.js"></script>
<script src="/js/swiper.min.js"></script>
<script src="/js/default.js"></script>
</head>
<body>
<div class="wrap sub">
<!-- 헤더 -->
<header id="header">
<h2 class="blind">헤더영역</h2>
<div class="inner">
<h1><a href="/"><img src="/images/img/img-logo.png"><span>소장자료관</span></a></h1>
<div class="search-wrap">
<h2 class="blind">검색</h2>
<form id="searchHeaderForm" name="searchHeaderForm" method="post" action="">
<fieldset>
<legend>검색</legend>
<div class="search-input">
<input type="text" placeholder="" title="검색어 입력" name="query" id="query" class="ark_query" value="" autocomplete="off">
<button type="button" class="btn-search" id="searchHeaderButton"><span>검색</span></button>
<button type="button" class="btn-search-detail" id="btn-search-detail-cl">상세검색</button>
</div>
<div class="condition_sear">
<select name="searchField" id="searchField1" class="sear_depth">
<option value="" selected="selected">전체</option>
<option value="TITLE">제목</option>
</select>
</div>
</fieldset>
</form>
</div>
<div class="log">
<ul>
<li><a href="javascript:;" class="login-btn">로그인</a></li>
<li><a href="javascript:;" class="member-btn">회원증</a></li>
<li><a href="javascript:;" class="noti-btn">알림(<span class="count">10</span>)</a></li>
<li><a href="/cart.html">카트(<span class="count">10</span>)</a></li>
</ul>
</div>
</div>
</header>
<div class="nav-wrap">
<div class="inner">
<button id="primary-nav-button" type="button" class="Btn eff"><i class="eff">Menu</i></button>
<nav id="primary-nav" class="dropdown cf">
<ul class="dropdown menu">
<li><a href="/greeting.html" title="자료관안내" class="eff">자료관안내</a>
<ul class="sub-menu">
<li><a href="/greeting.html" title="인사말"><span class="underline blue">인사말</span></a></li>
<li><a href="/guide.html" title="이용안내"><span class="underline blue">이용안내</span></a></li>
<li><a href="/location.html" title="찾아오시는길"><span class="underline blue">찾아오시는길</span></a></li>
</ul>
</li>
<li><a href="/data.html" title="소장자료" class="eff">소장자료</a></li>
<li><a href="/notice.html" title="고객지원" class="eff">고객지원</a>
<ul class="sub-menu">
<li><a href="/notice.html" title="공지사항"><span class="underline blue">공지사항</span></a></li>
<li><a href="/faq.html" title="FAQ"><span class="underline blue">FAQ</span></a></li>
<li><a href="/qna.html" title="Q&amp;A"><span class="underline blue">Q&amp;A</span></a></li>
</ul>
</li>
<li><a href="/myinfo.html" title="마이페이지" class="eff">마이페이지</a>
<ul class="sub-menu">
<li><a href="/myinfo.html" title="회원정보관리"><span class="underline blue">회원정보관리</span></a></li>
<li><a href="/Interested-data.html" title="관심자료"><span class="underline blue">관심자료</span></a></li>
<li><a href="/loan.html" title="대출관리"><span class="underline blue">대출관리</span></a></li>
<li><a href="/visit.html" title="열람관리"><span class="underline blue">열람관리</span></a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<!-- 소장자료 상세페이지 섹션 -->
<div class="data detail">
<h2 class="blind">소장자료 상세피이지 섹션영역</h2>
<div class="inner">
<div class="row-top">
<div class="center">
<div class="left">
<div class="cla">
<div class="con-1">
<span class="online">온라인 열람</span>
<span class="loan">대출</span>
<span class="visit">방문열람</span>
</div>
<div class="con-2">
<span class="code">KCCF1010010001</span>
</div>
</div>
<div class="tit">慶州文化(경주문화)/제23호</div>
<div class="img"><img src="/images/img/img-data-detail-01.jpg" alt="썸네일"></div>
</div>
<div class="right">
<div class="con-1">
<button type="button" class="view">원문보기</button>
<button type="button" class="ris">RIS</button>
<button type="button" class="favorit">즐겨찾기</button>
<button type="button" class="share">공유</button>
</div>
<div class="con-2">
<div class="de-data">
<ul>
<li>
<span>자료유형</span>
<span>도서간행물 &#62; 연속간행물</span>
</li>
<li>
<span>연대</span>
<span>2021년부터 2021까지</span>
</li>
<li>
<span>주제분야</span>
<span>자연과지리 &#62; 자연환경</span>
</li>
<li>
<span>저자</span>
<span>저자명</span>
</li>
<li>
<span>생산기관</span>
<span>경북경주문화원</span>
</li>
<li>
<span>출판사</span>
<span>출판사명</span>
</li>
<li>
<span>생산년도</span>
<span>2021</span>
</li>
<li>
<span>발간유형</span>
<span>사료집</span>
</li>
<li>
<span>테마</span>
<span>생황문화 &#62; 마을신앙</span>
</li>
<li>
<span>발간매체</span>
<span>책자</span>
</li>
<li>
<span>시대</span>
<span>현대-현대(1945.8.15~현대)</span>
</li>
<li>
<span>청구기호</span>
<span>ㄱ-1</span>
</li>
</ul>
</div>
<div class="b-btn">
<button type="button" class="btn btn-color">대출예약</button>
<button type="button" class="btn btn-green">방문열람신청</button>
<button type="button" class="btn btn-orange">카트담기</button>
</div>
<div class="keyword">
<span class="first">키워드</span>
<span>경주</span>
<span>문화인</span>
<span>인물</span>
<span>석불</span>
</div>
</div>
</div>
</div>
</div>
<div class="contents row-bottom">
<div class="con-1">
<div class="list-box">
<div class="list">
<div class="icon"><img src="/images/icon/icon-data-use.png" alt="이용상태 아이콘"></div>
<div class="title">이용상태</div>
<div class="con">대출중 (대기자 <span>0</span>명)</div>
</div>
<div class="list">
<div class="icon"><img src="/images/icon/icon-data-return.png" alt="달력 아이콘"></div>
<div class="title">반납예정일</div>
<div class="con"><span>2021-08-27</span></div>
</div>
<div class="list">
<div class="icon"><img src="/images/icon/icon-data-loan.png" alt="대출 아이콘"></div>
<div class="title">대출</div>
<div class="con"><span class="poss">예약가능</span></div>
</div>
<div class="list">
<div class="icon"><img src="/images/icon/icon-data-visit.png" alt="방문 아이콘"></div>
<div class="title">방문열람</div>
<div class="con"><span class="imposs">신청불가</span></div>
</div>
</div>
<div class="text-box">
<p>- 자료의 이용상태, 대출가능여부, 방문열람가능여부를 꼭 확인하신 후 이용해주시길 바랍니다.</p>
<p>- 다른 지방문화원 소장자료관 이용자들을 위해 꼭 필요한 자료만 예약한 후, 가능한 날짜에 예약 및 이용 부탁드립니다.</p>
</div>
</div>
<div class="con-2">
<div class="top">
<h3><span>목차</span>정보</h3>
<button type="button" class="down-btn">down-btn</button>
</div>
<div class="bottom h-down">
<p><span>1부</span> 역사 속의 경주1 - 경주, 조선의 500년 역사를 찾다</p>
<p><span>2부</span> 역사 속의 경주2 - 금오산을 바라본 조선문인의 시선</p>
<p><span>3부</span> 경주문화제 핫이슈 - 타향살이 100년 ‘청와대 미남석불’, 이제는 고향 경주의 품으로</p>
<p><span>4부</span> 경주문화제 핫이슈 - 타향살이 100년 ‘청와대 미남석불’, 이제는 고향 경주의 품으로</p>
<p><span>5부</span> 경주문화제 핫이슈 - 타향살이 100년 ‘청와대 미남석불’, 이제는 고향 경주의 품으로</p>
<p><span>6부</span> 경주문화제 핫이슈 - 타향살이 100년 ‘청와대 미남석불’, 이제는 고향 경주의 품으로</p>
<p><span>7부</span> 경주문화제 핫이슈 - 타향살이 100년 ‘청와대 미남석불’, 이제는 고향 경주의 품으로</p>
<p><span>8부</span> 경주문화제 핫이슈 - 타향살이 100년 ‘청와대 미남석불’, 이제는 고향 경주의 품으로</p>
<p><span>9부</span> 경주문화제 핫이슈 - 타향살이 100년 ‘청와대 미남석불’, 이제는 고향 경주의 품으로</p>
</div>
</div>
<div class="con-3">
<div class="bottom">
<!-- Swiper -->
<div class="swiper DetailSwiper1">
<div class="top">
<h3><span>함께 볼만한</span>자료</h3>
</div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="List">
<div class="con-1">
<div class="tit underline pink">국역 경주읍지</div>
</div>
<div class="con-2">
<p class="typ"><span>자료유형</span><span>도서간행물 &gt; 연속간행물</span></p>
<p class="sub"><span>주제분야</span><span>자연과지리 &gt; 자연환경</span></p>
<p class="age"><span>생산기관</span><span>경북경주문화원</span></p>
<p class="yea"><span>생산년도</span><span>2003</span></p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="List">
<div class="con-1">
<div class="tit underline pink">국역 경주읍지</div>
</div>
<div class="con-2">
<p class="typ"><span>자료유형</span><span>도서간행물 &gt; 연속간행물</span></p>
<p class="sub"><span>주제분야</span><span>자연과지리 &gt; 자연환경</span></p>
<p class="age"><span>생산기관</span><span>경북경주문화원</span></p>
<p class="yea"><span>생산년도</span><span>2003</span></p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="List">
<div class="con-1">
<div class="tit underline pink">국역 경주읍지</div>
</div>
<div class="con-2">
<p class="typ"><span>자료유형</span><span>도서간행물 &gt; 연속간행물</span></p>
<p class="sub"><span>주제분야</span><span>자연과지리 &gt; 자연환경</span></p>
<p class="age"><span>생산기관</span><span>경북경주문화원</span></p>
<p class="yea"><span>생산년도</span><span>2003</span></p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="List">
<div class="con-1">
<div class="tit underline pink">국역 경주읍지</div>
</div>
<div class="con-2">
<p class="typ"><span>자료유형</span><span>도서간행물 &gt; 연속간행물</span></p>
<p class="sub"><span>주제분야</span><span>자연과지리 &gt; 자연환경</span></p>
<p class="age"><span>생산기관</span><span>경북경주문화원</span></p>
<p class="yea"><span>생산년도</span><span>2003</span></p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="List">
<div class="con-1">
<div class="tit underline pink">국역 경주읍지</div>
</div>
<div class="con-2">
<p class="typ"><span>자료유형</span><span>도서간행물 &gt; 연속간행물</span></p>
<p class="sub"><span>주제분야</span><span>자연과지리 &gt; 자연환경</span></p>
<p class="age"><span>생산기관</span><span>경북경주문화원</span></p>
<p class="yea"><span>생산년도</span><span>2003</span></p>
</div>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper end -->
</div>
</div>
</div>
<div class="row-bottom">
<div class="con-4">
<div class="top">
<h3><span>이 자료와 유사한</span>자료</h3>
<p><strong>“ 경산문화원, 경주문화원, 고령문화 ”</strong> 에 있습니다</p>
</div>
<div class="bottom">
<!-- Swiper -->
<div class="swiper DetailSwiper2">
<div class="swiper-wrapper items cover">
<div class="swiper-slide">
<div class="List">
<div class="inner">
<div class="thumbnail">
<span class="image-frame"><img src="/images/img/img-sec6-01.jpg" alt=""/></span>
<div class="detail-cover">
<strong>2011 신라문화스토리텔러 교육교재 이론</strong>
<ul>
<li><em>주제유형</em>도서간행물</li>
<li><em>주제분야</em>문화유산</li>
<li><em>생산기관</em>마포문화원</li>
<li><em>생산년도</em>미상</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="List">
<div class="inner">
<div class="thumbnail">
<span class="image-frame"><img src="/images/img/img-sec6-01.jpg" alt=""/></span>
<div class="detail-cover">
<strong>2011 신라문화스토리텔러 교육교재 이론</strong>
<ul>
<li><em>주제유형</em>도서간행물</li>
<li><em>주제분야</em>문화유산</li>
<li><em>생산기관</em>마포문화원</li>
<li><em>생산년도</em>미상</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="List">
<div class="inner">
<div class="thumbnail">
<span class="image-frame"><img src="/images/img/img-sec6-01.jpg" alt=""/></span>
<div class="detail-cover">
<strong>2011 신라문화스토리텔러 교육교재 이론</strong>
<ul>
<li><em>주제유형</em>도서간행물</li>
<li><em>주제분야</em>문화유산</li>
<li><em>생산기관</em>마포문화원</li>
<li><em>생산년도</em>미상</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="List">
<div class="inner">
<div class="thumbnail">
<span class="image-frame"><img src="/images/img/img-sec6-01.jpg" alt=""/></span>
<div class="detail-cover">
<strong>2011 신라문화스토리텔러 교육교재 이론</strong>
<ul>
<li><em>주제유형</em>도서간행물</li>
<li><em>주제분야</em>문화유산</li>
<li><em>생산기관</em>마포문화원</li>
<li><em>생산년도</em>미상</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="List">
<div class="inner">
<div class="thumbnail">
<span class="image-frame"><img src="/images/img/img-sec6-01.jpg" alt=""/></span>
<div class="detail-cover">
<strong>2011 신라문화스토리텔러 교육교재 이론</strong>
<ul>
<li><em>주제유형</em>도서간행물</li>
<li><em>주제분야</em>문화유산</li>
<li><em>생산기관</em>마포문화원</li>
<li><em>생산년도</em>미상</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="List">
<div class="inner">
<div class="thumbnail">
<span class="image-frame"><img src="/images/img/img-sec6-01.jpg" alt=""/></span>
<div class="detail-cover">
<strong>2011 신라문화스토리텔러 교육교재 이론</strong>
<ul>
<li><em>주제유형</em>도서간행물</li>
<li><em>주제분야</em>문화유산</li>
<li><em>생산기관</em>마포문화원</li>
<li><em>생산년도</em>미상</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="List">
<div class="inner">
<div class="thumbnail">
<span class="image-frame"><img src="/images/img/img-sec6-01.jpg" alt=""/></span>
<div class="detail-cover">
<strong>2011 신라문화스토리텔러 교육교재 이론</strong>
<ul>
<li><em>주제유형</em>도서간행물</li>
<li><em>주제분야</em>문화유산</li>
<li><em>생산기관</em>마포문화원</li>
<li><em>생산년도</em>미상</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="List">
<div class="inner">
<div class="thumbnail">
<span class="image-frame"><img src="/images/img/img-sec6-01.jpg" alt=""/></span>
<div class="detail-cover">
<strong>2011 신라문화스토리텔러 교육교재 이론</strong>
<ul>
<li><em>주제유형</em>도서간행물</li>
<li><em>주제분야</em>문화유산</li>
<li><em>생산기관</em>마포문화원</li>
<li><em>생산년도</em>미상</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper end -->
</div>
</div>
<div class="btn-box">
<button type="button" class="btn btn-black">목록으로</button>
</div>
</div>
</div>
</div>
<footer id="footer">
<button type="button" id="btn-go-top" class="btn-go-top"><span><img src="/images/icon/icon-arr-top.png" alt="상단 화살표"></span><p>TOP</p></button>
<div class="inner">
<div class="row-top">
<div class="footer-logo">
<h1><a href="#"><img src="/images/img/img-footer-logo.png" alt="푸터 로고"></a></h1>
</div>
<div class="family_site">
<p class="site_name">관련 사이트</p>
<ul class="site_depth">
<li><a href="/" target="_blank">01</a></li>
<li><a href="/" target="_blank">02</a></li>
</ul>
</div>
</div>
<div class="row-bottom">
<div class="left-side">
<ul class="fnb">
<li><a href="/">이용약관</a></li>
<li><a href="/">개인정보처리방침</a></li>
<li><a href="/">찾아오시는 길</a></li>
</ul>
<p class="copy">
서울시 마포대로49 성우빌딩 308호 <span><a href="tel:02-704-2322">TEL. 02.704-2322</a></span> <span>FAX. 02.704-2377</span> <br>
COPYRIGHT (C)2018 The Federation of Korea Culture Center. ALL RIGHT RESERVED.
</p>
</div>
</div>
</div>
</footer>
</div>
<div class="popup pop-sharing" id="div_pop-sharing" >
<div class="pop-wrap">
<div class="sharing-bg">
<p>자료를 <strong>SNS</strong>에 공유해보세요.</p>
<button class="btn-close-pop">닫기</button>
<ul class="sns-list">
<li class="kstory-icon"><img src="/images/icon/icon-sharing-kstory-big.svg" alt="카카오스토리 공유하기" class="sns-pop" /><p>카카오스토리</p></li>
<li class="nblog-icon"><img src="/images/icon/icon-sharing-nblog-big.svg" alt="네이버블로그 공유하기" class="sns-pop" /><p>블로그</p></li>
<li class="fb-icon"><img src="/images/icon/icon-sharing-fb-big.svg" alt="페이스북 공유하기" class="sns-pop" /><p>페이스북</p></li>
<li class="tw-icon"><img src="/images/icon/icon-sharing-tw-big.svg" alt="트위터 공유하기" class="sns-pop" /><p>트위터</p></li>
</ul>
<div class="link-copy">
<input type="text" class="link-txt" id="p_link-copy" value="http://www.nculture.org"/>
<button type="button" style="margin-top:1px" class="btn btn-white">URL복사</button>
</div>
</div>
<div class="Qr">
<div class="inner">
<div id="qrcode" class="Qrimg"><img src="images/img/img-QR.jpg" alt="QR코드 이미지"></div>
<div class="Qrtext"><p><strong>QR코드</strong>를 스캔해주세요.</p></div>
</div>
</div>
</div>
</div>
<div class="pop-serge" style="display:none;">
<div class="row Title">
<h3>서지정보 내보내기<span>(Export)</span></h3>
</div>
<div class="inner">
<div class="row Text">
<div class="con-1">
<p>서지정보 내보내기 안내</p>
<div class="text-box">
<p>소장자료관은 콘텐츠 생산자 및 연구자들을 위해 서지정보 내보내기 기능을 제공하고 있습니다.</p>
<p><span>서지정보 내용</span><br>형식, 제목, 저자, 시리즈, 언어, URL, 태그</p>
<p><span>제공 포맷</span><br>RIS : Search Information System (*.ris)</p>
<p><span>RIS 지원 서지관리 프로그램</span><br>EndNote, Mendeley, Zotero) 외</p>
</div>
</div>
<div class="con-2">
<p>서지관리 프로그램 안내</p>
<div class="text-box">
<p>서지관리 프로그램은 문헌 및 온라인 콘텐츠 등 자료를 관리하고 공유하는데 사용됩니다.</p>
<p>- 해당 프로그램은 소속기관 또는 개인 가입이 필요할 수 있으며, 소장자료관은 링크만 제공하고 직접 서비스를 제공하지 않습니다.</p>
<p><span>Zotero (www.zotero.com) / 한글 메뉴 지원 (o), 300MB 용량 무료 (초과 유료)</span></p>
<p><span>EndNote (www.endnote.com) / 한글 메뉴 지원 (x) , 2G 용량 무료 (초과유료)</span></p>
<p><span>Mendeley (www.mendeley.com) / 한글 메뉴 지원 (x), 2G 용량 무료 (초과유료)</span></p>
</div>
</div>
</div>
<div class="row btn-box">
<button type="button" class="btn btn-color">내보내기</button>
<button type="submit" class="btn btn-gray">닫기</button>
</div>
<button type="button" class="serge-close"></button>
</div>
<div class="Bg"></div>
</div>
<script>
/* 함께 볼만한자료 슬라이드 */
var swiper = new Swiper(".DetailSwiper1", {
loop: true,
slidesPerView: 4,
spaceBetween: 30,
centeredSlides: false,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
/*
pagination: {
el: ".swiper-pagination",
clickable: true,
},
*/
});
/* 유사한 자료 슬라이드 */
var swiper = new Swiper(".DetailSwiper2", {
loop: true,
slidesPerView: 5,
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 1112500,
disableOnInteraction: false,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
/*
pagination: {
el: ".swiper-pagination",
clickable: true,
},
*/
});
</script>
</body>
</html>