首頁 > 開發者 > 網站開發

基於jQuery的外掛程式開發

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：for   ==   play   auto   direction   自己的   back   article   setting   

(function($) {
//1、設定預設資訊
//2、設定空的配置資訊
//3、設定核心執行函數，包括配置資訊的繼承，元素的建立，功能函數的執行。
//4、通過擴充項物件外掛程式的方法對外提供函數介面
　　var defaults = {
　　　　//1、設定預設資訊
　　};

　　var settings = {};//2、設定空的配置資訊

　　//3、設定核心執行函數，包括配置資訊的繼承，元素的建立，功能函數的執行。　　
　　var This = null;//設定全域的This
　　function FnExe(options) {
　　　　This = this;//在目標對象下賦值
　　　　settings = $.extend(settings,defaults,option);//配置資訊的繼承
　　　　Create();//元素的建立
　　　　Fn();//功能函數
　　}
　　function Create() {}//建立的時候通過配置參數的資料對建立的元素進行渲染
　　function Fn() {}
　　$.fn.extend({//通過擴充項物件外掛程式的方法對外提供介面函數
　　　　FnExe : FnExe
　　});
}(jQuery);


//自己配置函數部分：
$(function() {
　　$("#id").FnExe({
　　　　//自己配置資訊。
　　});
});

================demo================

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
<title>Tab_test</title>
<style>
body{padding: 0;margin: 0;}
.btns{
width: 100%;
height: 3rem;
line-height: 3rem;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.btn{
width: 33%;
text-align: center;
}
.active{
background: deepskyblue;
color: white;
}
.conts{
width: 100%;
height: auto;
}
.cont{
height: 40rem;
display: none;
}
</style>
</head>
<body>
<article id="Tab">
<!--<section class="btns">-->
<!--<div class="btn active">按鈕1</div>-->
<!--<div class="btn">按鈕2</div>-->
<!--<div class="btn">按鈕3</div>-->
<!--</section>-->
<!--<aside class="conts">-->
<!--<div class="cont">按鈕1的內容</div>-->
<!--<div class="cont">按鈕2的內容</div>-->
<!--<div class="cont">按鈕3的內容</div>-->
<!--</aside>-->
</article>
<script src="../lib/scripts/jquery-1.12.4.js"></script>
<script>
$(function() {//通過外掛程式提供的介面做自己的配置參數
$(‘#Tab‘).FnTabExe({
btn : [‘體育‘,‘娛樂‘,‘新聞‘,‘視頻‘,‘關於我們‘],
cont : [‘體育11111111‘,‘娛樂123123123‘,‘新聞fffffff‘,‘視頻ffffffggggg‘,‘關於我們123‘],
event : ‘mouseover‘
});
});
(function($) {
//1、置預設資訊
//2、配置資訊
//3、核心執行函數,包括建立函數，功能函數等
//4、通過$.fn.extend(),基於對象的擴充,提供對外擴充的函數介面
var defaults = {//1、置預設資訊
btn : ["導航一","導航二","導航三"],
cont : ["導航一的內容","導航二的內容","導航三的內容"],
event : "click"
};
var settings = {};//2、配置資訊
var $This = null;
function FnTabExe(options) {//3、核心執行函數,包括建立函數，功能函數等
$This = this;
settings = $.extend(settings,defaults,options);
Create();
FnTab();
}
function Create() {
var $section = $("<section>");
$section.addClass("btns");
$This.append($section);
for(var i = 0; i < settings.btn.length;i++) {
var $btn = $("<div>"+settings.btn[i]+"</div>");
$btn.addClass("btn");
if(i==0) {
$btn.addClass("active");
}
$section.append($btn);
}
var $aside = $("<aside>");
$aside.addClass("conts");
$This.append($aside);
for(var i = 0;i < settings.cont.length;i++) {
var $cont = $("<div class=‘cont‘>"+settings.cont[i]+"</div>");
if(i==0) {
$cont.css("display","block");
}
$aside.append($cont);
}
}
function FnTab() {
$This.find(".btn").on(settings.event,function() {
$This.find(".btn").removeClass("active");
$(this).addClass("active");
$This.find(".cont").css("display","none");
$This.find(".cont").eq( $(this).index() ).css("display","block");
});
}
$.fn.extend({//4、通過$.fn.extend(),基於對象的擴充,提供對外擴充的函數介面
FnTabExe : FnTabExe
});
})(jQuery);
</script>
</body>
</html>

 

基於jQuery的外掛程式開發

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
htmlspecialchars jquery jquery exit jquery uppercase jquery urlencode sleep jquery best jquery jquery ssl
相關文章
H5 中html 頁面存為圖片並長按 儲存
__x__(20)0907第四天__ css 框模型

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More