티스토리 뷰

Skill/html js css

[JQuery] splitter 사용법

진열사랑 2020. 9. 17. 23:14

출처 : github.com/jcubic/jquery.splitter

 

jcubic/jquery.splitter

jQuery Splitter is plugin that split your content with movable splitter between them - jcubic/jquery.splitter

github.com

div로 분할된 화면을 자유자재로 늘이고 줄일 수 있다. 

jquery.splitter를 잘 포장한 것이 ui.alopex.io/development/plugin/splitter 이 사이트이다.

jquery.splitter 예제 : http://jquery.jcubic.pl/splitter.php

<!DOCTYPE HTML>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery Splitter Demo</title>
    <meta name="Description" content="jQuery Splitter Demo"/>
    <link rel="shortcut icon" href=""/>
    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="https://unpkg.com/jquery.splitter/js/jquery.splitter.js"></script>
    <link href="https://unpkg.com/jquery.splitter/css/jquery.splitter.css" rel="stylesheet"/>
    <!--[if IE]>
    <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<script>
jQuery(function($) {
	// 좌우div(or상하div)를 감싸는 div에 splitter를 정의한다.
	$('#widget').width(700).height(700).split({orientation:'vertical', limit:100});
  
	/*// 다음과 같이 해도 된다.
	const splitterParentOffset = $("#tab_instr_content").offset();
	const splitterParentHeight = window.innerHeight - (splitterParentOffset.top+10); 
	// 크기조절분리선(splitter)설정    
	var splitter = $('#widget').height(splitterParentHeight).split({
	    orientation: 'vertical',  // 세로분할,가로분할 선택
	    limit: 100, 			  // 최소한도 px
	    position: '50%', 		  // splitter의 위치 if there is no percentage it interpret it as pixels
	    onDrag: function(event) { // 크기조절 분리선(splitter)을 드래그 할 때의 해야할 작업 정의
	    	map.updateSize();
	    }
	}); */

});
</script>
<style>
#widget {width:700px; height:500px;}

#spliter2 .a {  background-color: #2d2d2d;}
#spliter2 .b {  background-color: #2d002d;}
#foo {  background-color: #E92727;}
#x {  background-color: #EFBD73;}
#y {  background-color: #EF3e32;}
#b {  background-color: #73A4EF;}
#bar {  background-color: #BEE927;}
</style>
</head>
<body>
<div id="widget">
	<div id="foo">foo   </div> <!-- end of #foo -->
	<div id="bar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dolor nisl, in suscipit justo. Donec a enim et est porttitor semper at vitae augue. Proin at nulla at dui mattis mattis. Nam a volutpat ante. Aliquam consequat dui eu sem convallis ullamcorper. Nulla suscipit, massa vitae suscipit ornare, tellus est consequat nunc, quis blandit elit odio eu arcu. Nam a urna nec nisl varius sodales. Mauris iaculis tincidunt orci id commodo. Aliquam non magna quis tortor malesuada aliquam eget ut lacus. Nam ut vestibulum est. Praesent volutpat tellus in eros dapibus elementum. Nam laoreet risus non nulla mollis ac luctus felis dapibus. Pellentesque mattis elementum augue non sollicitudin. Nullam lobortis fermentum elit ac mollis. Nam ac varius risus. Cras faucibus euismod nulla, ac auctor diam rutrum sit amet. Nulla vel odio erat, ac mattis enim.
	</div>
</div> <!-- end of #widget -->
<div id="debug"></div>


</body>
</html>
저작자표시 비영리

'Skill > html js css' 카테고리의 다른 글

Javascript 기반의 압축 라이브러리, jszip  (0) 2020.09.20
GNB·LNB·SNB·FNB 용어 설명  (0) 2020.09.19
[openlayers] 지도 상에 10만개의 별 그리기에 대한 속도 테스트  (0) 2020.09.15
div 마우스로 크기 조절  (0) 2020.09.15
[CSS3] @font-face(웹 폰트) 웹퍼블리싱  (0) 2020.09.09
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함