欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

xmlplus組件設(shè)計(jì)系列之分隔框(DividedBox)(8)

 更新時(shí)間:2017年05月02日 15:58:23   作者:qudou  
xmlplus 是一個(gè)JavaScript框架,用于快速開(kāi)發(fā)前后端項(xiàng)目。這篇文章主要介紹了xmlplus布局類組件之分隔框,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

分隔框(DividedBox)是一種布局類組件,可以分為兩類,其中一類叫水平分隔框(HDividedBox),另一類叫垂直分隔框(VDividedBox)。水平分隔框會(huì)將其子級(jí)分為兩列,而垂直分隔框則會(huì)將其子級(jí)分為兩行。列與列之間以及行與行之間一般都會(huì)有一條可以拖動(dòng)的用以改變子級(jí)組件大小的分隔條。下面僅以垂直分隔框?yàn)槔齺?lái)介紹此類組件是如何設(shè)計(jì)以及實(shí)現(xiàn)的。

成品組件用例

按照以往的設(shè)計(jì)經(jīng)驗(yàn),我們可以先寫出想像中的成品組件用例,這將有助于我們后續(xù)的進(jìn)一步的設(shè)計(jì)與實(shí)現(xiàn)。垂直分隔框既然是布局類的組件,那么它也一定是一個(gè)容器,該容器包含了上述我們提到的三種子級(jí)組件。為了使用方便,我們不應(yīng)該把分隔框也寫進(jìn)去,分隔框應(yīng)該由組件內(nèi)部實(shí)現(xiàn)的。經(jīng)過(guò)分析,我們得到下面的一個(gè)應(yīng)用示例:

Example1: {
 css: "#example div { width: 80%; height: 80%; background: #AAA; }",
 xml: `<VDividedBox id="example">
    <div id='top'/>
    <div id='bottom'/>
   </VDividedBox>`
}

該示例由一垂直分隔框組件包裹著兩個(gè) div 元素。這里分別設(shè)置兩個(gè) div 元素的寬高為父級(jí)的 80%,同時(shí)設(shè)置它們的背景色為灰色,這只是為了方便測(cè)試。另外,我們還需要考慮一個(gè)子框的初始比例分配問(wèn)題。我們可以設(shè)置默認(rèn)比例為 50:50,比例最好可以在組件實(shí)例化時(shí)靜態(tài)指定,同時(shí)提供比例設(shè)置的動(dòng)態(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);
 }
}

這個(gè)用例在垂直分隔框初始化時(shí)設(shè)置子框的初始比例分配為 30:70,當(dāng)用戶點(diǎn)擊第一子框時(shí),比例分配重新恢復(fù)為 50:50。不過(guò)要注意,這些比例分配指的是對(duì)排除分隔條所占用空間后剩余空間的比例分配。

設(shè)計(jì)與實(shí)現(xiàn)

現(xiàn)在讓我們把注意力轉(zhuǎn)移到組件的內(nèi)部。我們先大致地確定組件基本的組成。直觀地看,垂直分隔框顯示包含三個(gè)組件部分:上子框部分、分隔條以及下子框部分。于是我們暫時(shí)可以得到下面的視圖項(xiàng)部分:

VDividedBox: {
 xml: `<div id='hbox'>
   <div id='top'/>
   <div id='handle'/>
   <div id='bottom'/>
   </div>`
}

下一步,確保垂直分隔框組件實(shí)例的子級(jí)部分被正確地映射到上子框 top 以及下子框 bottom。方法是先讓所有的子級(jí)元素對(duì)象全部被添加到上子框 top 中,然后在函數(shù)項(xiàng)中將下子級(jí)元素添加到下子框 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)在讓我們來(lái)考慮下視圖項(xiàng)的樣式,對(duì)于頂層 div 元素,我們?cè)O(shè)置其定位方式為相對(duì)定位。對(duì)于子級(jí)的三個(gè)元素則設(shè)置為絕對(duì)定位。另外,把分隔條高度設(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)分隔條的拖動(dòng)事件,從而更改子框的分配比例。我們需要定義一個(gè)改變子框比例的函數(shù),同時(shí)偵聽(tīng)分隔條的拖拽事件。下面是我們的一個(gè)實(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)中對(duì)子框的比例設(shè)定用到了 css3 的 calc 計(jì)算函數(shù),改函數(shù)在瀏覽器窗體改變大小時(shí)仍然能夠起作用。如果你希望兼容更多的瀏覽器,你需要做更多的工作。另外注意,為了讓組件有好的性能表現(xiàn),只有當(dāng)用戶開(kāi)始拖拽時(shí),才對(duì)事件 dragover 實(shí)施偵聽(tīng)。

進(jìn)一步改進(jìn)

讓我們現(xiàn)在做個(gè)小測(cè)試,寫一個(gè)包含兩個(gè)文本域作為子級(jí)的垂直分隔框的應(yīng)用實(shí)例。拖動(dòng)分隔條,看會(huì)出現(xiàn)什么結(jié)果。

Example3: {
 css: `#example textarea { width: 80%; height: 80%; }`,
 xml: `<VDividedBox id="example">
    <textarea id='top'/>
    <textarea id='bottom'/>
   </VDividedBox>`
}

在這個(gè)示例中,有時(shí)候分隔條會(huì)失靈,子框比例不再隨著分隔條位置而出現(xiàn)變化。問(wè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});
 }
}

為了解決問(wèn)題,我們?cè)诮M件中引用了額外的 div 元素對(duì)象 mask,此元素默認(rèn)是不顯示的。當(dāng)拖動(dòng)開(kāi)始時(shí),它才會(huì)覆蓋住子框以及分隔條,而拖動(dòng)一結(jié)束,它又隱藏掉。這樣就避免了文本域?qū)ν献录慕俪帧?/p>

