Jquery Study

카테고리 없음

Jquery Study

suiiiii87 2018. 12. 14. 20:25

jQuery.com 사이트에서 다운 받기

버전 3은 최신 버전인데 아직 국내에서는 메인으로 사용하기 부담감이 있음

( 개발하기 위해서는 블로그에 IE 6/7/8을 위한 버전 1을 사용한다.)

<scripttype="text/javascript">

alert("상단");

</script>

이렇게 하여 상단 중앙 하단을 나눠준다.

<scripttype="text/javascript">

$(document).ready(fuction(){

alert("상단");

})

</script>

코드는 위에서 아래로 호출(실행)이 되는데

$(document).ready(fuction(){})

ready 사용함으로써 마지막에 뜨게 됨.

jQuery 밑에 javascript를 선언하게 되면 실행이 되지않는다.

html에서 f12를 눌러 확인하면 오류가 뜨게 됨.

$(document).ready(fuction(){})가 길다면

$(function(){})를 사용하여도 위와 같은 작동을 하게 된다.

$(function(){

alert(document.getElementById("txt1").value);

})

일반 자바스크립트로 작성했을때 이렇게 위와 같이 작성하면 나온다.

text1의 값이 출력이 된다.

$("#txt1").val();

jquery는 위와 같이 바꿔서 사용한다.

위의 두가지 방법은 같다.

위의 내용을 변수로 저장한다면

var txt1 = $("#txt1").val();

이렇게 해주면 된다.

function 안의 값은 set이라고 보면되고

그냥 script안에 적은 값은 get이라고 보면된다.

속성값에 대한 get set을 보자면

