Notice
Recent Posts
Recent Comments
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- rember me
- spring security
- Spring
- ibatis
- CEP
- JPA
- JBoss Seam
- custom filter
- GEventEvaluator
- COC
- drools
- jstl
- maven
- java tip
- Drools Fusion
- SVN
- jquery serialize
- @SqlResultSetMapping
- Hudson
- spring transaction
- querydsl
- spring jpa
- gwt-ext
- MySQL
- gwt
- bootstrap jquery datepicker
- jenkins
- jquery
- guvnor
- zabbix
Archives
- Today
- Total
봉 블로그
jQuery Dialog fade 효과 주기. 본문
이상하게 jquery ui 1.8.2 에서 dialog 의 fade 효과가 안된다.
http://dev.jqueryui.com/ticket/4416 에 의하면 1.7.2 에 이미 적용되었다고 나오는데, 왜 안되는지 모르겠다.
따라서 아래와 같이 작업해주면 fade 효과를 적용할수 있다. ^^
원본 : http://old.nabble.com/Dialog-Fade-effect-td22756114s27240.html
1. 아래 script 를 "effects.fade.js" 로 저장합니다.
------------------
/*
* jQuery UI fade effect, based on pulsate
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Depends:
* effects.core.js
*/
(function($) {
$.effects.fade = function(o) {
return this.queue(function() {
// Create element
var el = $(this);
// Set options
var speed = o.options.speed || 230;
var mode = o.options.mode || 'show'; // Set Mode
// Animate
if (mode == 'show') {
el.fadeIn(speed);
} else {
el.fadeOut(speed);
};
el.queue('fx', function() { el.dequeue(); });
el.dequeue();
});
};
})(jQuery);
2. header에 위에서 만든 스크립트 파일을 추가합니다.
<script type="text/javascript" src="js/effects.fade.js"></script>
3. 다음과 같이 사용하세요.
$("#thedialog").dialog({
show: 'fade',
hide: 'fade'
});
or
$("#thedialog").dialog({
show: {effect:'fade', speed: 800},
hide: {effect:'fade', speed: 800}
});
http://dev.jqueryui.com/ticket/4416 에 의하면 1.7.2 에 이미 적용되었다고 나오는데, 왜 안되는지 모르겠다.
따라서 아래와 같이 작업해주면 fade 효과를 적용할수 있다. ^^
원본 : http://old.nabble.com/Dialog-Fade-effect-td22756114s27240.html
1. 아래 script 를 "effects.fade.js" 로 저장합니다.
------------------
/*
* jQuery UI fade effect, based on pulsate
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Depends:
* effects.core.js
*/
(function($) {
$.effects.fade = function(o) {
return this.queue(function() {
// Create element
var el = $(this);
// Set options
var speed = o.options.speed || 230;
var mode = o.options.mode || 'show'; // Set Mode
// Animate
if (mode == 'show') {
el.fadeIn(speed);
} else {
el.fadeOut(speed);
};
el.queue('fx', function() { el.dequeue(); });
el.dequeue();
});
};
})(jQuery);
2. header에 위에서 만든 스크립트 파일을 추가합니다.
<script type="text/javascript" src="js/effects.fade.js"></script>
3. 다음과 같이 사용하세요.
$("#thedialog").dialog({
show: 'fade',
hide: 'fade'
});
or
$("#thedialog").dialog({
show: {effect:'fade', speed: 800},
hide: {effect:'fade', speed: 800}
});