'.Net Project/Jquery 1.3.2' 카테고리의 글 목록

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

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

2009. 11. 25. 13:44 .Net Project/Jquery 1.3.2

90장 JQueryModel 파일 업로드 jQuery + Uploadify + ASP.NET (Uploadify.htm)

Uploadify.htm

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

<head>

<title>파일 업로드 : jQuery + Uploadify + ASP.NET</title>

$(document).ready(function () {

$('#fileInput').uploadify({

'uploader': 'uploadify.swf', // Uploadify 컨트롤 지정

'script': 'uploadify.ashx', // 스크립트 ASP.NET, ASP, PHP, JSP

'cancelImg': 'cancel.png', // 취소 이미지

'auto': false, // true면 파일 선택시 바로 자동으로 업로드 됨

'folder': '/Uploads', //업로드 할 폴더 : 가상 디렉터리 + 업로드 폴더

// 업로드 완료 시 처리

// 주요 속성은...
http://www.uploadify.com/documentation/ 참u고Æi

'onComplete': function (event, queueID, fileObj, response, data) {

$('#lblFile').append(

'<a href="/WebJQuery' + fileObj.filePath + '">'

+ fileObj.name + '</a><br>');

}

});

// 버튼 클릭시 업로드

$('#btn').click(function () { $('#fileInput').uploadifyUpload(); });

});

</script>

</head>

<body>

</body>

</html>

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

91장 JQueryApplication 한줄 메모장 ( Memo.htm MemoBasic.htm MemoPager.htm MemoTooltip.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

2009. 11. 25. 13:39 .Net Project/Jquery 1.3.2

89장 JQueryModel 로테인터 플러그인 (Rotator.htm)

Rotator.htm

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

<head>

.divHeight { height:130px; }

</style>

$(document).ready(function () {

$('#rotator1').rotator({ms:3000});

});

</script>

</head>

<body>

<div id="rotator1"

style="height: 130px; width:100px; overflow: hidden; border:1px solid red;">

좋은책
</div>

좋은 컴퓨터
</div>

</div>

</body>

</html>

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

91장 JQueryApplication 한줄 메모장 ( Memo.htm MemoBasic.htm MemoPager.htm MemoTooltip.htm ) (0)	2009.11.25
90장 JQueryModel 파일 업로드 jQuery + Uploadify + ASP.NET (Uploadify.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

2009. 11. 25. 13:36 .Net Project/Jquery 1.3.2

88장 JQueryModel 카루셀 플러그인 (Carrousel.htm)

Carrousel.htm (카루셀 플러그인) 페이지 이동

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

<head>

$(document).ready(function () {

$('#slider-stage').carousel('#previous', '#next');

});

</script>

</head>

<body>

<img src="../../ProductImages/BOOK-01.jpg"

alt="좋은책" height="120" width="120" />

</a>

<img src="../../ProductImages/COM-01.jpg"

alt="좋은 컴퓨터" height="120" width="120" />

</a>

</div>

</div>

</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
87장 JQueryModel 텍스트박스 자동 완성 기능(AutoComplete.htm) (0)	2009.11.25
86장 JQuerySample 헤드 클릭시 해당 정렬 (TableSorting.htm) (0)	2009.11.25
85장 JQuerySample 짝수행과 홀수행의 배경색 변경 (TablePlugIn.htm) (0)	2009.11.25

posted by Magic_kit

.Net Project & 재태크 재무 관리

calendar

Notice

Tag

Category

Recent Post

Recent Comment

Archive

My Link

'.Net Project/Jquery 1.3.2'에 해당되는 글 90건

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

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

90장 JQueryModel 파일 업로드 jQuery + Uploadify + ASP.NET (Uploadify.htm)

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

89장 JQueryModel 로테인터 플러그인 (Rotator.htm)

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

88장 JQueryModel 카루셀 플러그인 (Carrousel.htm)

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

티스토리툴바

.Net Project & 재태크 재무 관리

calendar

Notice

Tag

Search

Category

Recent Post

Recent Comment

Archive

My Link

'.Net Project/Jquery 1.3.2'에 해당되는 글 90건

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

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

90장 JQueryModel 파일 업로드 jQuery + Uploadify + ASP.NET (Uploadify.htm)

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

89장 JQueryModel 로테인터 플러그인 (Rotator.htm)

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

88장 JQueryModel 카루셀 플러그인 (Carrousel.htm)

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

티스토리툴바