真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

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

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

創(chuàng)新互聯(lián)公司主營四子王網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶App定制開發(fā),四子王h5微信小程序搭建,四子王網(wǎng)站營銷推廣歡迎四子王等地區(qū)企業(yè)咨詢

成品組件用例

按照以往的設(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: `
    

    

   `
}

該示例由一垂直分隔框組件包裹著兩個 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: `
    

    

   `,
 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)部。我們先大致地確定組件基本的組成。直觀地看，垂直分隔框顯示包含三個組件部分：上子框部分、分隔條以及下子框部分。于是我們暫時可以得到下面的視圖項部分：

VDividedBox: {
 xml: `

   

   

   

   
`
}

下一步，確保垂直分隔框組件實(shí)例的子級部分被正確地映射到上子框 top 以及下子框 bottom。方法是先讓所有的子級元素對象全部被添加到上子框 top 中，然后在函數(shù)項中將下子級元素添加到下子框 bottom 中。

VDividedBox: {
 xml: `

   

   

   

   
`,
 map: {appendTo: "top" },
 fun: function (sys, items, opts) {
  sys.bottom.elem().appendChild(this.last().elem());
 }
}

現(xiàn)在讓我們來考慮下視圖項的樣式，對于頂層 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: `

   

   

   

   
`,
 map: {appendTo: "top" },
 fun: function (sys, items, opts) {
  sys.bottom.elem().appendChild(this.last().elem());
 }
}

最后讓我們看看如何響應(yīng)分隔條的拖動事件，從而更改子框的分配比例。我們需要定義一個改變子框比例的函數(shù)，同時偵聽分隔條的拖拽事件。下面是我們的一個實(shí)現(xiàn)。

VDividedBox: {
 // 視圖項同上
 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});
 }
}

上述代碼的映射項中有一項關(guān)于 percent 格式的設(shè)置，該設(shè)置確保了 percent 為整型數(shù)。另外函數(shù)項中對子框的比例設(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: `