'JavaScript > jQuery' 카테고리의 다른 글
| jQuery Carousel - modular (2) | 2012.11.27 |
|---|---|
| has(), is() (0) | 2012.07.22 |
| jQuery 플러그인과 그 메서드들을 만들기 위한 기본구조.. (0) | 2012.01.01 |
| jQuery 플러그인들 수집 (0) | 2011.12.28 |
| jQuery Template (0) | 2011.12.27 |
| jQuery() 함수 인자들 정리 (0) | 2011.11.07 |
'JavaScript/jQuery'에 해당되는 글 7건
- 2012.11.27 Mouse Wheel
- 2012.11.27 jQuery Carousel - modular 2
- 2012.07.22 has(), is()
- 2012.01.01 jQuery 플러그인과 그 메서드들을 만들기 위한 기본구조..
- 2011.12.28 jQuery 플러그인들 수집
- 2011.12.27 jQuery Template
- 2011.11.07 jQuery() 함수 인자들 정리
http://www.gougouzian.fr/projects/jquery/moodular/
moodular_carousel.html<ul id="demo">
<li>
<img src="img/photo01.jpg" />
</li>
<li>
<img src="img/photo02.jpg" />
</li>
<li>
<img src="img/photo03.jpg" />
</li>
<li>
<img src="img/photo04.jpg" />
</li>
<li>
<img src="img/photo05.jpg" />
</li>
<li>
<img src="img/photo06.jpg" />
</li>
</ul>
The CSS is :
#demo, #demo li { margin:0; padding:0; width:900px; height:495px; list-style:none; }
#demo { overflow: hidden; }
#demo li { float:left; }
The JavaScript is :
jQuery('#demo').moodular({
effects: 'left',
controls: '',
auto: true,
easing: '',
speed: 1000,
dispTimeout: 3000
});
'JavaScript > jQuery' 카테고리의 다른 글
| Mouse Wheel (0) | 2012.11.27 |
|---|---|
| has(), is() (0) | 2012.07.22 |
| jQuery 플러그인과 그 메서드들을 만들기 위한 기본구조.. (0) | 2012.01.01 |
| jQuery 플러그인들 수집 (0) | 2011.12.28 |
| jQuery Template (0) | 2011.12.27 |
| jQuery() 함수 인자들 정리 (0) | 2011.11.07 |
.has(selector)
자식요소로 selector를 가진 것들로 선택범위 축소
ex) $('.title').has($(this))
http://api.jquery.com/has/
.is(selector)
선택요소의 성질이 맞는지 boolean 리턴
ex) $('#container').is(':visible')
http://api.jquery.com/is/
'JavaScript > jQuery' 카테고리의 다른 글
| Mouse Wheel (0) | 2012.11.27 |
|---|---|
| jQuery Carousel - modular (2) | 2012.11.27 |
| jQuery 플러그인과 그 메서드들을 만들기 위한 기본구조.. (0) | 2012.01.01 |
| jQuery 플러그인들 수집 (0) | 2011.12.28 |
| jQuery Template (0) | 2011.12.27 |
| jQuery() 함수 인자들 정리 (0) | 2011.11.07 |
그냥 내 마음대로 만들어본거다. $('#id')처럼대상객체가 하나라면 상관없겠지만 $('.class')처럼 여러개라면 내부에서 적당히 루프를 돌려줘야하고 그 각각의 레퍼런스를 유지하는것도 꽤나 성가시다.
일단 이렇게 기본을 시작해보자.
분명히 다듬어야 할 부분이 많이 생길꺼다.. -_-; 적어도 다음 코드만 봤을때는 의도대로 동작이 되는구나..
일단 이렇게 기본을 시작해보자.
분명히 다듬어야 할 부분이 많이 생길꺼다.. -_-; 적어도 다음 코드만 봤을때는 의도대로 동작이 되는구나..
<div class="test" id="XX"></div>
<div class="test" id="YY"></div>
<script>
$.fn.plug = function(){
var o = this;
o.html("AA");
o.aa = function(){
alert(o===this); // true
o.each(function(i, k){
$(k).html(i+"th : "+k.id);
});
}
return o;
}
var x = $('.test').plug();
</script>
<input type="button" onclick="x.aa()">
'JavaScript > jQuery' 카테고리의 다른 글
| Mouse Wheel (0) | 2012.11.27 |
|---|---|
| jQuery Carousel - modular (2) | 2012.11.27 |
| has(), is() (0) | 2012.07.22 |
| jQuery 플러그인들 수집 (0) | 2011.12.28 |
| jQuery Template (0) | 2011.12.27 |
| jQuery() 함수 인자들 정리 (0) | 2011.11.07 |
'JavaScript > jQuery' 카테고리의 다른 글
| Mouse Wheel (0) | 2012.11.27 |
|---|---|
| jQuery Carousel - modular (2) | 2012.11.27 |
| has(), is() (0) | 2012.07.22 |
| jQuery 플러그인과 그 메서드들을 만들기 위한 기본구조.. (0) | 2012.01.01 |
| jQuery Template (0) | 2011.12.27 |
| jQuery() 함수 인자들 정리 (0) | 2011.11.07 |
http://api.jquery.com/category/plugins/templates/
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
<script id="movieTemplate" type="text/x-jquery-tmpl">
<li>
Title: ${Name} ${index}
{{each Languages}}
${$index + 1}: <em>${$value}. </em>
{{/each}}
</li>
</script>
<ul id="movieList"></ul>
<script>
var movies = [
{ Name: "Meet Joe Black", Languages: ["French"] },
{ Name: "The Mighty", Languages: [] },
{ Name: "City Hunter", Languages: ["Mandarin", "Cantonese"] }
];
/* Render the template with the movies data */
$( "#movieTemplate" ).tmpl( movies )
.appendTo( "#movieList" );
</script>
</body>
</html>
'JavaScript > jQuery' 카테고리의 다른 글
| Mouse Wheel (0) | 2012.11.27 |
|---|---|
| jQuery Carousel - modular (2) | 2012.11.27 |
| has(), is() (0) | 2012.07.22 |
| jQuery 플러그인과 그 메서드들을 만들기 위한 기본구조.. (0) | 2012.01.01 |
| jQuery 플러그인들 수집 (0) | 2011.12.28 |
| jQuery() 함수 인자들 정리 (0) | 2011.11.07 |
사실 그냥 쓰고는 있는데, 생각보다 꽤 여러가지가 있어서 한번 정리해둘 필요가 있겠당..
http://api.jquery.com/jQuery/
1. $(셀렉터, 컨텍스트)
- $('p'); // p요소들 선택
2. DOM 엘리먼트(XML 포함)
$(document.form)
$.post('url.xml', function(data) {
http://api.jquery.com/jQuery/
1. $(셀렉터, 컨텍스트)
- $('p'); // p요소들 선택
2. DOM 엘리먼트(XML 포함)
$(document.form)
var $child = $(data).find('child');
})
3. jQuery 객체
dom_obj = document.form[0];
$source = $(dom_obj);
$clone = $($source);
객체를 복사한다. 이때 처음의 객체(dom_obj) 레퍼런스는 유지된다.
4. 텅빈 값
o = $();
하면 그냥 텅빈 jQuery 객체 리턴. length 값은 0으로 ..
5. 일반 객체
$('<a/>');
$('<input />', { type: 'text', name: 'test' })
7. $(callBack함수)
DOM의 로딩이 완료되었을때 실행되는 함수
3. jQuery 객체
dom_obj = document.form[0];
$source = $(dom_obj);
$clone = $($source);
객체를 복사한다. 이때 처음의 객체(dom_obj) 레퍼런스는 유지된다.
4. 텅빈 값
o = $();
하면 그냥 텅빈 jQuery 객체 리턴. length 값은 0으로 ..
5. 일반 객체
var foo = {foo:'bar', hello:'world'};
var $foo = $(foo);
$foo.prop('foo'); // bar
$foo.prop('foo', 'foobar');
var test2 = $foo.prop('foo'); // foobar
============================
6. $(html 문자, [프로퍼티 정의객체])============================
$('<a/>');
$('<a href="http://jquery.com"></a>');
el = $('1<br/>2<br/>3'); // returns [<br>, "2", <br>]
$('<input />', { type: 'text', name: 'test' })
7. $(callBack함수)
DOM의 로딩이 완료되었을때 실행되는 함수
$(function(){
// Document is ready
});
'JavaScript > jQuery' 카테고리의 다른 글
| Mouse Wheel (0) | 2012.11.27 |
|---|---|
| jQuery Carousel - modular (2) | 2012.11.27 |
| has(), is() (0) | 2012.07.22 |
| jQuery 플러그인과 그 메서드들을 만들기 위한 기본구조.. (0) | 2012.01.01 |
| jQuery 플러그인들 수집 (0) | 2011.12.28 |
| jQuery Template (0) | 2011.12.27 |
