Demo
SeedDialog는 간편하게 대화상자를 표현할 수 있습니다. 웹 사이트 제작시 SeedDialog를 사용해 보세요.
Theme
SeedDialog는 다양한 테마의 대화상자를 제공 합니다. 웹 사이트 제작시 SeedDialog를 사용해 보세요.
Support Browser
SeedDialog는 다양한 브라우저를 지원 합니다. 아래의 지원 브라우저를 확인 하세요.
Download
SeedDialog 라이브러리를 다운로드 하세요.
Manual
SeedDialog 메뉴얼을 다운로드 하세요.
라이브러리 추가
Header 영역에 내려받은 SeedDialog를 포함 시키세요.
<!-- css -->
<link rel="stylesheet" type="text/css" href="/resources/library/seeddialog/seeddialog.min.css" />
<!-- script -->
<script type="text/javascript" src="/resources/library/seeddialog/seeddialog.min.js"></script>
대화상자 객체 생성
Javascript 영역에 SeedDialog 객체를 생성 하세요.
// 객체 생성
var seedDialog = new SeedDialog();
seedDialog.setConfig({
sdTheme: "sd_theme1", // 테마
sdTop: "center", // 위치(Top)
sdLeft: "middle", // 위치(Left)
sdWidth: "200", // 너비
sdTitle: "대화상자" // 제목
});
대화상자 Alert 예제
Javascript 영역에 SeedDialog의 dialog 함수를 호출하는 이벤트를 작성 하세요.
// Alert 버튼 클릭 이벤트
$(document).on("click", "#Alert", function () {
seedDialog.dialog(
seedDialog,
"Alert",
{
sdWidth: "200",
sdTitle: "알림",
sdMsg: "알림 버튼이 눌렸습니다.",
sdBtnList: [
{ btnKey: "o", btnNm: "확인" }
]
},
function (pOption) {
if (pOption.sdBtnKey == "o") {
alert("확인");
}
},
null
);
});
대화상자 Confirm 예제
Javascript 영역에 SeedDialog의 dialog 함수를 호출하는 이벤트를 작성 하세요.
// Confirm 버튼 클릭 이벤트
$(document).on("click", "#Confirm", function () {
seedDialog.dialog(
seedDialog,
"Confirm",
{
sdWidth: "250",
sdTitle: "대화상자",
sdMsg: "저장 하시겠습니까?",
sdBtnList: [
{ btnKey: "o", btnNm: "확인" },
{ btnKey: "x", btnNm: "취소" }
]
},
function (pOption, pParam) {
if (pOption.sdBtnKey == "o") {
alert("확인");
alert(pParam);
alert(pParam[0]);
}
else {
alert("취소");
alert(pParam);
alert(pParam[1]);
}
},
[0, 1]
);
});
대화상자 Prompt 예제
Javascript 영역에 SeedDialog의 dialog 함수를 호출하는 이벤트를 작성 하세요.
// Prompt 버튼 클릭 이벤트
$(document).on("click", "#Prompt", function () {
seedDialog.dialog(
seedDialog,
"Prompt",
{
sdWidth: "300",
sdTitle: "프롬프트",
sdPromptList: [
{ promptKey: "name", label: "1. 이름은?" },
{ promptKey: "address", label: "2. 주소는?" }
],
sdBtnList: [
{ btnKey: "o", btnNm: "확인" },
{ btnKey: "x", btnNm: "취소" }
]
},
function (pOption, pParam) {
if (pOption.sdBtnKey == "o") {
alert(pOption.sdPromptValues.name);
alert("확인");
alert(pParam);
alert(pParam[0]);
}
else {
alert(pOption.sdPromptValues.address);
alert("취소");
alert(pParam);
alert(pParam[1]);
}
},
[0, 1]
);
});
