[JavaScript][JQuery]設計自己的JavaScript元件(TabControl)

2014-03-07 置頂文章

3122
0

摘要:[JavaScript][JQuery]設計自己的JavaScript元件(TabControl)

前一陣子主管要求我寫MVC的View時，讓我做一些畫面的設計；我也不知道為什麼就自己寫了一個簡單的UI，寫了這個元件之後

讓我對於JQuery的lib有更深刻的體會，了解到那些部份為何要如此設計，如何讓使用者更方便直覺，所以把這份體會寫成一個小

小筆記，莫忘初衷XD...

P.S其實還有很多地方可以寫更便捷，等那天有空再來調整或是那位大哥跟我指點一二 XD...

目標程式

tabcontrol.js ==>js元件

tabcontrol.css ==>css樣式

XXX.html ==>要鑲嵌的Code

// tabcontrol.js --------------------------------------------------------------------------------

//按鈕事件

var localButtonFireListener = new Object();

//現在tab名稱

var currentpage = "";

// 預設顯示第一個 Tab

var _showTab = 0;

//切換tab的Url

var _clickTab = "";

//切換權限字串

var ls_changeSeq = new Array();

//現在tab的index

var currentpageIndex = 0;

var pages = new Array();

//訊息

var showMsg = "尚有其它步驟尚未完成，請先完成其它步驟內容!";

//$(function ()

function TabControl()

{

var $defaultLi = $('ul.tabs li').eq(_showTab).addClass('active');

$($defaultLi.find('a').attr('href')).siblings().hide();

//init 將頁面順序寫入陣列

init();

// 當 li 頁籤被點擊時...

// 若要改成滑鼠移到 li 頁籤就切換時, 把 click 改成 mouseover

$('ul.tabs li').click(function () {

// 找出 li 中的超連結 href(#id)

var $this = $(this),

_clickTab = $this.find('a').attr('href');

// 把目前點擊到的 li 頁籤加上 .active

// 並把兄弟元素中有 .active 的都移除 class

var value = localButtonFireListener.whatButtonFireEvent(_clickTab);

if (!value) {

return false;

}

//檢查是否可以切換頁面

var IsChangeOK = IsChangeAble(currentpage, _clickTab);

if (!IsChangeOK) {

alert(showMsg);

return false;

}

currentpage = _clickTab;

$this.addClass('active').siblings('.active').removeClass('active');

// 淡入相對應的內容並隱藏兄弟元素

$(_clickTab).stop(false, true).fadeIn().siblings().hide();

return false;

}).find('a').focus(function () {

this.blur();

});

}

function init() {

pages = new Array();

var $defaultLi = $('ul.tabs li');

try

{

for (i = 0; i < $defaultLi.length; i++) {

var str = $($defaultLi[i].innerHTML.toString()).attr('href');

pages.push(str);

}

catch (e) {

var x = e.toString();

}

function getCurrentPage() {

return currentpage.toString();

}

//頁面切換順序放入陣列

function changeSeq(Seq) {

ls_changeSeq = Seq.toString().split(';');

var x = 1;

}

//取得目前頁面index

function getPageIndex(pagename) {

var index=0;

for (i = 0; i < pages.length; i++)

if (pages[i] == pagename)

index = i;

return index;

}

//回傳陣列

function NextEnablePageIndex(NowPageIndex) {

return ls_changeSeq[NowPageIndex].split(',');

}

function IsChangeAble(NowPageName, NextPageName) {

if (pages.length == 0 | ls_changeSeq.length==0) //沒設定順序就全部都可以隨意切換

return true;

var NowPageIndex = getPageIndex(NowPageName);

var NextPageIndex=getPageIndex(NextPageName);

var ls_NextPageEnable = NextEnablePageIndex(NowPageIndex);

for (i = 0; i < ls_NextPageEnable.length; i++)

if (ls_NextPageEnable[i].toString() == NextPageIndex)

return true;

return false;

}

localButtonFireListener.whatButtonFireEvent = function (buttonName) {

// do nothing,for override.

}

localButtonFireListener.init = function () {

// do nothing,for override.

};

//強制切換頁面

function switchpage(page) {

var link = $('ul.tabs li');

for (i = 0; i < link.length; i++) {

var href = link[i].textContent;

if (page==href)

link[i].click();

}

//tabcontrol.css---------------------- 設定tab的css有興趣可以自己加美工

<style>

div.tab_container

{

width: 1000px;

}

</style>

// 使用方法如下----------------------------------------

// 其中只有 TabControl() 一定要下，其他的不一定要下，依需求設定

//Step1: include tabcontrol.js 和 tabcontrol.css

//Step2: 在$(document).ready裡initial下面的設定

_showTab = 0;

currentpage = "#tab1";

//設定頁面切換權限 ex '1;0,2;0' ==> tab[0] 可以開tab[1] ;tab[1] 可以開tab[0]和 tab[2];tab[2] 可以開tab[0]

var Seq='1;0,2;0';

changeSeq(Seq);

showMsg = "尚有其它步驟尚未完成，請先完成其它步驟內容!";

//載入TabControl原件

TabControl();

</ul>

<div>

</div>

P.S 目前是以JQuery Selector做選取所以class不可以隨意設定，有空再改成跟JQuery UI一樣類似 $("tabs").TabControl()，

目前html一定要這樣設定，哈哈!一個小小的簡單範例跟大家分享!

回首頁