X-Tags滑块的 X-Tags 版本如图 9 所示：
图 9. 一个 X-Tags 滑块组件 滑块的 Polymer 实现和 X-Tags 实现从视觉上讲很难区分；我使用不同颜色来实现它们只是为了说明它们是使用不同框架实现的。清单 7 显示了 图 9中显示的应用程序如何使用滑块的 X-Tags 版本（也可以作为 x-slider实现） ：
清单 7. 使用 X-Tags 滑块组件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html>
<head>
<title>Slider with x-tag</title>
<link rel="stylesheet" type="text/css" href="x-slider.css" />
</head>
<body>
<x-slider id='slider'
slider-fill-color='rgba(50, 105, 200, 0.8)'
slider-stroke-color='navy'>
</x-slider>
</body>
<script type="text/javascript" src="lib/x-tag.js"></script>
<script type="text/javascript" src="lib/slider.js"></script>
<script type="text/javascript" src="x-slider.js"></script>
</html>
|
和 类似。这两个清单都使用了一个简单的 x-slider元素将滑块放入页面中。区别在于 Polymer 版本使用了 HTML 导入来包含定义该滑块的 HTML 片段，而 X-Tags 版本包括 JavaScript，因为它不支持 HTML 导入。
实现该组件的 JavaScript 如清单 8 所示：
清单 8. 滑块的 JavaScript1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| function getFirstAncestor(name, startingElement) {
var element = startingElement
, localName = element.localName;
while (localName !== name) {
element = element.parentNode;
localName = element.localName;
}
return element;
};
function getSlider(element) {
return getFirstAncestor('x-slider', element).slider;
};
xtag.register('x-slider', {
onCreate: function () {
var content =
"<div id='x-slider-buttons-div'>" +
"<button class='x-slider-button' id='x-slider-minus-button'>-</button>" +
"<button class='x-slider-button' id='x-slider-plus-button'>+</button>" +
"</div>" +
"" +
"<div id='x-slider-slider-div'></div>" +
"" +
"<div id='x-slider-readout-div'></div>";
stroke = this.getAttribute('slider-stroke-color'),
fill = this.getAttribute('slider-fill-color');
// 'this' is the x-slider HTML element
this.max = 100;
this.innerHTML = content;
this.slider = new COREHTML5.Slider(stroke, fill, 0);
this.slider.appendTo('x-slider-slider-div');
this.slider.draw();
},
events: {
'click:touch:delegate(#x-slider-plus-button)': function(event, slider) {
var slider = getSlider(this) // 'this' is the button
, value = getFirstAncestor('x-slider', this).getValue();
if (slider.knobPercent <= 0.9) {
slider.knobPercent += 0.1;
}
slider.erase();
slider.draw();
console.log(value);
},
'click:touch:delegate(#x-slider-minus-button)': function(event, slider) {
var slider = getSlider(this) // 'this' is the button
, value = getFirstAncestor('x-slider', this).getValue();
if (slider.knobPercent >= 0.1) {
slider.knobPercent -= 0.1;
}
slider.erase();
slider.draw();
console.log(value);
},
},
methods: {
getValue: function () {
// 'this' is the x-slider HTML element
return this.slider.knobPercent * this.max;
}
}
});
|
使用 中的 X-Tags 定义组件和使用 中的 Polymer 定义组件有很大的差别。X-Tags 完全使用 JavaScript 来定义元素，这涉及到使用字符串串联和设置一个元素的内部 HTML（以便设置成定制元素的内容）。这和 Polymer 形成鲜明对比，Polymer 在一个可读性更强的、更容易维护的 HTML 中定义定制元素内容。
X-Tags 没有类似 Polymer 的 $的属性，这使得它更易于访问定制元素中的元素，因此我必须实现一个 getFirstAncestor()函数来访问存放在专属滑块中的元素。
最后，X-Tags 为实现事件提供了支持，以便处理控制滑块旋钮的按钮单击；不过，对于此练习，该支持似乎有点大材小用。
为了完整起见，X-Tags 版本滑块的 CSS 如清单 9 所示：
清单 9. 滑块的 CSS1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| x-slider {
display: block;
}
.x-slider-button {
float: left;
margin-left: 2px;
margin-top: 15px;
margin-right: 5px;
vertical-align: center;
border-radius: 4px;
border: 1px solid rgb(100, 100, 180);
background: rgba(255, 255, 0, 0.2);
box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
cursor: pointer;
width: 25px;
height: 20px;
}
.x-slider-button:hover {
background: rgba(255, 255, 0, 0.4);
}
#x-slider-buttons-div {
width: 25%;
height: 100%;
}
#x-slider-slider-div {
position: relative;
float: right;
margin-top: -40px;
width: 80%;
height: 65%;
}
|
|