結(jié)合水平分隔框使用

我們有了上述垂直分隔框的設(shè)計(jì)經(jīng)驗(yàn),搞個(gè)水平分隔框也就不是什么難事了,這里就不列出來(lái)了。這里主要是給出一個(gè)綜合使用水平分隔框和垂直分隔框的示例。當(dāng)然的設(shè)計(jì)之初,我們并沒(méi)有想到要這么使用。

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>`
}

這個(gè)示例主要用于展示當(dāng)分隔框嵌套使用時(shí)的表現(xiàn)。該示例包含一個(gè)水平分隔框,該水平分隔框又包含兩個(gè)垂直分隔框,這種布局在不少編輯器中是很常見(jiàn)的,我們這里已經(jīng)簡(jiǎn)單高效地把它實(shí)現(xiàn)了。

本系列文章基于 xmlplus 框架。如果你對(duì) xmlplus 沒(méi)有多少了解,可以訪問(wèn) www.xmlplus.cn。這里有詳盡的入門文檔可供參考。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • js中如何完美的解析數(shù)據(jù)

    js中如何完美的解析數(shù)據(jù)

    這篇文章給大家分享了JS中完美解析數(shù)據(jù)的方法和技巧,對(duì)此有興趣的朋友可以參考學(xué)習(xí)下。
    2018-03-03
  • 基于Html+CSS+JS實(shí)現(xiàn)手動(dòng)放煙花效果

    基于Html+CSS+JS實(shí)現(xiàn)手動(dòng)放煙花效果

    這篇文章主要介紹了利用Html+CSS+JavaScript實(shí)現(xiàn)的放煙花效果,文中一共實(shí)現(xiàn)了兩種方式:手動(dòng)和自動(dòng),文中的示例代碼講解詳細(xì),感興趣的可以試一試
    2022-01-01
  • JS實(shí)現(xiàn)批量上傳文件并顯示進(jìn)度功能

    JS實(shí)現(xiàn)批量上傳文件并顯示進(jìn)度功能

    這篇文章主要介紹了JS實(shí)現(xiàn)批量上傳文件并顯示進(jìn)度功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2017-06-06
  • 動(dòng)態(tài)加載js的方法匯總

    動(dòng)態(tài)加載js的方法匯總

    這篇文章主要介紹了動(dòng)態(tài)加載js的方法,實(shí)例匯總了常見(jiàn)的幾種動(dòng)態(tài)加載技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-02-02
  • 字符串反轉(zhuǎn)_JavaScript

    字符串反轉(zhuǎn)_JavaScript

    split()方法將一個(gè)字符串對(duì)象的每個(gè)字符拆出來(lái),并且將每個(gè)字符串當(dāng)成數(shù)組的每個(gè)元素 reverse()方法用來(lái)改變數(shù)組,將數(shù)組中的元素倒個(gè)序排列,第一個(gè)數(shù)組元素成為最后一個(gè),最后一個(gè)變成第一個(gè) join()方法將數(shù)組中的所有元素邊接成一個(gè)字符串
    2016-04-04
  • Web網(wǎng)站都變成灰色有哪些方法可以快速實(shí)現(xiàn)(解決方案)

    Web網(wǎng)站都變成灰色有哪些方法可以快速實(shí)現(xiàn)(解決方案)

    有些時(shí)候我們需要把網(wǎng)站頁(yè)面變成黑白色或灰色,特別是對(duì)于一些需要悼念的日子,以及一些影響力很大的偉人逝世或紀(jì)念日的時(shí)候,都會(huì)讓網(wǎng)站的全部網(wǎng)頁(yè)變成灰色(黑白色),以表示我們對(duì)逝者或者英雄的緬懷和悼念
    2022-12-12
  • 使用mock.js隨機(jī)數(shù)據(jù)和使用express輸出json接口的實(shí)現(xiàn)方法

    使用mock.js隨機(jī)數(shù)據(jù)和使用express輸出json接口的實(shí)現(xiàn)方法

    這篇文章主要介紹了使用mock.js隨機(jī)數(shù)據(jù)和使用express輸出json接口的實(shí)現(xiàn)方法,需要的朋友可以參考下
    2018-01-01
  • 使用js編寫實(shí)現(xiàn)拼圖游戲

    使用js編寫實(shí)現(xiàn)拼圖游戲

    這篇文章主要為大家詳細(xì)介紹了使用js編寫實(shí)現(xiàn)拼圖游戲,一種是拖拽拼圖,一種是經(jīng)典的九宮格拼圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • webpack之基礎(chǔ)打包優(yōu)化的實(shí)現(xiàn)

    webpack之基礎(chǔ)打包優(yōu)化的實(shí)現(xiàn)

    本文主要介紹了webpack之基礎(chǔ)打包優(yōu)化的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下<BR>
    2022-02-02
  • 利用uni-app開(kāi)發(fā)App的超簡(jiǎn)易教程

    利用uni-app開(kāi)發(fā)App的超簡(jiǎn)易教程

    uni-app是一個(gè)使用Vue.js開(kāi)發(fā)所有前端應(yīng)用的框架,開(kāi)發(fā)者編寫一套代碼,可發(fā)布到iOS、Android、Web(響應(yīng)式)、以及各種小程序,下面這篇文章主要給大家介紹了關(guān)于如何利用uni-app開(kāi)發(fā)App的相關(guān)資料,需要的朋友可以參考下
    2022-11-11

最新評(píng)論