前面在看Jquery方面的书籍时，看到了一章名叫如何利用jquery创建自己的插件，本人是jquery的初学者，所以就用它来写了一个点击文字可以获取标题弹框的例子。
第一步：肯定是要引用jquery的js脚本和我们自己定义的插件的js脚本；
第二步：插件写法：
（1）定义插件名称；（2）设置默认值；（3）settings配置；（4）循环遍历添加事件。
第三步：html页面调用：
js代码如下：
/**
* showPlugin - xiaobang
*
* Copyright (c) 2014-2015 www.szkingdom.com. All rights reserved.
*
*/
(function($){
//插件运行
$.fn.showPlugin = function(options){
//插件默认值
var defaults = {
backgroundColor : '#00FA9A',
color : 'blue',
rounded : false,
position : 'relative',
'min-height' : 60,
'max-width' : 250,
padding:15
};
//settings配置
var settings = $.extend({},defaults,options);
//循环遍历
this.each(function(){
var title = this.title;
if($(this).is('div') && $(this).attr('title')!=''){
this.title = '';
//给div添加一个click点击事件
$(this).bind('click',function(){
alert(title);
});
};
return this;
});
}
})(jQuery);
html代码如下：
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery UI</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="showPlugin.js"></script>
</head>
<body>
<div title="何以飘离去,何以少团栾">何以飘离去,何以少团栾</div>
<div title="何以别离久,何以不得安">何以别离久,何以不得安</div>
<script>
$(document).ready(
function() {
$("div").showPlugin();
}
);
</script>
</body>
</html>