91장 JQueryApplication 한줄 메모장 ( Memo.htm MemoBasic.htm MemoPager.htm MemoTooltip.htm )

일	월	화	수	목	금	토
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
29	30	31

2009. 11. 25. 14:14 .Net Project/Jquery 1.3.2

91장 JQueryApplication 한줄 메모장 ( Memo.htm MemoBasic.htm MemoPager.htm MemoTooltip.htm )

Memo.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery를 사용한 한줄 메모장 /title>

//[1] Ajax를 사용하기 위한 기본 설정 값

$.ajaxSetup({

type: 'post',

dataType: 'json',

contentType: "application/json; charset=utf-8"

});

//[2] 페이지 로드 또는 이벤트 처리기 등록

$(document).ready(function () {

DisplayData(); //데이터 출력 함수 호출
$('#btnAdd').click(btnAdd_Click); // 버튼 클릭시

});

//[3] 데이터 로드

function DisplayData() {

$.ajax({

url: "MemoService.asmx/GetMemos",

cache: false,

data: "{}", // "{page:0}"

success: handleHtml,

error: ajaxFailed

});

}

//[3-1]
function handleHtml(data, status) {

$('#ctlMemoList').empty();

var table = "<table
border='1'><tr><td>번호</td><td>이름</td><td>한줄메모</td><td>작성일</td></tr>";

// Microsoft Ajax

$.each(data.d, function (index, entry) {

// 날짜 형식 변경
var today = new Date(DateDeserialize(entry["PostDate"]));

var month = (today.getMonth() + 1) < 10

? "0" + (today.getMonth() + 1) : (today.getMonth() + 1);
var day = today.getDate() < 10 ? "0" + today.getDate() : today.getDate();

table += '<tr>';

table += '<td>' + entry["Num"] + '</td>';

table += '<td>' + entry["Name"] + '</td>';

table += '<td>' + entry["Title"] + '</td>';

table += '<td>' + today.getFullYear() + "-" + month + "-" + day + '</td>';

table += '</tr>';

});

table += "</table>";

$('#ctlMemoList').append(table);

}

//[3-2] Ajax 로드 실패시 에러 표시

function ajaxFailed(xmlRequest) {

alert(

xmlRequest.status + '\r\n' + xmlRequest.statusText + '\r\n' + xmlRequest.responseText);

}

//[3-3] 날짜 변환 함수

