코드헬퍼 검색창을 커스터마이징 하는 방법

본 페이지에서는 코드헬퍼 검색창을 커스터마이징 하는 방법을 알아 보겠습니다.

우선 아래의 표를 확인해 주세요.

CodeHelperPage Sub Properties
Name Type Description
Height Unit 코드헬퍼 검색창의 높이를 가져오거나 저장할 수 있습니다.
아래는 높이가 조정된 코드헬퍼입니다.
<bf:CodeHelper ID="CodeHelper1" runat="server" CodeHelperType="Common" MainCode="A01">
	<CodeHelperPage Height="200px" />
</bf:CodeHelper>
HelperUrl string 사용자정의 코드헬퍼 검색창의 경로를 가져오거나 저장할 수 있습니다.
아래는 내장된 코드헬퍼 검색창을 사용하지 않고, 개발자가 새롭게 개발한 코드헬퍼 검색창을 사용하는 샘플입니다.
<bf:CodeHelper ID="CodeHelper3" runat="server" CodeHelperType="Common" MainCode="A01">
	<CodeHelperPage HelperUrl="/Views/BANANA-Web-Controls/CodeHelper-CustomCodeHelper.aspx" />
</bf:CodeHelper>
별도의 코드헬퍼 검색창을 사용할 때에는 자바스크립트 함수를 2개 만들어 주어야 합니다.
상세한 페이지 설명은 아래 페이지 소스를 참조하세요.
WIdth Unit 코드헬퍼 검색창의 넓이를 가져오거나 저장할 수 있습니다.
아래는 넓이가 조정된 코드헬퍼입니다.
<bf:CodeHelper ID="CodeHelper2" runat="server" CodeHelperType="Common" MainCode="A01">
	<CodeHelperPage Width="400px" />
</bf:CodeHelper>

아래는 사용자 정의 코드헬퍼 검색창의 소스입니다. 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CodeHelper-CustomCodeHelper.aspx.cs" Inherits="WebSite.Service.HowToUse.BANANA_Web_Controls.CodeHelper_CustomCodeHelper" %>

<!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">
<head runat="server">
	<title>새로운 페이지의 제목을 입력하지 않으면, 기본 제목을 표시합니다.</title>
	<script src="/Common/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		// 부모페이지의 개체들
		var $modal_container; // 코드헬퍼 창이 화면에 출력되면, 배경화면에 마우스 클릭을 막고 opacity를 70%로 떨어뜨리는 DIV
		var $iframe_container; // 코드헬퍼 검색창을 감싸는 iframe
		var $codehelper_container; // 부모 페이지의 코드, 코드명 및 이미지버튼을 감싸는 SPAN 컨테이너
		var $totalcode_textbox; // 코드 텍스트박스
		var $codename_textbox; // 코드명 텍스트박스

		// 부모페이지의 개체들을 설정해 줌(이 함수명을 변경하면 안 됨)
		function setParentObject(a, b, c, d, e) {
			$modal_container = a;
			$iframe_container = b;
			$codehelper_container = c;
			$totalcode_textbox = d;
			$codename_textbox = e;
		}

		// 부모페이지의 코드와 코드명에 값을 바인딩 처리함
		function yourFunctionName(code, name) {
			// TotalCode
			$totalcode_textbox.val(code);
			// CodeName
			$codename_textbox.val(name);

			// Update 이벤트 트리거를 실행합니다.
			var json_object = { "TotalCode": code, "CodeName": name }; // json 형식으로 만들어 줍니다.
			$codehelper_container.trigger("update", json_object);
			
			// 흐릿한 배경화면 개체를 제거합니다.
			$(parent.document).find($modal_container).remove();

			// 코드헬퍼 검색창을 제거합니다.
			$(parent.document).find($iframe_container).remove();
		}
	</script>
</head>
<body>
	<form id="form1" runat="server">
	<table style="width: 100%;">
		<tr>
			<td>검색어</td>
			<td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
			<td><asp:Button ID="_btnSRC" runat="server" Text="검색" /></td>
		</tr>
		<tr>
			<td colspan="3">
				<a href="javascript:yourFunctionName('A01001', '운영자');">여기를 클릭해서, 코드를 반환하세요.</a>
			</td>
		</tr>
	</table>
	</form>
</body>
</html>
이전으로 돌아가기

TOP