東拼西湊完成乙個「前端框架」 4 Tabs頁

在完成了側邊欄後，後台的基礎架子已經基本出來了；下面是來加入tab頁面，正在糾結於tab頁面是否用現成的輪子，

比如

layui

title 列表

content 內容

1. 布局

tab1

tab2
tab3
tab1 content
tab2 content
tab3 content

.ls-tab-container 

.ls-tab-container .ls-tab-titles 
.ls-tab-container .ls-tab-contents 
.ls-tab-container .ls-tab-titles .tab-title 
.ls-tab-container .ls-tab-titles .tab-title:hover 

2. 選中狀態

選中的頭部和內的狀態

···

tab1
······
tab1 content
···

.ls-tab-container .ls-tab-titles .tab-title.active 

.ls-tab-container .ls-tab-contents .tab-content 
.ls-tab-container .ls-tab-contents .tab-content.active 

3. 增加關閉按鈕

···

tab1
···

.ls-tab-container .ls-tab-titles .tab-title .ls-icon-close 

.ls-tab-container .ls-tab-titles .tab-title .ls-icon-close:hover 

···

/*** tab頁初始化
* @param selector 
*/tab: function(selector) 
$tab.find(".ls-tab-titles .tab-title.active").removeclass("active");
$tab.find(".ls-tab-contents .tab-content.active").removeclass("active");
$tabtitle.addclass("active");
$tab_contents.find(".tab-content[data-for='" + tabid + "']").addclass('active');
};// 移除tab
var removetab = function($tabtitle) else if ($tabtitle.prev().length) 
}$tabtitle.remove();
$tab_contents.find(".tab-content[data-for='" + tabid + "']").remove();
};//事件繫結 + 
//點選切換
$title.click(function() );
//點選關閉
$title.find(".op-close").click(function() );
//tab 物件
var tab = selector 
*/active: function(id) ,
/*** 新增
* @param selector 
*/add: function(tabobj) ;
tabobj = tabobj || {};
tabobj = $.extend(defaults, tabobj);
// 無內容，建立內容區域
if (!$tab_contents.length) 
var $newtabtitle =
$("" + tabobj.title + "
") .click(function() );
if (tabobj.closable) ));
};activetab($newtabtitle);
},/**
* 移除
* @param selector 
*/remove: function(id) 
};return tab;
}···

···

選單管理
歡迎批評指正

 
快速上手完成乙個自己的前端框架
作為乙個後端程式設計師，很多時候我們也想自己搞乙個炫酷的前端頁面出來。無奈專精後端的我們 已經精疲力盡了，但是作為乙個程式設計師。怎能沒有一顆全棧的心呢！目前前端比較流行的框架vue.js，在這基礎上有一批成熟的後台系統開源專案。1 element 截止發稿前 start 51.8k 官網 http...
乙個簡單的Python MVC框架（4）
前面都是準備，這裡是整個web mvc框架的核心地方，稍微多介紹一下。核心類是乙個叫dspth的模組。這裡我沒有處理路由，乙個是不太熟，另外乙個是主要是體會架構。我用的路由規則如下 1 用url的位址引數進行路由，有兩個引數，乙個是ctr,表示控制類,乙個是act表示執行的方法 2 所有執行方法都約...
VS Code開啟第乙個VUE前端專案（4）
過了乙個星期了，對vue有了初步的認識，這裡說一下vue到底幹嘛的。vue的作用是將所有的元件模組化，分在了以.vue結尾的檔案中，內部的元素被包裹，每個部分代表乙個功能 也可以多個功能，單個功能會更友好，畢竟模組化了 對於這些vue檔案，除了功能子模組外，還需要根模組，將多個分散模組組合到一起，變...