function DateDeserialize(dateStr) {

return eval('new' + dateStr.replace(/\//g, ' '));

}

//[4] 데이터 저장

function btnAdd_Click() {

//[a] 데이터 받기

var name = $('#txtName').val();

var email = $('#txtEmail').val();

var title = $('#txtTitle').val();

//[b] 유효성 검사 : 또 다른 플러그인 검색

if (name.length == 0) {

alert("이름을 입력하시오 "); return;

}

//[c] JSON 형태로 넘길 문자열 묶기

var postVal = "{name:\"" + name + "\", email:\"" + email + "\", title:\"" + title + "\"}";

//[d] Ajax 전송

$.ajax({

url: "MemoService.asmx/AddMemo",

data: postVal,

success: function (data) {

alert('저장완료');

$('#txtName').val('');

$('#txtEmail').val("");

$('#txtTitle').val('');

}

});

}

</script>

</head>

<body>

<h3>한줄메모장 </h3>

이름 : <input id="txtName" type="text" />

이메일: <input id="txtEmail" type="text" />

메모 : <input id="txtTitle" type="text" />

<hr />

<div id="ctlMemoList">여기에 메모리스트 출력</div>

</body>

</html>

MemoBasic.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery를 사용한 메모장 출력</title>

$.ajaxSetup({

type: 'post',

dataType: 'json',

contentType: "application/json; charset=utf-8"

});

$(document).ready(function () {

DisplayData(); });

function DisplayData() {

$.ajax({

url: "MemoService.asmx/GetMemos",

cache: false,

data: "{}", // "{page:0}"

success: handleHtml,

error: ajaxFailed

});

}

function handleHtml(data, status) {

$('#ctlMemoList').empty();

var table = "<table border='1'><tr><td>번호</td><td>이름</td><td>한줄메모
</td><td>작성일</td></tr>";

$.each(data.d, function (index, entry) {

// 날짜 형식 변경

var today = new Date(DateDeserialize(entry["PostDate"]));

var month = (today.getMonth() + 1) < 10

                    ? "0" + (today.getMonth() + 1) :
                     (today.getMonth() + 1);
               var day = today.getDate() < 10 ? "0" +
                         today.getDate() : today.getDate();

table += '<tr>';

table += '<td>' + entry["Num"] + '</td>';

table += '<td>' + entry["Name"] + '</td>';

table += '<td>' + entry["Title"] + '</td>';

table += '<td>' + today.getFullYear() + "-" + month + "-" + day + '</td>';

table += '</tr>';

});

table += "</table>";

$('#ctlMemoList').append(table);

}

function ajaxFailed(xmlRequest) {

alert(

xmlRequest.status + '\r\n' + xmlRequest.statusText + '\r\n' + xmlRequest.responseText);

}

function DateDeserialize(dateStr) {

return eval('new' + dateStr.replace(/\//g, ' '));

}

function btnAdd_Click() {

var name = $('#txtName').val();

var email = $('#txtEmail').val();

var title = $('#txtTitle').val();

if (name.length == 0) {

alert("이름을 입력하시오."); return;

}

var postVal = "{name:\"" + name + "\", email:\"" +
email + "\", title:\"" + title + "\"}";

//[d] 전송

$.ajax({

url: "MemoService.asmx/AddMemo",

data: postVal,

success: function (data) {

alert('저장완료');

$('#txtName').val('');

$('#txtEmail').val("");

$('#txtTitle').val('');

DisplayData(); // 재로드 }

});

}

</script>

</head>

<body>

<h3>한줄메모장</h3>

이름 : <input id="txtName" type="text" />

이메일 : <input id="txtEmail" type="text" />

메모 : <input id="txtTitle" type="text" />

<hr />

<div id="ctlMemoList">여기에 메모리스트 출력</div>

</body>

</html>

MemoPager.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery를 사용한 한줄 메모장 </title>

$.ajaxSetup({

type: 'post',

dataType: 'json',

contentType: "application/json; charset=utf-8"

});

$(document).ready(function () {

DisplayData();
$('#btnAdd').click(btnAdd_Click);

});

function DisplayData() {

$.ajax({

url: "MemoService.asmx/GetMemos",

cache: false,

data: "{}", // "{page:0}"

success: handleHtml,

error: ajaxFailed

});

}

function handleHtml(data, status) {

$('#ctlMemoList').empty();

var table =

"<table border='1'><thead><tr><th>번호</th><th>이름</th><th>작성일</th></tr></thead>";

$.each(data.d, function (index, entry) {

//날짜 형식 변경

var today = new Date(DateDeserialize(entry["PostDate"]));

var month = (today.getMonth() + 1) < 10

                    ? "0" + (today.getMonth() + 1) :
                      (today.getMonth() + 1);
                var day = today.getDate() < 10 ? "0" +
                       today.getDate() : today.getDate(); // 일I

table += '<tr class="search' + entry["Num"] + '">';

table += '<td>' + entry["Num"] + '</td>';

table += '<td>' + entry["Name"] + '</td>';

table += '<td>' + today.getFullYear()
+ "-" + month + "-" + day + '</td>';

table += '</tr>';

var tt = '<div id="tooltip-layer' + entry["Num"]

+ '" style="display:none;width:200px;height:100px;'

+ 'border:1px solid gray;background-color:white;">'

+ entry["Title"] + '</div>';

$('#ctlTooltip').append(tt); //

});

table += "</table>";

$('#ctlMemoList').append(table);

//[!] 페이징 처리의 기본은 ('').pageable();

$('table:eq(0)').pageable({

limit: 2, //

                pagelimit: 10,
                started: 1
            });

$.each(data.d, function (index, entry) {

// 툴팁을 띄어보자

$(".search" + entry["Num"]).mouseover(function (e) {

$(this).mousemove(function (e) {

$(this).css("cursor", "hand");

var t = e.clientY - 15; // 상단에 표시

var l = e.clientX + 20; //

$("#tooltip-layer" + entry["Num"])

.css({ "top": t, "left": l, "position":
"absolute", "opacity": "0.8" })

.show();

});

$(".search" + entry["Num"]).mouseout(function () {

$("#tooltip-layer" + entry["Num"]).hide();

});

}

function ajaxFailed(xmlRequest) {

alert(

xmlRequest.status + '\r\n' + xmlRequest.statusText + '\r\n' + xmlRequest.responseText);

}

function DateDeserialize(dateStr) {

return eval('new' + dateStr.replace(/\//g, ' '));

}

function btnAdd_Click() {

var name = $('#txtName').val();

var email = $('#txtEmail').val();

var title = $('#txtTitle').val();

if (name.length == 0) {

alert("이름을 입하시오."); return;

}

var postVal = "{name:\"" + name + "\",
email:\"" + email + "\", title:\"" + title + "\"}";

$.ajax({

url: "MemoService.asmx/AddMemo",

data: postVal,

success: function (data) {

alert('저장완료');

$('#txtName').val('');

$('#txtEmail').val("");

$('#txtTitle').val('');

DisplayData(); // 재c 로¤I드ìa

}

});

}

</script>

</head>

<body>

이름 : <input id="txtName" type="text" />

이메일 : <input id="txtEmail" type="text" />

메모 : <input id="txtTitle" type="text" />

<hr />

</body>

</html>

MemoTooltip.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery를 사용한 한줄 메모장 </title>

$.ajaxSetup({

type: 'post',

dataType: 'json',

contentType: "application/json; charset=utf-8"

});

$(document).ready(function () {

DisplayData();

$('#btnAdd').click(btnAdd_Click);
});

function DisplayData() {

$.ajax({

url: "MemoService.asmx/GetMemos",

cache: false,

data: "{}", // "{page:0}"

success: handleHtml,

error: ajaxFailed

});

}

function handleHtml(data, status) {

$('#ctlMemoList').empty();

var table = "<table border='1'><tr><td>번호</td><td>이름</td><td>작성일</td></tr>";

$.each(data.d, function (index, entry) {

var today = new Date(DateDeserialize(entry["PostDate"]));

var month = (today.getMonth() + 1) < 10

? "0" + (today.getMonth() + 1) : (today.getMonth() + 1); //

var day = today.getDate() < 10 ? "0" + today.getDate() : today.getDate();

table += '<tr class="search' + entry["Num"] + '">';

table += '<td>' + entry["Num"] + '</td>';

table += '<td>' + entry["Name"] + '</td>';

table += '<td>' + today.getFullYear() + "-" + month + "-" + day + '</td>';

table += '</tr>';

var tt = '<div id="tooltip-layer' + entry["Num"]

+ '" style="display:none;width:200px;height:100px;'

+ 'border:1px solid gray;background-color:white;">'

+ entry["Title"] + '</div>';
$('#ctlTooltip').append(tt); //

});

table += "</table>";

$('#ctlMemoList').append(table);

$.each(data.d, function (index, entry) {

$(".search" + entry["Num"]).mouseover(function (e) {

$(this).mousemove(function (e) {

$(this).css("cursor", "hand");

var t = e.clientY - 15; //

var l = e.clientX + 20; //

$("#tooltip-layer" + entry["Num"])

.css({ "top": t, "left": l,
"position": "absolute", "opacity": "0.8" })

.show();

});

$(".search" + entry["Num"]).mouseout(function () {

$("#tooltip-layer" + entry["Num"]).hide();

});

}

function ajaxFailed(xmlRequest) {

alert(

xmlRequest.status + '\r\n' + xmlRequest.statusText + '\r\n' + xmlRequest.responseText);

}

function DateDeserialize(dateStr) {

return eval('new' + dateStr.replace(/\//g, ' '));

}

function btnAdd_Click() {

var name = $('#txtName').val();

var email = $('#txtEmail').val();

var title = $('#txtTitle').val();

if (name.length == 0) {

alert("이름을 입력하시오."); return;

}

var postVal = "{name:\"" + name + "\",
email:\"" + email + "\", title:\"" + title + "\"}";

$.ajax({

url: "MemoService.asmx/AddMemo",

data: postVal,

success: function (data) {

alert('저장완료');

$('#txtName').val('');

$('#txtEmail').val("");

$('#txtTitle').val('');

DisplayData(); //재로드
}

});

}

</script>

</head>

<body>

이름 : <input id="txtName" type="text" />

이메일 : <input id="txtEmail" type="text" />

메모 : <input id="txtTitle" type="text" />

<hr />

</body>

</html>

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

90장 JQueryModel 파일 업로드 jQuery + Uploadify + ASP.NET (Uploadify.htm) (0)	2009.11.25
89장 JQueryModel 로테인터 플러그인 (Rotator.htm) (0)	2009.11.25
88장 JQueryModel 카루셀 플러그인 (Carrousel.htm) (0)	2009.11.25
87장 JQueryModel 텍스트박스 자동 완성 기능(AutoComplete.htm) (0)	2009.11.25
86장 JQuerySample 헤드 클릭시 해당 정렬 (TableSorting.htm) (0)	2009.11.25

posted by Magic_kit

.Net Project & 재태크 재무 관리

calendar

Notice

Tag

Category

Recent Post

Recent Comment

Archive

My Link

91장 JQueryApplication 한줄 메모장 ( Memo.htm MemoBasic.htm MemoPager.htm MemoTooltip.htm )

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

티스토리툴바

.Net Project & 재태크 재무 관리

calendar

Notice

Tag

Search

Category

Recent Post

Recent Comment

Archive

My Link

91장 JQueryApplication 한줄 메모장 ( Memo.htm MemoBasic.htm MemoPager.htm MemoTooltip.htm )

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

티스토리툴바