标签：des style http color os io 使用 java ar
这里有一个简单的插件的例子，也是我从jquery基础教程2里面摘抄的
1、jquery.slidefade.js插件
jQuery.fn.slideFadeOut = function(speed, callback) {
<!-- lang: js -->
return this.animate({
<!-- lang: js -->
height: ‘hide‘,
<!-- lang: js -->
opacity: ‘hide‘
<!-- lang: js -->
}, speed, callback);
<!-- lang: js -->
};
<!-- lang: js -->
<!-- lang: js -->
jQuery.fn.slideFadeIn = function(speed, callback) {
<!-- lang: js -->
return this.animate({
<!-- lang: js -->
height: ‘show‘,
<!-- lang: js -->
opacity: ‘show‘
<!-- lang: js -->
}, speed, callback);
<!-- lang: js -->
};
<!-- lang: js -->
<!-- lang: js -->
jQuery.fn.slideFadeToggle = function(speed, callback) {
<!-- lang: js -->
return this.animate({
<!-- lang: js -->
height: ‘toggle‘,
<!-- lang: js -->
opacity: ‘toggle‘
<!-- lang: js -->
}, speed, callback);
<!-- lang: js -->
};
2、使用插件里面定义的通用方法再写shortcuts.js
$(document).ready(function() {
<!-- lang: js -->
$(‘#out‘).click(function() {
<!-- lang: js -->
$(‘p‘).slideFadeOut(‘slow‘);
<!-- lang: js -->
return false;
<!-- lang: js -->
});
<!-- lang: js -->
$(‘#in‘).click(function() {
<!-- lang: js -->
$(‘p‘).slideFadeIn(‘slow‘);
<!-- lang: js -->
return false;
<!-- lang: js -->
});
<!-- lang: js -->
$(‘#toggle‘).click(function() {
<!-- lang: js -->
$(‘p‘).slideFadeToggle(‘slow‘);
<!-- lang: js -->
return false;
<!-- lang: js -->
});
<!-- lang: js -->
});
3、本例子中会用到的css
body {
font: 62.5% Arial, Verdana, sans-serif;
}
p {
width: 200px;
border: 1px solid #aaa;
background-color: #eee;
margin: 0.5em;
padding: 0.5em;
}
.controls {
margin-top: 1em;
}
4、最后，显示效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<!-- lang: html -->
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- lang: html -->
<!-- lang: html -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- lang: html -->
<head>
<!-- lang: html -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- lang: html -->
<!-- lang: html -->
<title>Shortcut Methods Example</title>
<!-- lang: html -->
<!-- lang: html -->
<link rel="stylesheet" href="shortcuts.css" type="text/css" />
<!-- lang: html -->
<!-- lang: html -->
<script src="../jquery.js" type="text/javascript"></script>
<!-- lang: html -->
<script src="jquery.slidefade.js" type="text/javascript"></script>
<!-- lang: html -->
<script src="shortcuts.js" type="text/javascript"></script>
<!-- lang: html -->
</head>
<!-- lang: html -->
<!-- lang: html -->
<body>
<!-- lang: html -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
<!-- lang: html -->
elit, sed do eiusmod tempor incididunt ut labore et
<!-- lang: html -->
dolore magna aliqua. Ut enim ad minim veniam, quis
<!-- lang: html -->
nostrud exercitation ullamco laboris nisi ut aliquip
<!-- lang: html -->
ex ea commodo consequat. Duis aute irure dolor in
<!-- lang: html -->
reprehenderit in voluptate velit esse cillum dolore eu
<!-- lang: html -->
fugiat nulla pariatur. Excepteur sint occaecat
<!-- lang: html -->
cupidatat non proident, sunt in culpa qui officia
<!-- lang: html -->
deserunt mollit anim id est laborum.</p>
<!-- lang: html -->
<div class="controls">
<!-- lang: html -->
<input type="button" value="Slide and fade out" id="out" />
<!-- lang: html -->
<input type="button" value="Slide and fade in" id="in" />
<!-- lang: html -->
<input type="button" value="Toggle" id="toggle" />
<!-- lang: html -->
</div>
<!-- lang: html -->
</body>
<!-- lang: html -->
</html>
我们看到引入这些文件就完成了想要的效果。
5、但是还有一些封装性更高的框架，最近在学习的easyUI（虽然有些人说过它的一些问题，但是我觉得对于菜鸟，学习别人的框架是必要的，而且要真的懂）
但是在jquery.easyUI.min.js里面最外面的方法是用来放插件的，并不是加载完dom就执行的，所以我暂时还没看懂源码，是使用的什么方法等待dom加载完再执行的。
标签：des style http color os io 使用 java ar
原文地址：http://my.oschina.net/u/933915/blog/309761