$(function(){

$("#div1").attr("style","color:red;);

div1의 안의 글자의 색이 빨강으로 변함.

alert($("#div1").attr("style"))

div1인 styled의 속성을 가져온다라는 뜻

alert($("#div2").attr("class"))

div2인 클레스의 값을 가져온다라는 뜻

})

<div id="div1" style="display:block;"> 테스트1

<div id="div1" class="testDiv"> 테스트1

$("#div1").attr("태그의 속성 KEY명");

현재 적용되어 있는 스타일을 가져오는 것으로 get이다.

$("#div1").attr("태그의 속성 KEY명","스타일");

뒤에 스타일 값이 들어가면 set이다.

$("#node2").html("<h1>테스트</h1>");

을 하면 특정영역에 있는 html을 뽑아와서 적용시키고 뽑아낸다.

$("#node2").text("<h1>테스트</h1>");

을 하면 텍스트로 그냥 뽑아낸다.

1.input, select = val("SET값");

2.태그의 속성값을 알기 위한 함수는 = attr("속성명") => get

= attr("속성명","속성값") => set

3. 특정 html 영역의 html 값을 알고 싶다면 화면에 html()

html 코드자체를 화면에 출력시키고자 한다면 text() 사용하면 된다.

크롬에서 f12를(개발자모드) 누르고 별도의 창을 띄워서 오류를 확인하고

수정할 수 있다.

$(function(){

before(엘리먼트), after(엘리먼트), prepend(엘리먼트), append(엘리먼트)

특정 지정한 태그 전에 붙는건 before

특정 지정한 태그 이후에 붙는건 after

var html = '<div><h1>삽입된 레이아웃</h1></div>';

${"#layer1").before(html);

layer1 전에 html의 내용이 들어간다.

${"#layer1").after(html);

layer1 이후에 html의 내용이 들어간다.

prepend를 주면 최상단에 내용이 들어간다.

${"#layer2").prepend(html);

layer2에서 첫번째 레이아웃 앞에 삽입된 레이아웃 이라고 들어간다.

append를 주면 최하단에 내용이 들어간다.

${"#layer2").append(html);

layer2에서 세번째 레이아웃 뒤에 삽입된 레이아웃 이라고 들어간다.

})

</div>

</div>

셀렉터(선택자) 알아보기

JQuery 사이트에 들어가면 APIDocumentation들어가면

왼쪽에 selector 탭에 지정된 연산자들이 나온다.

$(function(){

$(".xxx") = class

$("#xxx") = id

위와 같은 방식으로 값을 가져 오는 것이다.

Var txt1 = $(".text1").val(); or var txt1=$("input[class=text1]").val();

두가지 방법을 사용 할 수있다. 클래스이기에 앞에 ( . ) 을 붙여서 사용할 수 있다.

Val()로 값을 가져온다.

Console.log(txt1); => system.out.println 과 같은 기능이다.

브라우저에서 값을 출력해 보기 위한 함수이다.

f12에서 console 탭에 가면 나오게 된다.

$("input[name=xxx]") => name으로 찾는 방식이다. 태그의 속성값 tag[속성키=속성값]

Var txt1 = $("input[name=textName1]").val();

Console.log(txt1);

})

$(function(){

$("input[name=xxx]:cheched")

Var chechedRadio = $("input[name=rdo]:cheched").val();

Console.log(chechedRadio);

cheched가 붙은 특정 속성이 붙은 값을 선택하여 출력을 한다.

})

eq에 대한 설명

단일 값이 아닌

$(function(){

Console.log($(".class2").html());

밑에 값을 출력하여 본다.

})

<body>

</div>

</div>

</body>

이렇게 출력하면 첫번재인 값입니다1 을 출력하게 된다.

하지만 두번째 값을 출력하고 싶을때는

Var class2 = $(".class2:eq(1)").html();

Console.log(class2);

eq는 0부터 순차적으로 늘어나기 때문에 1을 줘야 2번째가 나온다.

class2인 태그에 두번째 속하는 html값을 가져온다는 뜻

input으로도 사용이 가능하다.

$(function(){

Var text = $("input[type=text]:eq(1)").val();

=> value이기 때문에 위에서 처럼 html을 주는게 아닌 val을 준다.

Console.log(text);

})

총 정리

Var id = $("#idText").val(); => 아이디 값을 가져오는 것이다.

답 : 아이디입니다.

Var cls = $(".classText").val(); => 클래스 값을 가져오는 것이다.

답 : 클래스입니다.

Var name = $("input[name=nameText]").val(); => name 값을 가져오는 것이다.

답 : 네임입니다.

Var radioCheck = $("input[name=chechedRadio]:cheched").val();

=> checked속성을 가지고 있는 라디오 값을 가져오겠다는 것이다.

답 : 라디오2

Var eqRadio = $("input[name=checkedRadio]:eq(2)").val();

또는$("input[name=checkedRadio]").eq(2).val(); 함수로 주어도 같은 방식이다.

=> name이 checkedRadio 중에 eq(2) 즉 3번째 값을 가져온다.

답 : 라디오3

확인 방법은

Console.log(값); 즉

Console.log(id);

Console.log(cls);

Console.log(name);

Console.log(radioCheck);

Console.log(eqRadio);

이렇게 주면 답과 같이 답이 나오게 된다.

스타일 제어하기

$(function(){

//css() 함수를 이용하여 스타일 제어하기

$("div:eq(0)").css("color","red");

=> 스타일 제어1 의 글자색이 빨간색으로 변하게 되고

html에서는 style="color:red"; 로 값이 들어가게 된다.

$("div:eq(0)").css("font-weight","bold");

=> 스타일 제어1 의 글자를 진하게 해주는 값이 적용된다.

위와 같은 방법으로는

$("div:eq(0)").attr("style","color:red; font-weight:bold;")

이렇게 주어도 위의 두가지가 같이 적용이 된다.

특정스타일을 바꿀때는 이렇게 사용하는게 편하고

소스가 많아 질 경우 정의하고 코딩하는 것이 편하다.

})

다른 방법으로는

.sample1{

Color:red;

Font-weight:bold;

}

.sample2{

Color:green;

Font-weight:bold;

}

</style>

$(function(){

클래스명을 지정된 셀럭터에 추가한다.

AddClass()

$("#sampleDiv1").addClass("sample1");

=> sampleDiv1이라는 아이디로 부터 sample1이라는 클래스를 추가한다라는 의미

없는 클래스를 추가하기 위해서 사용되는 것이다.

클래스명을 지정된 셀렉터로부터 지운다.

RemoveClass()

$("#sampleDiv2").removeClass("sample2");

=> sampleDiv2라는 아디이의 sample2라는 클래스를 제거 한다는 의미

클래스명이 지정된 셀럭터로부터 존하는지 여부를 판단한다.(true/false)

HasClass()

Var flag = $("#sampleDiv1").hasClass("sample1");

=> 내가 선택한 영역에 내가 지정한 클래스 명이 존재하는 지 판단하는 것

Console.log("클래스존재여부",flag);

위의 내용을 if문으로 응용을 한다면

If( $("#sampleDiv1").hasClass("sample1")){

$("#sampleDive1").removeClass("sample1");

}else {

$("#sampleDiv1").addClass("sample2");

}

=> sampleDiv1 아이디에 sample1 클래스가 있다면 sample1클래스가 지워질

것이고 없다면 sample2 클래스가 추가되는 조건식이다.

})

정리

트레벌징 이라는 함수에 대해 설명

내가 찾고자하는 테이블을 찾는 기능을 말한다.

$(function(){

Parent(), find(), prev(), next() 4가지의 대표적인것이 있다.

자식값들을 찾고자 할때 = find()

Var txt = $("table").find("#txt").val();

동일한 방법으로는

Var txt = $("table").find("tr:eq(0)").val();

Console.log("txt",txt);

=> table의 기준으로 그안의 아이디 값이 txt인 것을 찾는다.

부모 값들을 찾고자 할때 = parent()

Var html = $("#txt").parent().next().html()

Console.log(html);

=> 아이디가 txt인 태그의 상위 td에서 바로 직후의 값들을 뽑아내는 것이다.

즉 텍스트값1 부터 텍스트값4까지 출력이 된다.

여기서 두번째 값을 찾으려고 하면

Var html = $("#txt").parent().next().html().find(".txt:eq(1)").val();

=> class가 txt인 곳의 두번째 값 즉 텍스트값2 를 찾아내는것이다.

Var txt = $(".txt:eq(2)").prev().val();

=> class가 txt인 곳의 3번째 값의 바로 직전 값을 찾겠다는 것이다.

즉 텍스트값2 가 나온다.

Var txt = $(".txt:eq(2)").next().val();

=> class가 txt인 곳의 3번째 값의 바로 직후의 값을 찾겠다는 것이다.

즉 텍스트값4가 나온다.

Prev().prev() 를 두번 쓰면 그위로위로 값을 찾아오게 된다.

Var radioValue = $("#txt"),parent().parent().next().find("input[name=rdo]:checked").val();

Console.log(radioValue);

=> id가 txt인것부터 위로 부모 부모 즉 tr의 직후인 다음 tr에서 찾는데

input값이 rdo인 값에서 checked로 되어있는 값을 찾아내는 것이다.

또는 parent(). Parent(). Parent()를 세번써서 table까지 올라가서 거기서

Find() 하여서 값을 찾아가도 되는 방법이다.

})

<table>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

</td>

</tr>

반복문 each문에 대해 설명

$(function(){

각각의 값을 뽑아낼때는

$("input[type=text]:eq(0)").val();

$("input[type=text]:eq(1)").val();

$("input[type=text]:eq(2)").val();

$("input[type=text]:eq(3)").val();

이렇게 각각의 값을 적어서 뽑아낸다.

그래서 쉽게 반복문을 사용하게 되는데

$("div").each(function(index){

Var txt = $("div").eq(index).find("input[type=text]").val();

다른방식으로는

Var txt = $(this)

$(this) = $("div").eq(index) 와 같은 의미를 가지고 있다.

즉

Var txt = $(this).find("input[type=text]").val();

이렇게 사용 할 수가 있다.

$(this) 는 div 영역을 가리키고 있는 것이다.

Console.log(txt);

$(this)가 제대로 가리키는지 확인을 하기 위해서는

Console.log($(this).html());

이렇게 html로 출력하여 확인할 수 있다.

만약 내가 두번째 값까지 출력하고 싶을때는

If(index == 1) { // 0이 첫번째이니까 두번째는 1까지 적어야 된다.

Return false; //return true or return 이라고 줄 경우 모두 출력한다.

}

위와 같이 반복문을 적어준다.

동적 태그

Var textTag = "<input type='' value='임시값입니다.' />";

$(this).append(textTag);

각각 영역에 맨 하위단에 임시값입니다 라고 추가가 된다.

});

})

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

정리

여러개의 동일한 셀럭터일 경우 each 문을 쓴다.

기본적인 구조

$("셀렉터").each(function(index){

$(this).추가함수를 붙여서 사용하면 됨.

});

마우스 + 키보드 이벤트 함수 사용하기

Click, dbclick, keydown, keypress, keyup, on

클릭 이벤트

Input type="button" value="클릭"

이렇게 사용을 했었다.

$(function(){

$("#alertButton").click(function(){

Alert("클릭!")

})

예제

$(function(){

검색버튼을 클릭시, select 태그의 값 _ text태그의 값을 console. Log 출력해보아라

$("#searchButton").click(function(){

Var searchKey = $("#searchKey").val();

Var searchValue = $("#searchValue").val();

Console.log("searchKey",searchKey);

Console.log("searchValue",searchValue);

})

SearchValue 태그에 엔터 입력 시, select 태그의 값 + text 태그의 값을

Console.log 출력해보아라

키보드 관련 되서 사용되는 것

$("#searchVaule").keypress(function(event){

//keyCode =13 (엔터)

If(event.keyCode == 13) {

Var searchKey = $("#searchKey").val();

Var searchValue = $("#searchValue").val();

Console.log("searchKey",searchKey);

Console.log("searchValue",searchValue);

}

})

dbclick은 빠르게 두번 클릭을 해야지 결과값이 뜬다.

1번에 click부분에 넣어서 사용하면 된다.

})

</select>

클릭이벤트는 꼭 버튼에만 적용되는것이 아니다.

$("#ptag").click(function(){

Alert("클릭했습니다.");

})

<p id="ptag"> 클릭해보세요 </p>

이렇게 하여도 클릭해보세요라는 글에 클릭을 하면 alert창이 뜬다.

$("#addButton").click(function(){ //id가 addButton일때 클릭을 했을시 하는 행동

Var textTag = " <input type='text' value = '임시로 추가된 값입니다.' />"; //추가할 내용을 적어준다.

$("#addLayer").append(textTag); //addLayer안에 append(자식에게 추가)한다는 것

})

<div>

</div>

</div>

이전,이후 추가하기

// 이전 추가 버튼 클릭시 addLayer 직전에 html삽입

Var textTag = "<h2>임시로 추가된 h2태그 입니다.</h2>";

$("#beforeAddButton").click(function(){

$("#addLayer").before(textTag);

})

// 이후 추가 버튼 클릭시 addLayer 직후에 html삽입

$("#afterAddButton").click(function(){

$("#addLayer").after(textTag);

})

<div>

</div>

</div>

버튼을 추가하는 버튼과 alert창을 띄우는 버튼

하지만 추가한 버튼은 동적이기 때문에 첫번째 alert창을 띄우는 버튼만

alert이 뜨고 그다음에 추가되는 버튼들은 alert창이 뜨지 않는다.

//추가 버튼을 클릭하면 클릭이라는 버튼이 생성됨

$("#addButton").click(function(){

Var tag = '<input type="button" class="alertBoutton" value="클릭">';

$("#addLayer").append(textTag);

});

// 클릭이라는 버튼을 클릭하면 alert창이 뜸 대신 추가된 클릭버튼은 적용이 안됨

$(".alertButton").click(function(){

Alert("클릭");

})

//on 이벤트를 사용하면 추가된 클릭 버튼을 클릭하여도 alert창이 생성이 된다.

$(document).on("이벤트","셀렉터",function(){ })

이렇게 사용된다 즉

$(document).on("click",".alertButton",function(){

Alert("클릭");

})

</div>

Ajaxs로 받을 수 있는 데이터 타입 html인 방식에 대해 강의

목록조회 데이터 처리(서버페이지) => 리스트페이지 =>

등록페이지 => DB에 데이터 등록(서버페이지) =>

목록조회 데이터 처리

이렇게 순환한다.

$(function(){

$("#submitButton").click(function(){

Document.getElementById("frm").submit(); // 자바스크립
$("#frm").submit(); // jquery

})

</form>

위 방법이 기본방식

이제 ajax방법

$(function(){

//form action = url (호출하고자 하는 url)

//type = method

//form은 알아서 input 태그들을 전송하지만 ajax는 data을 주어야 한다.

$.ajax({

Url : '/list_ajax.jsp',

Type : 'GET',

DataType : 'html ',

Success : function(data=파라미터라 변수를 아무렇게 주어도 됨){ //결과는 페이지를 통째로 가져오는 역할을 하는 부분이다.

//html 텍스트 태그

Console.log(data); //data가 html인걸 볼수있다.

즉 이렇게 출력하면된다.

$("table").html(data);

}

});

$("#submitButton").click(function(){

$.ajax({ //댓글이나 쉽게 말해 페이스북같은 화면이 ajax이다.

Url : '/insert_ajax.jsp',

Type : 'post',

DataType : 'html ',

// 파라미터 부분 추가됨 내가 보내고자하는 파라미터 값을 줄때는 data

//입력을 각각 파라미터를 주는법

Data : { content : $("input[name=content]").val()},

//여러개의 form이 있을때 한번에 주는 방법

Data : $("form").serialize(),

Success : function(data){

$("table").html(data);

}

});

})

});

</form>

form은 insert페이지 갔다가 list페이지로 오는 형식이지만

가지고 오려는 태그만 ajax통으로 넣어놓고 불러오기만 하면 된다.

jason에 대해서 알아보는 강의

{

}

[

]

jason은 두가지 가로로 표현을 한다.

{

"title" : "안녕하세요" //키안에 들어가있는 변수값을 표현하는 것

키 : 변수

"subject" : "반갑습니다"

단일건의 값은 이렇게 뽑을 수가 있다.

"list" : [{

"subject" : "제목입니다1"

"content" : "내용입니다1"

},{

"subject" : "제목입니다2"

"content" : "내용입니다2"

},{

"subject" : "제목입니다3"

"content" : "내용입니다3"

}]

//배열일 때 나타내는 방법 [이거 안에 여러개의 { 이것을 사용으로 여러개의 키 값을 넣을 수 있다.

}

예제

$(function(){

});

<div id="titleLayer"><h2>안녕하세요</h2> </div>

<div id="subjectLayer"><h1>반갑습니다.</h1> </div>

<tr>

<td>제목입니다1</td>

<td>내용입니다1</td>

</tr>

<tr>

<td>제목입니다2</td>

<td>내용입니다2</td>

</tr>

<tr>

<td>제목입니다3</td>

<td>내용입니다3</td>

</tr>

이렇게 만드는 것을 코딩을 이용하여 내용을 가져오는 것을 하겠다.

jason방식은 동일한 데이터를 웹이나 앱이나 api방식으로 내려줄때 사용한다.

$(function(){

$("#loadButton").click(function(){

#.ajax({

Url : "/dummy.json",

Type : 'GET',

DataType : "json",

Success : function(data){

//콘솔 확인 방법

Console.log(data.title);

Console.log(data.subject);

Console.log(data.list);

// data안에있는 변수를 출력하는 방법이다.

$("#titleLayer").html("<h2>" + data.title + "</h2>");

$("#subjectLayer").html("<h1>" + data.subject + "</h1>");

//각각의 변수값들을 출력하는 것

배열

Var list = data.list;

Var tableTag = "";

For(var i = 0 ; i<list.lenght; i++) {

TableTag += "<tr><td>" + list[i].subject + "</td><td>" +

List[i].content + "</td></tr>"; //변수에 문자열을 답고

}

$("table").html(tableTag); // 담은 변수를 통째로 set한다.

//jquery의 반복문

$.each(list,function(index,data){

TableTag += "<tr><td>" +data.subject + "</td><td>" +

data.content + "</td></tr>";

})

}

})

});

Jsonp - get방식( 해당 데이터를 가져올 수 있다.) = 조회용 / 대신 다른 도메인쪽에서 jsonp 통신형식에

맞춰서 json 데이터를 낼 줄때만 가능하다.

Cors - 서버에서 설정을 해줘야 접근이 가능 하다. Get, post 방식으로 값을 전송한다.

Show/hide 함수에 대해 설명

$(function(){

$("showButton").click(function(){

//css에서 display:block;과 같은 기능

$("#showhide").show();

$("#showhide").fadeIn(); //스무스하게 나타나고 스무스하게 사라진다.

$("#showhide").slideDown({

Duration : 100 // 시간을 옵션으로 줘서 속도를 나타내준다

}); //스르륵 내려갔다가 올라오는 기능

});

$("hideButton").click(function(){

//display:none;과 같은 기능

$("#showhide").hide();

$("#showhide").fadeOut();

$("#showhide").slideUp();

});

})

안녕하십니까 jquery 강의입니다.<br>

</div>

Trim 공백제거

$(function(){

$("#trimButton").click(function(){

Var txt = $("#trimText").val();

Txt = $.trim(txt);

// Console.log("("+txt+")");

$("#trimText").val();

// 양 옆의 공백만 제거 될뿐 중간 공백은 제거가 안된다.

});

})

Remove / empty 함수

$(function(){

$("#button").click(function(){

// 영역 비우기 = empty()

$("#showhide").empty(); //안에 있는 모든 값들이 지워진다.

//레이어 삭제 함수

$("#showhide").remove(); // 영역을 삭제하여 console에서 삭제가 된다.

});

})

안녕하십니까 jquery 강의입니다.<br>

</div>

두개를 삭제할 때는

$(function(){

$("#button").click(function(){

$(".btn").click(function(){

$(this).parent().remove();

});

})

안녕하십니까 jquery 강의입니다.<br>

</div>

안녕하십니까 jquery 강의입니다.<br>

</div>

index값 찾기

$(function(){

$(".btn").click(function(){

Var index = $(".btn").index(this);

Console.log("index",index);

각 버튼을 누르면 해당되는 index의 레이어를 출력시켜라.

단, 다른영역들은 닫혀야하고 클릭된 영역만 보여주어야 한다.

$(".layer").hide(); //먼저 하이드를 주고 그다음에 누르는 버튼값을 나오게 출력하고 다시

버튼을 누르면 다시 하이드가 되고 버튼 출력값이 나오게 된다.

$(".layer").eq(index).show(); //버튼을 누르는데로 계속 추가되면서 나온다. 그래서 이전에

Hide 함수를 먼저 준다.

});

})

레이어 1입니다.<br>

</div>

레이어 2입니다.<br>

</div>

레이어 3입니다.<br>

</div>

Ajax 파일업로드 알아보기

제이쿼리 플러그인

해외 국내 등 배포한 파일을 플러그인 이라고 한다.

존재하고 있는 플러그인을 가져다가 쓰는 것을 사용 방법 등을 강의

$function(){

//전송 버튼을 클릭하면 입력한 값이 전송되는 것을 작성

$("#sendButton").click(function(){

$("#frm").sumbit();

})

//action 값이 뜨면 전송이 된것이 확인이 되는것

//getFileName.jsp에 전송가능하게 코딩을 해놓은 파일이다.

//별도의 내용

$("#sendButton").click(function(){

FormData(); //ajax fileupload 가능하다.

//대신 IE 6, 7, 8, 9 불가능

Var frm=$("#frm")[0];

//파라미터를 설정해야됨 0번째를 설정해줘야 한다.

Var formData=new formData(frm);

$.ajax({

Url : '/getFileName.jsp',

Type: 'POST',

ProcessData : false,

ContentType:false,

Data : fromData,

Succes : funtion(){

Alert("전송성공");

}

// 위의 모양이 보통 ajax 전송하는 코딩이다.

});

}

<form id="frm" action="/getFileName.jsp" method="post"

Enctype="multipart/form-data">

</form>

// 하위버전의 문제는 jquery.malsup.com

에서 모듈을 사용하면된다.

강의에서는 form모듈을 사용한다.

크롬에서는 다운이 안되기 때문에

url을 치고 익스에서 다운을 받아야한다.

플러그인들은 항상 jquery밑에 불러와야된다.

$function(){

$("#sendButton").click(function(){

$("#frm").ajaxForm({

BeforeSubmit : function(){

If($("#textName").val() == "") {

Alert("tesx값을 입력하세요");

Return false;

}

Return true;

//validation 체크를 여기서 한다.

Return false; //통과안됨

Return true; //전송이 됨.

Success : function(){

Alert("업로드 성공");

}

});

$("#frm").submit(); // submit을 안주면 반응을 볼수가 없다.

// 화면을 전환하지 않고 바로 볼수가 있다.

$("input[name=fileName]").change(function(){

//파일 전송을 하였을때 파일 변경이 있을때 반응을 볼수 있는것

})

파일업로드 > default form submit 이 있다.

페이지 전화이 되면서 다시 글쓰기 폼이나 목록폼으로 이동이 된다.

간혹하다 ajax로 파일업로드 기능을 넣어주세요. -요구사항이 존재하게됨

이럴때는 예를 들어서 IE 6,7,8,9를 배제하겠다 라고 가정할 경우

New FormData() 객체를 사용하면 된다.

IE 6,7,8,9도 지원할 경우

Jquery.form 플러그인을 이용하여 ajax 파일 업로드 기능을 구현할 수 있다.

하지만 ajax fileupload 관련 플러그인은 다양하다.

그중 선택하는 결정은 사용자 몫임.

Table dnd를 이용한 테이블정렬 순서 변경하기

구글에 table dnd라고 치면 관련된 플러그인이 나온다.

.blueStyle{

Background-color:blue;

Color:white;

}

$(function(){

$("table").tableDnD();

//1차적인 default 함수

//이렇게 실행하면 html에 십자가 표기사 테이블에 뜨는데

// 클릭하여 움직이면 td가 바뀐다.

//옵션

$("table").tableDnD({

OnDragClass : 'blueStyle' //마우스를 드레그할때 색이 변하는것

OnDragStart : function(table,row) {

Console.log("드래그 시작");

Console.log(table,row); //클릭시 어느부분에 대한 클릭인지 내용이 나온다.

OnDragStop : function(table,row) {

//Console.log("드래그 중지");

//tr은 순서가 바뀌지만 앞에 순서는 다시 재배열이되어서 돌아오는 코딩

$("table").find("tr").each(function(index,data){

$("this").find("td").eq(0).html(index+1)

Console.log(index,data);

})

}

});

})

<table>

<tr>

<td>첫번째 타이틀입니다.</td>

</tr>

<tr>

<td>첫번째 타이틀입니다.</td>

</tr>

<tr>

<td>첫번째 타이틀입니다.</td>

</tr>

<tr>

<td>첫번째 타이틀입니다.</td>

</tr>

</table>

// li로 지정된 화면이면 jquery ui에 sortable을 사용하면 되고

// table로 지정된 화면이면 jquery tableDnD를 사용하면됨

Jqgrid 소개 및 사용법

페이징이 기본적으로 지원이 되고 스크롤 페이징이 지원이 된다.

리스트 내에서 알아서 페이징 처리가 되고 서버내에 영역을 받아서

알아서 처리하는 것을 스크롤 페이징이라고 한다.

Jqgrid 플러그인의 데모를 사용하면된다.

Bootstrap, jqgrid 두개가 있다.

연동 방법은 다운로드 페이지에서 다운을 하고

압축을 푼다음 4개 폴더를 프로젝트 내에 복사 붙인다.

이어서 bootstrap 홈페이지에 들어가서 다운을 받는다.

압축을 풀고 3개의 디렉토리를 프로젝트내에 폴더를 만들고

복사 붙여넣어준다.

가장 쉬운방법은 데모 홈페이지에서

css부분을 긁어서 붙이고

테이블 태그랑 div태그를 붙여서 바디에 붙여준다.

jqgrid도 붙여서 넣어준다.

그리고 각각의 css경로를 위에 붙여넣은 경로로 바꿔준다.

$(function(){

$("#jqgrid").jqgrid({

Url :

Mtype :

StyleUI :

Datatype :

ColModel : [

Label//컬럼명을 뜻함 :

]

Viewrecords : true

Height :

RoeNum :

Pager :

})

JqPlot 소개 및 샘플을 이용한 빠른 개발하기

차트 플러그인에 대한 소개

Jqplot 다운로드에서 최신 버전을 다운 받는다.

압축을 풀어주고 인클루드 해준다.

참고는 docs에 들어가서 include파일을 복사하여

html에 파일을 만들고 타이틀 밑에 넣어주고

경로를 맞춰 준다.

샘플을 이용하여 작업을 해본다.

Creat plot에 올라온 소스를 가지고 사용하여 준다.

#(function(){

$.jqplot('chartlayer', [[1,2],[3.12],[5,13.1]]);

})

jqplot에서 첫번째는 chart에 id값이다.

예제를 이용할때 앞에 나오는 값을 id로 생각하고 주면된다.

JsTree를 이용한 tree 만들기

jsTree에 들어가서 플러그인을 다운 받는다.

overView를 들어가서 예제를 사용해 본다.

다운받은 것을 압축 풀고 필요한 부분을 인클루드해 준다.

예제의 div를 그대로 긁어가져와 준다.

셀렉터를 가져와서 붙여준다.

명령어 하나로 ul li li가 jstree 구조로 생성되는 것이 보여진다.

ul구조에서 li별로 구성이 되는 것을 볼수가 있다.

샘플코드를 만져보면서 분석을 해야된다.

다운받은 파일에 데모나 샘플을 이용하여 확인해 준다.

홈페이지의 예제를 보면서 각 속성을 주는 것을 봐준다.

그걸 이용하여 열려있는 상태로 보이던가 아니면 클릭시 열리는 그러한

속성을 줄 수 가 있다.

json으로 트리구조 만드는 법

또한 홈페이지의 json방법을 가져와서 넣어준다.

$('#jstree').jstee({

//json형식으로 줘도 들어간다.

Core : {

Data : [

{

Text : 'simple root node'

{

Text : 'root node 2',

Children : [{

Text : 'child1'

{

Text: 'child2'

}]

}

]

Plugins : ["checkbox"],

Chechbox : {

Keep_selected_style : flase

}

})

배열 형태로 tree구조로 들어가는 것도 볼 수가 있다.

그리고 플러그인을 홈페이지에서 확인하여 그대로 복사하여 사용 할 수도 있다.

저작자표시 (새창열림)