xmlplus組件設(shè)計系列之分隔框（DividedBox)（8）
分隔框（DividedBox）是一種布局類組件，可以分為兩類，其中一類叫水平分隔框（HDividedBox），另一類叫垂直分隔框（VDividedBox）。水平分隔框會將其子級分為兩列，而垂直分隔框則會將其子級分為兩行。列與列之間以及行與行之間一般都會有一條可以拖動的用以改變子級組件大小的分隔條。下面僅以垂直分隔框?yàn)槔齺斫榻B此類組件是如何設(shè)計以及實(shí)現(xiàn)的。
成品組件用例
按照以往的設(shè)計經(jīng)驗(yàn)，我們可以先寫出想像中的成品組件用例，這將有助于我們后續(xù)的進(jìn)一步的設(shè)計與實(shí)現(xiàn)。垂直分隔框既然是布局類的組件，那么它也一定是一個容器，該容器包含了上述我們提到的三種子級組件。為了使用方便，我們不應(yīng)該把分隔框也寫進(jìn)去，分隔框應(yīng)該由組件內(nèi)部實(shí)現(xiàn)的。經(jīng)過分析，我們得到下面的一個應(yīng)用示例：
Example1: {
css: "#example div { width: 80%; height: 80%; background: #AAA; }",
xml: `<VDividedBox id="example">
<div id='top'/>
<div id='bottom'/>
</VDividedBox>`
}
該示例由一垂直分隔框組件包裹著兩個 div 元素。這里分別設(shè)置兩個 div 元素的寬高為父級的 80%，同時設(shè)置它們的背景色為灰色，這只是為了方便測試。另外，我們還需要考慮一個子框的初始比例分配問題。我們可以設(shè)置默認(rèn)比例為 50:50，比例最好可以在組件實(shí)例化時靜態(tài)指定，同時提供比例設(shè)置的動態(tài)接口。于是我們就有了下面的改進(jìn)用例。
Example2: {
css: "#example div { width: 80%; height: 80%; background: #AAA; }",
xml: `<VDividedBox id="example" percent='30'>
<div id='top'/>
<div id='bottom'/>
</VDividedBox>`,
fun: function (sys, items, opts) {
sys.top.on("click", e => sys.example.percent = 50);
}
}
這個用例在垂直分隔框初始化時設(shè)置子框的初始比例分配為 30:70，當(dāng)用戶點(diǎn)擊第一子框時，比例分配重新恢復(fù)為 50:50。不過要注意，這些比例分配指的是對排除分隔條所占用空間后剩余空間的比例分配。
設(shè)計與實(shí)現(xiàn)
現(xiàn)在讓我們把注意力轉(zhuǎn)移到組件的內(nèi)部。我們先大致地確定組件基本的組成。直觀地看，垂直分隔框顯示包含三個組件部分：上子框部分、分隔條以及下子框部分。于是我們暫時可以得到下面的視圖項(xiàng)部分：
VDividedBox: {
xml: `<div id='hbox'>
<div id='top'/>
<div id='handle'/>
<div id='bottom'/>
</div>`
}
下一步，確保垂直分隔框組件實(shí)例的子級部分被正確地映射到上子框 top 以及下子框 bottom。方法是先讓所有的子級元素對象全部被添加到上子框 top 中，然后在函數(shù)項(xiàng)中將下子級元素添加到下子框 bottom 中。
VDividedBox: {
xml: `<div id='hbox'>
<div id='top'/>
<div id='handle'/>
<div id='bottom'/>
</div>`,
map: {appendTo: "top" },
fun: function (sys, items, opts) {
sys.bottom.elem().appendChild(this.last().elem());
}
}
現(xiàn)在讓我們來考慮下視圖項(xiàng)的樣式，對于頂層 div 元素，我們設(shè)置其定位方式為相對定位。對于子級的三個元素則設(shè)置為絕對定位。另外，把分隔條高度設(shè)置為 5px。
VDividedBox: {
css: `#hbox { position:relative; width:100%; height:100%; box-sizing: border-box; }
#top { top: 0; height: 30%; } #bottom { bottom: 0; height: calc(70% - 5px); }
#top,#bottom { left: 0; right: 0; position: absolute; }
#handle { height: 5px; width: 100%; position:absolute; left:0; top: 30%; z-index:11; cursor:row-resize; }`,
xml: `<div id='hbox'>
<div id='top'/>
<div id='handle'/>
<div id='bottom'/>
</div>`,
map: {appendTo: "top" },
fun: function (sys, items, opts) {
sys.bottom.elem().appendChild(this.last().elem());
}
}
最后讓我們看看如何響應(yīng)分隔條的拖動事件，從而更改子框的分配比例。我們需要定義一個改變子框比例的函數(shù)，同時偵聽分隔條的拖拽事件。下面是我們的一個實(shí)現(xiàn)。
VDividedBox: {
// 視圖項(xiàng)同上
map: { format: {"int": "percent"}, appendTo: "top" },
fun: function (sys, items, opts) {
var percent = 50;
sys.handle.on("dragstart", function (e) {
sys.hbox.on("dragover", dragover);
});
sys.hbox.on("dragend", function (e) {
e.stopPropagation();
sys.hbox.off("dragover", dragover);
});
function dragover(e) {
e.preventDefault();
setPercent((e.pageY - sys.hbox.offset().top) / sys.hbox.height() * 100);
}
function setPercent(value) {
sys.handle.css("top", value + "%");
sys.top.css("height", value + "%");
sys.bottom.css("height", "calc(" + (100 - value) + "% - 5px)");
}
setPercent(opts.percent || percent);
sys.bottom.elem().appendChild(this.last().elem());
return Object.defineProperty({}, "percent", {get: () => {return percent}, set: setPercent});
}
}
上述代碼的映射項(xiàng)中有一項(xiàng)關(guān)于 percent 格式的設(shè)置，該設(shè)置確保了 percent 為整型數(shù)。另外函數(shù)項(xiàng)中對子框的比例設(shè)定用到了 css3 的 calc 計算函數(shù)，改函數(shù)在瀏覽器窗體改變大小時仍然能夠起作用。如果你希望兼容更多的瀏覽器，你需要做更多的工作。另外注意，為了讓組件有好的性能表現(xiàn)，只有當(dāng)用戶開始拖拽時，才對事件 dragover 實(shí)施偵聽。
進(jìn)一步改進(jìn)
讓我們現(xiàn)在做個小測試，寫一個包含兩個文本域作為子級的垂直分隔框的應(yīng)用實(shí)例。拖動分隔條，看會出現(xiàn)什么結(jié)果。
Example3: {
css: `#example textarea { width: 80%; height: 80%; }`,
xml: `<VDividedBox id="example">
<textarea id='top'/>
<textarea id='bottom'/>
</VDividedBox>`
}
在這個示例中，有時候分隔條會失靈，子框比例不再隨著分隔條位置而出現(xiàn)變化。問題出在文本域?qū)ν献录M(jìn)行了劫持，導(dǎo)致我們我組件內(nèi)部收不到響應(yīng)的事件。我們需要做些補(bǔ)丁才行。
VDividedBox: {
css: "#hbox { position:relative; width:100%; height:100%; box-sizing: border-box; }\
#top { top: 0; height: 30%; } #bottom { bottom: 0; height: calc(70% - 5px); }\
#top,#bottom { left: 0; right: 0; position: absolute; }\
#handle { height: 5px; width: 100%; position:absolute; left:0; top: 30%; z-index:11; cursor:row-resize; }\
#mask { width: 100%; height: 100%; position: absolute; display: none; z-index: 10; }",
xml: "<div id='hbox'>\
<div id='top'/>\
<div id='handle' draggable='true'/>\
<div id='bottom'/>\
<div id='mask'/>\
</div>",
map: { format: {"int": "percent"}, appendTo: "top" },
fun: function (sys, items, opts) {
var percent = 50;
sys.handle.on("dragstart", function (e) {
sys.mask.show();
sys.hbox.on("dragover", dragover);
});
sys.hbox.on("dragend", function (e) {
sys.mask.hide();
e.stopPropagation();
sys.hbox.off("dragover", dragover);
});
function dragover(e) {
e.preventDefault();
setPercent((e.pageY - sys.hbox.offset().top) / sys.hbox.height() * 100);
}
function setPercent(value) {
sys.handle.css("top", value + "%");
sys.top.css("height", value + "%");
sys.bottom.css("height", "calc(" + (100 - value) + "% - 5px)");
}
setPercent(opts.percent || percent);
sys.bottom.elem().appendChild(this.last().elem());
return Object.defineProperty({}, "percent", {get: () => {return percent}, set: setPercent});
}
}
為了解決問題，我們在組件中引用了額外的 div 元素對象 mask，此元素默認(rèn)是不顯示的。當(dāng)拖動開始時，它才會覆蓋住子框以及分隔條，而拖動一結(jié)束，它又隱藏掉。這樣就避免了文本域?qū)ν献录慕俪帧?/p>
結(jié)合水平分隔框使用
我們有了上述垂直分隔框的設(shè)計經(jīng)驗(yàn)，搞個水平分隔框也就不是什么難事了，這里就不列出來了。這里主要是給出一個綜合使用水平分隔框和垂直分隔框的示例。當(dāng)然的設(shè)計之初，我們并沒有想到要這么使用。
Example4: {
css: `#example div { width: 100%; height: 100%; }`,
xml: `<HDividedBox id='example'>
<VDividedBox percent='30'>
<div/><div/>
</VDividedBox>
<VDividedBox percent='30'>
<div/><div/>
</VDividedBox>
</HDividedBox>`
}
這個示例主要用于展示當(dāng)分隔框嵌套使用時的表現(xiàn)。該示例包含一個水平分隔框，該水平分隔框又包含兩個垂直分隔框，這種布局在不少編輯器中是很常見的，我們這里已經(jīng)簡單高效地把它實(shí)現(xiàn)了。
本系列文章基于 xmlplus 框架。如果你對 xmlplus 沒有多少了解，可以訪問 www.xmlplus.cn。這里有詳盡的入門文檔可供參考。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中將秒轉(zhuǎn)換為分鐘和秒,通過將秒數(shù)除以 60 得到整分鐘數(shù),獲取剩余的秒數(shù),本文通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-09-09
JS實(shí)現(xiàn)的簡單輪播圖運(yùn)動效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡單輪播圖運(yùn)動效果,結(jié)合完整實(shí)例形式分析了javascript基于定時器動態(tài)修改頁面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
用headjs來管理和加載js 提高網(wǎng)站加載速度
headjs其實(shí)是一整套的工具，本文介紹的是它其中的Javascript Loader功能。需要的朋友可以參考下2016-11-11
Javascript 自適應(yīng)高度的Tab選項(xiàng)卡
選項(xiàng)卡的原理其實(shí)比較簡單，就是設(shè)置2種狀態(tài)，選中和未選中的2中不同CSS狀態(tài)，因此也有直接不用JS之用css就能實(shí)現(xiàn)的效果2011-04-04
詳解axios中封裝使用、攔截特定請求、判斷所有請求加載完畢）
這篇文章主要介紹了axios中封裝使用、攔截特定請求、判斷所有請求加載完畢的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
類似于JQuery的這樣js庫已經(jīng)實(shí)現(xiàn)了很好的數(shù)據(jù)綁定機(jī)制的封裝效果，但只知其然，不知其所以然還有會有種蒙在鼓里的感覺，親自去分析一下具體的實(shí)現(xiàn)，會有一種豁然開朗的感覺2014-06-06
想必大家都知道，JavaScrip是全棧開發(fā)語言，瀏覽器，手機(jī)，服務(wù)器端都可以看到JS的身影。 本文會分享一些高效的JavaScript的最佳實(shí)踐，提高大家對JS的底層和實(shí)現(xiàn)原理的理解，感興趣的小伙伴們可以參考一下2016-01-01
javascript和php使用ajax通信傳遞JSON的實(shí)例
今天小編就為大家分享一篇javascript和php使用ajax通信傳遞JSON的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
javascript實(shí)現(xiàn)網(wǎng)站加入收藏功能
這篇文章主要介紹了javascript實(shí)現(xiàn)網(wǎng)站加入收藏功能的相關(guān)資料,需要的朋友可以參考下2015-12-12
JS實(shí)現(xiàn)FLASH幻燈片圖片切換效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)FLASH幻燈片圖片切換效果的方法,實(shí)例分析了javascript操作圖片實(shí)現(xiàn)Flash幻燈效果的技巧,需要的朋友可以參考下2015-03-03