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 | 29 | 30 | 31 |
Tags
- JPA
- querydsl
- jenkins
- jquery
- SVN
- spring jpa
- custom filter
- JBoss Seam
- MySQL
- Spring
- java tip
- GEventEvaluator
- drools
- jquery serialize
- CEP
- Drools Fusion
- zabbix
- jstl
- COC
- bootstrap jquery datepicker
- rember me
- ibatis
- spring security
- gwt-ext
- maven
- spring transaction
- Hudson
- @SqlResultSetMapping
- guvnor
- gwt
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}
});