jQuery UI - 요소를 끌어서놓기

.NET프로그래밍/jQuery 1.3.2 2009. 11. 17. 13:35 |



[Droppable.htm]

 

<!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>

    <title>요소를 끌어서놓기</title>

    <style type="text/css">

        .opa { opacity:1.0; }

    </style>

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script src="../js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('img').draggable({ opacity:"0.3" }); // 끄는 동안만 불투명도 주기

            $('div').droppable({

                accept: "img",    // 드롭시킬 대상 요소   

                drop: function (event, ui) {

                    $(this).append("끌어서놓기 됨");

                }

            });

        });

    </script>

</head>

<body>

    <img src="../images/ue.png" />

    <div style="position:absolute;top:100px;left:150px;

        border:1px solid gray;width:160px;height:160px;

        text-align:center;"></div>

 

</body>

</html>

 

 


-------------------------------------------------------------------------------------

 


[실행결과]


* 참고 -> "Internet Explorer" 웹 브라우저에서만 "불투명도" 화면이 보인다.














 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

jQuery UI - 개체 선택(Selectable)  (0) 2009.11.17
jQuery UI - 개체 정렬(sortable)  (0) 2009.11.17
jQuery UI - 요소를 드래그하기(끌기)  (0) 2009.11.17
jQuery UI 다운로드 및 설치 그리고 활용  (0) 2009.11.17
Utilities - 문자열 매개변수를 쿼리스트링으로 변경  (0) 2009.11.17
Posted by holland14
:

jQuery UI - 요소를 드래그하기(끌기)

.NET프로그래밍/jQuery 1.3.2 2009. 11. 17. 13:17 |



[Draggable.htm]

 

<!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>

    <title>요소를 드래그하기(끌기)</title>

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script src="../js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            //$('img').draggable(); // 끌기 가능

            //$('img').draggable({axis:"x"}); // x좌표로만 이동

            $('img').draggable({ revert: true });

        });

    </script>

</head>

<body>

    <img src="../images/ue.png" />

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]

 

 

 

 

 


 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

jQuery UI - 개체 정렬(sortable)  (0) 2009.11.17
jQuery UI - 요소를 끌어서놓기  (0) 2009.11.17
jQuery UI 다운로드 및 설치 그리고 활용  (0) 2009.11.17
Utilities - 문자열 매개변수를 쿼리스트링으로 변경  (0) 2009.11.17
Utilities - $ 기호 사용금지 : 다른 라이브러리와 함께 사용  (0) 2009.11.17
Posted by holland14
:

jQuery UI 다운로드 및 설치 그리고 활용

.NET프로그래밍/jQuery 1.3.2 2009. 11. 17. 12:00 |



jQuery UI 다운로드 및 설치 그리고 활용


• http://jqueryui.com/ 
    – 최신 버전의 jQuery UI 관련 플러그인 다운로드

• 종류
    – Accordion
    – Draggable
    – Progressbar
    – Tabs
    – Datepicker
    – 등등…

•상당히 많은 유용한 UI 관련 컨트롤 제공





저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

jQuery UI - 요소를 끌어서놓기  (0) 2009.11.17
jQuery UI - 요소를 드래그하기(끌기)  (0) 2009.11.17
Utilities - 문자열 매개변수를 쿼리스트링으로 변경  (0) 2009.11.17
Utilities - $ 기호 사용금지 : 다른 라이브러리와 함께 사용  (0) 2009.11.17
Utilities - 양쪽 공백 제거 함수 : trim()  (0) 2009.11.17
Posted by holland14
:

Utilities - 문자열 매개변수를 쿼리스트링으로 변경

.NET프로그래밍/jQuery 1.3.2 2009. 11. 17. 11:19 |



[Param.htm.htm]

 

<!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>

    <title>문자열 매개변수를 쿼리스트링으로 변경</title>

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            var params = { dataType: "json", url: "a.aspx" };

            var str = $.param(params); // 맵/컬렉션 형태의 문자열 배열을 쿼리스트링(QueryString)으로 변경

            jQuery('#my').append(str); // dataType=json&url=a.aspx 로 변경됨

        });

    </script>

</head>

<body>

    <div id="my"></div>

</body>

</html>

 




-------------------------------------------------------------------------------------

 


[실행결과]



 

 

 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

jQuery UI - 요소를 드래그하기(끌기)  (0) 2009.11.17
jQuery UI 다운로드 및 설치 그리고 활용  (0) 2009.11.17
Utilities - $ 기호 사용금지 : 다른 라이브러리와 함께 사용  (0) 2009.11.17
Utilities - 양쪽 공백 제거 함수 : trim()  (0) 2009.11.17
Utilities - 브라우저 정보 얻기  (0) 2009.11.17
Posted by holland14
:

Utilities - $ 기호 사용금지 : 다른 라이브러리와 함께 사용

