탭 아이프레임
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#tabs").tabs({ beforeActivate: function( event, ui ) { if(ui.newPanel.attr("id")=="fragment-2") { ui.newPanel.html("<iframe src='http://www.experts-exchange.com' style='width:320px;height:600px;'/>"); } if(ui.newPanel.attr("id")=="fragment-3") { ui.newPanel.html("<iframe src='http://iskytour.co.kr' style='width:600px;height:500px;'/>"); } } }); }); </script> </HEAD> <BODY> <div id="tabs"> <ul style="background:#fff;"> <li><a href="#fragment-1"><span>One</span></a></li> <li><a href="#fragment-2"><span>Two</span></a></li> <li><a href="#fragment-3"><span>Three</span></a></li> </ul> <div id="fragment-1"> <p>First tab is active by default:</p> <pre><code>$( "#tabs" ).tabs(); </code></pre> </div> <div id="fragment-2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-3" style="overflow:hidden; height:auto"> </div> </div> </BODY> </HTML>
팝업하루 안뜨기
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>New Document</TITLE> </HEAD> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#closeBtn").click(function () { setCookie("showCookies", "N", 1); //1일동안 유지되는 쿠키 생성 $('#popup_1').hide(); // 레이어 감춤 }); $("#closex").click(function () { $('#popup_1').hide(); // 레이어 감춤 }); $("#deleteCookie").on("click", function () { delete_cookie("showCookies"); //쿠기 삭제 }); if (getCookie("showCookies") != "N") { $("#popup_1").show(); // showCookies 라는 이름의 쿠키 값이 "N" 이 아니면 레이어 보여줌 } }); function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); var expires = "expires=" + d.toUTCString(); document.cookie = cname + "=" + cvalue + "; " + expires + '; Path=/;'; } function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1); if (c.indexOf(name) == 0) return c.substring(name.length, c.length); } return ""; } function delete_cookie(name) { document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'; } </script> <style type="text/css"> #popup_1 { overflow:hidden; display: none; border: 1px solid #cccccc; width:350px; /* 팝업가로크기 세로크기는 관계없음 */ top:0px; /* 팝업 위에서 숫자 적용 */ left:100px; /* 팝업 왼쪽에서 숙자 적용 */ padding: 0px; position: fixed; } #closeBtn { cursor:pointer; position: relative; text-align:right; font-size:12px; padding:8px 10px 5px 10px; line-height:12px; } #closeX { cursor:pointer; position: relative; padding:8px 10px 5px 10px; font-color:blue; font-size:12px; line-height:12px; background:#f7f7f7; } #closeX li { float:right; list-style:none } #deleteCookie { cursor: pointer; } </style> <BODY> <body> <div id="popup_1"> <div id="closex" style="">오사카하루특가 !!! <li>X 닫기</li> </div> <img src="http://www.jt1.co.kr/total_upload/popup/pop_autumn[2].jpg"> <div id="closeBtn"> [닫기 - 하루동안 안보임] </div> </div> <Br> <Div id="deleteCookie"> [쿠키삭제] </Div> <br> <br> 테스트 방법: <br> 1. 처음에 레이어가 보임 (쿠기가 없으므로) <br> 2. 아래의 [닫기] 누르면 레이어 사라짐 (하루안뜬 쿠키생성) <br> 3. 위의 X닫기 누르면.. 그냥닫힘 <br> 4. [쿠키삭제] 누르고 다시 새로고침하면 레이어 뜸 (쿠기가 없으므로) </body> </BODY> </HTML>
상품 리스트 및 일정표 responsive
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ }); </script> <style> * {font-size:12px;} div.best_goods{ padding: 15px; /* 패딩값은 간격을 보고 적당히 조절 */ max-width: 1100px; width:80%; border: 1px solid #ccc; box-sizing:border-box; margin:0 auto; overflow:hidden; } div.best_goods_item{ float: left; background-color: #eee; border: 1px solid #898989; border-radius: 11px; padding: 20px; min-height:220px; width: 23%; margin-left:2.666%; /* 1줄 3칸일때는 32%-2%, 1줄 4칸일때는 23%-2.666% */ text-align: center; box-sizing:border-box; margin-bottom:15px; } /* 일정표 스타일 */ div {box-sizing:border-box} li {list-style-position:inside; list-style-type:none; display:inline-block; padding:8px} #il_wrap {max-width:1100px; width:80%; overflow:hidden;margin:30px auto; padding:15px; border:1px solid #ccc} #il_cha {width:100%; overflow:hidden; border:1px solid #ccc; display:flex;} #il_cha .area {flex: 1;border-right:1px solid #ccc; padding:8px; text-align:center} #il_cha .area2 {display:none; flex:none; width:100%; height:40px; padding:8px; border-bottom:1px solid #ccc} #il_cha .ilcon {flex: 10; padding:8px} /* 일정표 스타일 */ @media (max-width: 1920px) and (min-width:1024px) { /* 1줄 4개일때 */ div.best_goods_item:nth-child(4n+1){ margin-left: 0; } } @media (max-width: 1024px) and (min-width:800px) { #il_cha {display:block} #il_cha .area {display:none;} #il_cha .area2 {display:block;} #il_cha .ilcon {flex:none} div.best_goods_item{ width: 32%; margin-left:2%; } /* 1줄 3개일때 */ div.best_goods_item:nth-child(3n+1){ margin-left: 0; } } @media (max-width: 800px) and (min-width:480px) { #il_wrap {width:100%;} #il_cha {display:block} #il_cha .area {display:none; } #il_cha .area2 {display:block; } #il_cha .ilcon {flex:none} div.best_goods{ width:100%; } div.best_goods_item{ width: 48%; margin-left:4%; } /* 1줄 2개일때 */ div.best_goods_item:nth-child(2n+1){ margin-left: 0; } } @media (max-width: 480px) { #il_wrap {width:100%;} #il_cha {display:block} #il_cha .area {display:none; } #il_cha .area2 {display:block; } #il_cha .ilcon {flex:none} div.best_goods{ width:100%; } div.best_goods_item{ width: 100%; margin-left:0%; } /* 1줄 2개일때 */ div.best_goods_item:nth-child(1n+1){ margin-left: 0; } } </style> </HEAD> <BODY> <div class="best_goods"> <div class="best_goods_item">inner box 1<br>222</div> <div class="best_goods_item">inner box 2</div> <div class="best_goods_item">inner box 3</div> <div class="best_goods_item">inner box 4</div> <div class="best_goods_item">inner box 5</div> <div class="best_goods_item">inner box 6</div> <div class="best_goods_item">inner box 7</div> <div class="best_goods_item">inner box 2</div> <div class="best_goods_item">inner box 3</div> <div class="best_goods_item">inner box 4</div> </div> <div id="il_wrap"> <div style="height:40px; background:#1a4f98; color:#fff; font-weight:bold; font-size:24px; line-height:40px; padding-left:15px">1<span style="font-size:12px; font-weight:normal">일차</span></div> <div id="il_cha"> <div class="area2"><span style="display:inline-block; width:60px; padding:5px 5px; background:#f7f7f7;border:1px solid #ebebeb; text-align:center; border-radius:5px; margin-right:15px; font-size:11px">지역</span>부산 / 타이페이</div> <div class="area">부산<br>타이페이</div> <div class="ilcon"> 항공기 출발<STRONG> </STRONG><FONT color=#ff0000>2시간 30분 전까지 공항 도착</FONT> 후 탑승수속 → <A href="http://www.iskytour.co.kr/tinfo/tinfo_detail.asp?t_cd=10"><A href="http://www.iskytour.co.kr/tinfo/tinfo_detail.asp?t_cd=10"><STRONG><FONT color=#1e90ff size=3 face=Thread-0000422c-Id-00000000><U>바로보기</U></FONT></STRONG></A><BR><BR><STRONG>[20:00]</STRONG> 부산 국제공항 출발<STRONG> </STRONG><FONT color=#ff0000><STRONG>[CI 187]</STRONG></FONT><BR><STRONG>[21:45]</STRONG> 타이페이 국제공항 도착 후 환승 <BR><STRONG>[23:50]</STRONG> 타이페이 국제공항 출발<FONT color=#ff0000> <STRONG>[CI 51]<BR><BR></STRONG><FONT color=#6e246d>위탁수화물(짐)은 호주 시드니에서 찾습니다.</FONT></FONT> </div> </div> <div style="height:30px; line-height:30px; padding-left:10px; border:1px solid #ccc; border-top:0; background-image: url(http://special.iskytour.co.kr/images/iljung/ic_hotel.png);background-position: left center;background-repeat: no-repeat;background-origin: content-box"><span style="color:blue; margin-left:30px;">호텔 : 아시아나 호텔 및 동급</span></div> <div style="height:30px; line-height:30px; padding-left:10px; border:1px solid #ccc; border-top:0; background-image: url(http://special.iskytour.co.kr/images/iljung/ic_food.png);background-position: left center;background-repeat: no-repeat;background-origin: content-box"><span style="color:blue; margin-left:30px;">조식 : 호텔식 / 중식 : 호텔식 / 석식 : 호텔식</span></div> </div> </BODY> </HTML>
