寫一個簡單的JQ插件(例子)
阿新 • • 發佈：2017-07-25
ont ava 兼容 app js代碼 lsp 是把 生成 order
雖然現在 vue angular react 當道啊
但是那 JQ還是有一席之地
很多很多的小單位啊.其實還會用到
我也放一個例子吧
雖然我也不是很肯定有沒有人寫的比我更好啊
但是我相信 我這個還是蠻實用的
話不多說 丟代碼
JQ插件標準的封裝代碼如下，首先需要閉包：
<scripttype="text/javascript">
(function ($) {
//這裏放入插件代碼
})(jQuery);
</script>
|
這是jQuery官方的插件開發規範，這樣寫是作用是：
1. 避免全局依賴。
2. 避免第三方破壞。
3. 兼容jQuery操作符’$’和’jQuery’
接著給插件加入主體：
<scripttype="text/javascript">
(function ($) {
$.fn.userCp = function(options) { //定義插件的名稱，這裏為userCp
var dft = {
//以下為該插件的屬性及其默認值
cpBy: "dafi", //版權所有者
url: "http://www.dafi.cn", //所有者鏈接
size: "12px", //版權文字大小
align: "left" //版權文字位置，left || center || right
};
var ops = $.extend(dft,options);
var style = ‘style="font-size:‘ + ops.size + ‘;text-align:‘ + ops.align + ‘;"‘; //調用默認的樣式
var cpTxt = ‘<p‘ + ‘ ‘ + style + ‘>此文章版權歸<atarget="_blank"href="‘ + ops.url + ‘">‘ + ops.cpBy + ‘</a>所有</p>‘; //生成版權文字的代碼
$(this).append(cpTxt); //把版權文字加入到想顯示的div
}
})(jQuery);
</script> |
OK了，這個插件已經完成了，接下來我們來看看調用的方式。
比如你文章所在的div的id=”article-content”，那麽在此div後面（先讀取到了該div，該div才可以作為後面的JS的對象）加上JS代碼：
<scripttype="text/javascript">
$("#article-content").userCp();
<script">
|
其實也不是一定要放到該div的後面，比如要放到head區域裏的話，就要使用JQ的預讀功能，也就是把頁面所有的dom都讀取完之後，才執行裏面的JS：
<scripttype="text/javascript">
$(function(){ //官方解釋：在dom文檔載入完成後執行的函數
$("#article-content").userCp();
});
<script">
|
如果不想使用默認的內容，比如要修改版權所有者名字、網址、文字大小和靠右顯示等，那就給這個插件傳幾個參數：
<scripttype="text/javascript">
$("#article-content").userCp({
cpBy: " T ",
url: "http://dafi.cn",
size: "16px",
align: "right"
});
<script">
|
寫一個簡單的JQ插件(例子)