1
我試圖製作一個命名爲core-splitter的元素，它在1.0中被棄用，因爲這在我們的項目中起着關鍵作用。聚合物1.0試圖製作一個像分離器一樣工作的分離器，可以稱爲鐵分離器
如果您不知道什麼是核心分離器，我可以提供簡短說明。 core-splitter提供了一個拆分條，並且在拆分條上拖動將調整同級元素的大小。通常情況下，您會希望使用core-splitter和flex佈局，以便其他兄弟元素可以靈活使用。遺憾的是，這隻適用於Polymer 0.5，但在1.0版本中已棄用。這裏是聚合物0.5版本的演示。 Demo for core-splitter in Polymer 0.5
我能夠做到這一點在正常的JavaScript，但無法使其工作在聚合物1.0。
這裏是一個fiddle
<link rel="import" href="https://cdn.rawgit.com/Polymer/polymer/master/polymer.html">
<dom-module id="splitter-element">
<template>
<div id="div1" class="split">Bacon ipsum dolor amet beef ribs meatloaf picanha pork loin pork chop rump pig sausage bacon shank boudin beef fatback. Pork loin turducken t-bone chicken.</div>
<div class="gutter" style="width: 10px;"></div>
<div id="div2" class="split">Brisket andouille cow ball tip. Ham ground round short loin tri-tip ribeye t-bone boudin, pork loin turkey drumstick tongue pork chop. Kielbasa doner picanha turducken, swine bacon shank pastrami andouille.</div>
</template>
<style>
.gutter {
background-color: #eee;
background-image: url('https://ssl.gstatic.com/ui/v1/icons/mail/grippy_large.png');
background-repeat: no-repeat;
background-position: 50%;
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.split, .gutter {
height: 100%;
float: left;
}
.gutter:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
.split {
box-sizing: border-box;
padding: 20px;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
<script>
Polymer({
is: 'splitter-element',
properties:{
"dragging":{
Value:false
}
},
"split":function(ids, options){
options = typeof options !== 'undefined' ? options : {};
if (!options.gutterWidth) options.gutterWidth = 10;
if (!options.minWidth) options.minWidth = 100;
if (!options.snapOffset) options.snapOffset = 30;
// Event listeners for drag events, bound to a pair object.
// Save the pair's left position and width when dragging starts.
// Prevent selection on start and re-enable it when done.
var startDragging = function (e) {
console.log('start');
e.preventDefault();
this.dragging = true;
this.width = this.left.clientWidth + this.right.clientWidth + options.gutterWidth;
this.x = this.left.getBoundingClientRect().left;
this.left.addEventListener('selectstart', preventSelection);
this.left.addEventListener('dragstart', preventSelection);
this.right.addEventListener('selectstart', preventSelection);
this.right.addEventListener('dragstart', preventSelection);
this.left.style.userSelect = 'none';
this.left.style.webkitUserSelect = 'none';
this.left.style.MozUserSelect = 'none';
this.right.style.userSelect = 'none';
this.right.style.webkitUserSelect = 'none';
this.right.style.MozUserSelect = 'none';
if (options.onDragStart) {
options.onDragStart();
}
},
stopDragging = function() {
this.dragging = false;
this.left.removeEventListener('selectstart', preventSelection);
this.left.removeEventListener('dragstart', preventSelection);
this.right.removeEventListener('selectstart', preventSelection);
this.right.removeEventListener('dragstart', preventSelection);
this.left.style.userSelect = '';
this.left.style.webkitUserSelect = '';
this.left.style.MozUserSelect = '';
this.right.style.userSelect = '';
this.right.style.webkitUserSelect = '';
this.right.style.MozUserSelect = '';
if (options.onDragEnd) {
options.onDragEnd();
}
},
drag = function (e) {
if (!this.dragging) return;
// Get the relative position of the event from the left side of the
// pair.
var offsetX = e.clientX - this.x;
// If within snapOffset of min or max, set offset to min or max
if (offsetX <= this.leftMin + options.snapOffset) {
offsetX = this.leftMin;
} else if (offsetX >= this.width - this.rightMin - options.snapOffset) {
offsetX = this.width - this.rightMin;
}
// Left width is the same as offset. Right width is total width - left width.
this.left.style.width = 'calc(' + (offsetX/this.width * 100) + '% - ' + options.gutterWidth/2 + 'px)';
this.right.style.width = 'calc(' + (100 - (offsetX/this.width * 100)) + '% - ' + options.gutterWidth/2 + 'px)';
if (options.onDrag) {
options.onDrag();
}
},
preventSelection = function() { return false; },
// Given a list of DOM element ids and a list of percentage widths,
// assign each element a width allowing for a gutter between each
// pair. The number of gutters is ids.length - 1, and the total gutter
// width is gutterWidth * (ids.length - 1). Before calculating
// each width, subtract the total gutter width for the parent width.
parent = document.getElementById(ids[0]).parentNode;
if (!options.widths) {
var percent = 100/ids.length;
options.widths = [];
for (var i = 0; i < ids.length; i++) {
options.widths.push(percent);
};
}
if (!Array.isArray(options.minWidth)) {
var minWidths = [];
for (var i = 0; i < ids.length; i++) {
minWidths.push(options.minWidth);
};
options.minWidth = minWidths;
}
for (var i = 0; i < ids.length; i++) {
var el = document.getElementById(ids[i]);
if (i > 0) {
var pair = {
left: document.getElementById(ids[i - 1]),
right: el,
leftMin: options.minWidth[i - 1],
rightMin: options.minWidth[i],
dragging: false,
parent: parent
},
gutter = document.createElement('div');
gutter.className = 'gutter';
gutter.style.width = options.gutterWidth + 'px';
gutter.addEventListener('mousedown', startDragging.bind(pair));
parent.addEventListener('mouseup', stopDragging.bind(pair));
parent.addEventListener('mousemove', drag.bind(pair));
parent.addEventListener('mouseleave', stopDragging.bind(pair));
parent.insertBefore(gutter, el);
pair.gutter = gutter;
}
el.style.width = 'calc(' + options.widths[i] + '% - ' + options.gutterWidth/2 + 'px)';
}
},
"ready":function(){
this.split(['div1', 'div2'], {
widths: [25, 75],
minWidth: 200
});
}
});
</script>
</dom-module>
<splitter-element>
</splitter-element>
請簡化您的標題。另外，直接鏈接到小提琴 - 不要使用像tinyurl這樣的鏈接縮短器。 – kdbanman
嗨我試圖使用小提琴，但我得到一個代碼格式錯誤，我試圖解決它，但它不接受它。 –
您看到的錯誤包括代碼。你應該聽過那個錯誤信息，並且*把你的代碼包含在問題*中，而不是用鏈接縮寫來繞過它。 – kdbanman