.NET프로그래밍/jQuery 1.3.2 2009. 11. 17. 10:07 |

 

$.noConflict()

 

• $.noConflict()

– 다른 라이브러리와 jQuery 사용시

• $대신 jQuery키워드 사용해야 함.

• 다른 라이브러리에게 $를 양보

 

 


 ------------------------------------------------------------------------------------




[NoConflict.htm]

  

<!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>

    <title>$ 기호 사용금지 : 다른 라이브러리와 함께 사용</title>

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        // 현재 페이지에서는 $대신에 jQuery를 사용

        // 다른 자바스크립트 라이브러리가 $를 사용하기에 양보

        $.noConflict();

        //        var $ = "메롱~"; // $를 재정의

        //        jQuery(document).ready(function() {

        //            alert($); // undefined (정의되지 않은) -> 메롱~

        //        });

 

        // 지금까지 만들어 놓은 기능은 $로 되있다면?

        jQuery(document).ready(function($) { // function에 매개변수로 $ 넣어줌

            // 여기에 있는 코드들은 기존 방식처럼 $를 쓰고 싶다면?

            alert($);

            $('#my').append("<h3>기존방식 사용</h3>");

            jQuery('#my').append("<h3>기존방식 사용</h3>");

        });

    </script>

</head>

<body>

    <div id="my"></div>

</body>

</html>

 


-------------------------------------------------------------------------------------

 


[실행결과]











 

 


저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

jQuery UI 다운로드 및 설치 그리고 활용  (0) 2009.11.17
Utilities - 문자열 매개변수를 쿼리스트링으로 변경  (0) 2009.11.17
Utilities - 양쪽 공백 제거 함수 : trim()  (0) 2009.11.17
Utilities - 브라우저 정보 얻기  (0) 2009.11.17
반복사용하는 ajax() 메서드의 주요 속성을 ajaxSetup()에서 설정  (0) 2009.11.17
Posted by holland14
:

Utilities - 양쪽 공백 제거 함수 : trim()

.NET프로그래밍/jQuery 1.3.2 2009. 11. 17. 10:07 |

 

[Trim.htm]

 

<!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>

    <title>양쪽 공백 제거 함수 : trim()</title>

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            var s = " Abc Def Fed Cba ";

            alert("[" + s + "]");

            alert(s.length);

            alert("[" + $.trim(s) + "]"); // 양쪽 공백 제거

            alert(jQuery.trim(s).length); // 17 - 2 = 15

        });

       

       

    </script>

</head>

<body>

 

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]




















 

 

 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Utilities - 문자열 매개변수를 쿼리스트링으로 변경  (0) 2009.11.17
Utilities - $ 기호 사용금지 : 다른 라이브러리와 함께 사용  (0) 2009.11.17
Utilities - 브라우저 정보 얻기  (0) 2009.11.17
반복사용하는 ajax() 메서드의 주요 속성을 ajaxSetup()에서 설정  (0) 2009.11.17
getJSON()을 대체하는 ajax() 메서드  (0) 2009.11.17
Posted by holland14
:

Utilities - 브라우저 정보 얻기

.NET프로그래밍/jQuery 1.3.2 2009. 11. 17. 10:07 |


 

$.browser

 

•현재사용자의브라우저정보제공

–version : 버전정보(렌더링 엔진 버전임)

–msie: IE 사용시true

–mozilla: Firefox

–safari

–opera

 




-------------------------------------------------------------------------------------


 

[Browser.htm]

 

<!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>

    <title>브라우저 정보 얻기</title>

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            var result = "";

 

            // $.browser의 모든 속성 출력

            jQuery.each(jQuery.browser, function(i, val) {

                result += i + ":" + val + "\n";

            });

 

            alert(result);

 

            // 브라우저 확인

            if ($.browser.msie) {

                alert("IE 웹 브라우저");

            }

            else {

                alert('다른 웹 브라우저');

            }

        });       

    </script>

</head>

<body>

 

</body>

</html>

 

 


-------------------------------------------------------------------------------------

 


[실행결과]



--> "Firefox"를 기본 웹 브라우저로 설정하였을 때













--> "Internet Explorer"를 기본 웹 브라우저로 설정하였을 때








 



저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Utilities - $ 기호 사용금지 : 다른 라이브러리와 함께 사용  (0) 2009.11.17
Utilities - 양쪽 공백 제거 함수 : trim()  (0) 2009.11.17
반복사용하는 ajax() 메서드의 주요 속성을 ajaxSetup()에서 설정  (0) 2009.11.17
getJSON()을 대체하는 ajax() 메서드  (0) 2009.11.17
getScript()메서드의 기능을 ajax()메서드로 대체  (0) 2009.11.17
Posted by holland14
:

반복사용하는 ajax() 메서드의 주요 속성을 ajaxSetup()에서 설정

