Developer

Sharepoint 2010 (Fixed Width Master Pages with JQuery) 넓이 고정 시키기

Angeleyes 2011. 3. 17. 13:46

 

SharePoint 2010의 경우 기본적으로 전체 넓이를 가지고 갑니다.

오늘은 전체 넓이 말고 고정 사이즈를 주고 핸들링 하는 방법에 대해서 작성합니다.

 

해당 문서는 제가 임의로 작업한 부분이라. 명확하지 않습니다.

그리고 s4-workspace 이름을 변경하여 작업하였으며, 이는 Sharepoint가 재대로 사이즈 조정을 못할 수 있음을 알려 드립니다.

 

적용 화면은 아래와 같습니다.

 

V4.master 파일을 보시면 기본적으로 아래와 같은 구조입니다.

	<body>
		<form runat="server" onsubmit="if (typeof(_spFormOnSubmitWrapper) != 'undefined') {return _spFormOnSubmitWrapper();} else {return true;}">
			...
			<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
				Ribbon Contents...
			</div>
			<div id="s4-workspace">
				body Contents....
			</div>
			...
		</form>
	</body>
</html>

 

위 구조에서 제가 변경한 부분은 아래와 같습니다.

css

body #ui-page-wrapper{ margin: 0px; padding: 0px; width: 900px; }
body #s4-workspace-wrapper { width:100%; overflow: auto; background-color:#999999; }
body #s4-ribbonrow-wrapper, body #s4-workspaces{text-align:left;  width: 900px; margin: 0px; padding: 0px; }
body #s4-workspaces { overflow-y:hidden; overflow-x:auto; background-color:#FFFFFF; }
body div#s4-workspace-wrapper div#s4-workspaces div#s4-titlerow { width:100%; }

javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script language="javascript" type="text/javascript">

	$(document).ready(function () {
		$("div#s4-ribbonrow-wrapper").append($("body div#s4-workspace-wrapper div#s4-workspaces div#s4-titlerow"));

		setTimeout(fnSetWorkspaceHeight, 100);

		$(window).resize(function () {
			var ribbonRow = $("body div#s4-ribbonrow-wrapper");
			var workspaceRow = $("div#s4-workspace-wrapper");

			var docHeight = $("div#s4-workspaces").height() + ribbonRow.height();

			if (docHeight < $(window).height())
				$("body div#s4-workspaces").css("margin-left", "0px");
			else
				$("body div#s4-workspaces").css("margin-left", "16px");

			workspaceRow.height(($(window).height() - ribbonRow.height()) + "px");
		});
	});

	function fnSetWorkspaceHeight() {
		var ribbonRow = $("body div#s4-ribbonrow-wrapper");
		var workspaceRow = $("div#s4-workspace-wrapper");

		workspaceRow.height(($(window).height() - ribbonRow.height()) + "px");
		var docHeight = $("div#s4-workspaces").height() + ribbonRow.height();

		if (docHeight < $(window).height())
			$("body div#s4-workspaces").css("margin-left", "0px");
		else
			$("body div#s4-workspaces").css("margin-left", "16px");
	}
</script>

html

	<body>
		<form runat="server" onsubmit="if (typeof(_spFormOnSubmitWrapper) != 'undefined') {return _spFormOnSubmitWrapper();} else {return true;}">
			......
			<table width="100%">
				<tr>
					<td align="center" style="background-color:#999999;">
						<div id="s4-ribbonrow-wrapper">
							<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
								Ribbon Contents...
							</div>
						</div>
						<div id="s4-workspace-wrapper">
							<div id="s4-workspaces" class="s4-nosetwidth">
								body Contents....
							</div>
						</div>
					</td>
				</tr>
			</table>
			......
		</form>
	</body>
</html>

 

위 코드는 본문이 길어질 경우 스크롤 바가 생기는데 해당 스크롤 바를 문서의 좌측으로 정렬하기 위함입니다.

스크립트에서 s4-titlerow를 s4-ribbonrow-wrapper에 넣는 이유는 s4-titlerow가 본문영역에 있기 때문에 깨지는 것을 방지하기 위함입니다.

 

가로 스크롤의 경우에는 본문의 컨텐츠를 사이즈에 맞게 만들어야 되며, 일정과 같은 목록에서는 약간의 수정이 더 필요한 상태입니다.

 

전체 소스는 아래와 같습니다.

 

이상입니다.

 

 





저작자표시 비영리 변경금지