블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday

달력

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

공지사항

최근에 올라온 글

'jquery'에 해당되는 글 2건

  1. 2010.05.22 [Jquery] 선택자를 활용 - 스타일 변경2
  2. 2010.03.31 [ JQuery ] 스타일 변경하기

[Jquery] 선택자를 활용 - 스타일 변경2

프로그래밍/04.HTML&Script / 2010. 5. 22. 18:22






제이쿼리를 활용하여 해당객체에 접근하는 방법에 대해 알아 보겠다. 아래 예제는 간단하게 원하는 객체를 찾아서 스타일을 변경하는 예제이다. 

Html

<ul id="selected_plays">

        <li>컴퓨터

            <ul>

                <li><a href="http://shopping.naver.com/spcategory/notebook.nhn">노트북</a></li>

                <li>넷북</li>

                <li>데스크탑</li>

            </ul>

        </li>

        <li>의류

            <ul>

                <li><a href="http://shopping.naver.com/category/category.nhn?cat_id=0200">남성의류</a></li>

                <li>여성의류</li>

                <li>아동복</li>

                <li>잡화</li>

            </ul>

        </li>

        <li>전자제품

            <ul>

                <li>주방용품

                    <ul>

                        <li>전자렌지</li>

                        <li>전기밥솥</li>

                    </ul>

                </li>

                <li><a href="http://shopping.naver.com/category/category.nhn?cat_id=0000">생활용품</a></li>

                <li>차량용품</li>

            </ul>

        </li>

    </ul>

 위 HTML문서는 간단한 예제를 위한 내용이며, 위 문서를 눈으로 봐도 알수있듯이 중첩된 리스트에 수직으로 정렬이 되어 있음을 알 수 있을 것이다. 이를 수평정렬로 변경하려고 한다. 미리 작성한 마크업은 건드리지 않고 CSS와 제이쿼리를 이용해서 말이다.

Style(CSS)

.horizontal

{

      float:left;

      list-style:none;

      margin:10px;

}

 

위 코드는 CSS코드이며, HTML문서 내용을 수평으로 만들어줄 코드이다.

 

Script

<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('#selected_plays > li').addClass('horizontal');

        });

    </script>

 위는 코드는 제이쿼리를 이용해서 스타일을 입히는 코드이다. 위 코드를 간단히 설명하면 $()함수 안에 있는 선택자가 의미하는 것은 selected_plays를 ID값으로 가지는 요소의 자식(> - 자식 콤비네이터) 중에서 리스트 항목(li) 찾아서, “horizontal”스타일을 입히라는 것이다.

(아래 실행 모습참고)

 

[그림1 – 실행 보습]

 그럼 horizontal스타일이 적용이 안된 나머지 객체들에 다른 스타일을 입혀보도록 하자.

Script

$('#selected_plays li:not(.horizontal)').addClass('sub-level');

위 코드는 selected_plays ID를 가지고 있는 요소의 자식이며, horizontal 클래스를 가지고 있지 않은 항목(:not(.horizontal))를 찾아 해당 스타일 클래스를 적용하라는 내용이다.

 

저작자표시 비영리 변경금지
Posted by happydong
, |

[ JQuery ] 스타일 변경하기

프로그래밍/04.HTML&Script / 2010. 3. 31. 12:19






 제이쿼리(JQuery)에서는 간단하게 HTML객체의 스타일(Style)속성을 추가, 삭제가 손쉽게 가능해 정말 편한 것 같다. 이는 제이쿼리에서 제공하는 addClass함수와 removeClass함수를 이용하면 되는데, 이를 간단하게 아래예제를 통해서 알아 보도록 하자!

먼저, 실행되는 결과 모습을 보자면, 아래 그림과 같다.

사용자 삽입 이미지

 [그림1-1 스타일 추가]


사용자 삽입 이미지

[그림1-2 스타일 삭제]
(예제 소스 참고: jQuery 1.3 (위키북스) 책 참고)

 위 그림과 같이 기본 스타일에 스타일 적용 버튼 클릭(또는 페이지로드) 이벤트시 주요 내용에 하이라이트(highlight) 영역으로 변경되도록 한것이다. 이는 CSS 스타일을 변경한 것인데... CSS는 아래와 같다.

alice.css

body

{

    font: 62.5% Arial, Verdana, sans-serif;

} 

 ... 중간 생략 ...

/* 하이라이트 스타일 */

.highlight

{

    font-style: italic;

    border: 1px solid #888;

    padding: 0.5em;

    margin: 0.5em 0;

    background-color: #ffc;

}


 위 코드는 하이라이트 스타일을 정의한 부분이다. 차후에 버튼을 클릭하거나, 페이지로드 이벤트시 바로 이 스타일을 적용할것이다. (기본은 적용이 안되있음.)


alice.js

/* 페이지 로드시...*/

$(document).ready(function() {

    AddStyle();

});

 

/* 스타일 삭제*/

function RemoveStyle() {

    $('.poem-stanza').removeClass('highlight');

}

 

/* 스타일 추가*/

function AddStyle() {

    $('.poem-stanza').addClass('highlight');

}


 위 코드는 스크립트를 정의한 내용이다. 주석을 통해서 간단하게 설명을 달아 놨으니, 이해하는데 도움이 될것이라 생각이 든다. ".poem-stanza"는 스타일을 지정한 class명이다. 즉, ".poem-stanza"을 찾아서 addClass함수, 또는 removeClass함수를 통해 해당 "highlight"스타일로  추가/삭제하는 내용인것이다. 아래 HTML 페이지를 참고하면 이해가 쉽지 않을까 생각이 든다.


HTML

<div>

 …중간 생략…

 

<div class="poem">

            <h3 class="poem-title">

                JABBERWOCKY</h3>

            <div class="poem-stanza">

                <div>

                    'Twas brillig, and the slithy toves</div>

                <div>

                    Did gyre and gimble in the wabe;</div>

                <div>

                    All mimsy were the borogoves,</div>

                <div>

                    And the mome raths outgrabe.</div>

            </div>

        </div>

    </div>

    <div style="margin:10px 0 0 0;">

    <input type="button" value="스타일 적용" onclick="AddStyle();" />

    <input type="button" value="스타일 삭제" onclick="RemoveStyle();" />


위 코드를 보면 버튼이 두개가 있고, 버튼을 클릭했을 때 해당 스크립트를 호출할수 있도록 되어있다. 그리고 하이라이트가 되어저야 할부분에 DIV태그로 감싸져있고, class명으로 "poem-stanza"로 선업되어 있다. 위에서도 설명했듯 버튼을 클릭하는 순간 해당 "poem-stanza"를 찾아 스타일을 추가/삭제하는 것이다.

기존에는 스타일을 적용하려면 여러가지로 귀찮게 스크립트를 짜주어야 했는데, 제이쿼리를 이용하니 간단하게 해결되어 편한것 같다.
Posted by happydong
, |

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

티스토리툴바