.NET프로그래밍/jQuery 1.3.2 2009. 11. 17. 10:07 |

 

[jQuery.ajax.Setup.htm]



<!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>

    <title>반복사용하는 ajax() 메서드의 주요 속성을 ajaxSetup()에서 설정</title>

    <style type="text/css">

        .yellow { background-color:Yellow; }

        .silver { background-color:Silver; }

    </style>

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            // $.ajax()에서 반복 사용하는 속성을 상단에 설정 후 $.ajax에서 상속받아 사용

            $.ajaxSetup({

                url: "02.jQuery.getJSON.js", // a.aspx, a.php, a.jsp

                dataType: "json"

            });

            $.ajax({

                success: function(data) {

                    $.each(data, function() {

                        $('#tblList').append("<tr><td>" + this.Num + "</td><td>"

                            + this["Name"] + "</td></tr>");

                    });

                    $('table:first tr:odd').addClass('yellow');

                    $('table:first tr:even').addClass('silver');

                }

            });

            $.ajax({

                success: function(data) {

                    $.each(data, function() {

                        $('#tblList2').append("<tr><td>" + this.Num + "</td><td>"

                            + this["Name"] + "</td></tr>");

                    });

                    $('table:last tr:odd').addClass('yellow');

                    $('table:last tr:even').addClass('silver');

                }

            });

        });

    </script>

</head>

<body>

    <table id="tblList" border="1"></table>

    <table id="tblList2" border="1"></table>

</body>

</html>

 

 


-------------------------------------------------------------------------------------

 


[실행결과]





 

 

 


저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Utilities - 양쪽 공백 제거 함수 : trim()  (0) 2009.11.17
Utilities - 브라우저 정보 얻기  (0) 2009.11.17
getJSON()을 대체하는 ajax() 메서드  (0) 2009.11.17
getScript()메서드의 기능을 ajax()메서드로 대체  (0) 2009.11.17
$.ajaxSetup() 메서드 정의  (0) 2009.11.16
Posted by holland14
:

getJSON()을 대체하는 ajax() 메서드

.NET프로그래밍/jQuery 1.3.2 2009. 11. 17. 10:06 |

 

[jQuery.ajax.JSON.htm]

 

<!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>

    <title>getJSON()을 대체하는 ajax() 메서드</title>

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            // 동적으로 원격에 있는 JSON 파일(결과값)을 로드

            $.ajax({

                url: "02.jQuery.getJSON.js", // a.aspx, a.php, a.jsp

                dataType: "json",

                success: function (data) {

                    // 받아온 JSON을 테이블에 출력

                    $.each(data, function () {

                        $('#tblList').append(

                            "<tr><td>" + this.Num + "</td><td>"

                            + this["Name"] + "</td></tr>");

                    });

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

                        $('#tblList').append(

                            "<tr><td>" + entry.Num + "</td><td>"

                            + entry["Name"] + "</td></tr>");

                    });

                },

                error: function() { alert("에러발생"); }

            });

        });

    </script>

</head>

<body>

    <table id="tblList" border="1"></table>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]

 

 

 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Utilities - 브라우저 정보 얻기  (0) 2009.11.17
반복사용하는 ajax() 메서드의 주요 속성을 ajaxSetup()에서 설정  (0) 2009.11.17
getScript()메서드의 기능을 ajax()메서드로 대체  (0) 2009.11.17
$.ajaxSetup() 메서드 정의  (0) 2009.11.16
$.ajax()의 매개변수 형태  (0) 2009.11.13
Posted by holland14
:

getScript()메서드의 기능을 ajax()메서드로 대체

.NET프로그래밍/jQuery 1.3.2 2009. 11. 17. 10:06 |

 

[jQuery.ajax.js]

 

function MessageBox(string) {

    alert(string);

}

 


-------------------------------------------------------------------------------------

 


[jQuery.ajax.htm]

 

<!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>

    <title>getScript()메서드의 기능을 ajax()메서드로 대체</title>

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $.ajax({

                type: "get",

                url: "10.jQuery.ajax.js",

                dataType : "script",

                success : function (data) { MessageBox('안녕');},

                error : function (data) { alert('에러 발생') }

            });

        });

    </script>

</head>

<body>

 

</body>

</html>

 

 


-------------------------------------------------------------------------------------

 



[실행결과]


 

 

 
 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

반복사용하는 ajax() 메서드의 주요 속성을 ajaxSetup()에서 설정  (0) 2009.11.17
getJSON()을 대체하는 ajax() 메서드  (0) 2009.11.17
$.ajaxSetup() 메서드 정의  (0) 2009.11.16
$.ajax()의 매개변수 형태  (0) 2009.11.13
jQuery Ajax 관련 API  (0) 2009.11.13
Posted by holland14
:

티스토리툴바