jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

refactor 3-more into separate books

Browse source
This commit is contained in:
Ilya Kantor 2015-02-27 13:21:58 +03:00
parent bd1d5e4305
commit 87639b2740
423 changed files with 9 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

26
3-webcomponents/7-webcomponent-build/ui-slider.view/index.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="import" id="link" href="ui-slider.html">
<style>
ui-slider {
width: 300px;
margin: 10px;
}
</style>
</head>
<body>
<ui-slider min="0" max="1000" id="elem"></ui-slider>
<script>
elem.addEventListener("slide", function(e) {
value.innerHTML = e.detail.value; // = this.value
});
</script>
<div id="value">0</div>
</body>
</html>

2
3-webcomponents/7-webcomponent-build/ui-slider.view/jquery.html Normal file
View file

@ -0,0 +1,2 @@
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

56
3-webcomponents/7-webcomponent-build/ui-slider.view/ui-slider.html Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE HTML>
<html>
<head>
<link rel="import" href="jquery.html">
</head>
<body>
<template id="tmpl">
<style>
@import url(http://code.jquery.com/ui/1.11.3/themes/ui-lightness/jquery-ui.css);
:host {
display: block;
}
</style>
<div id="slider"></div>
</template>
<script>
!function() {
var localDocument = document.currentScript.ownerDocument;
var tmpl = localDocument.getElementById('tmpl');
var SliderProto = Object.create(HTMLElement.prototype);
SliderProto.createdCallback = function() {
var root = this.createShadowRoot();
root.appendChild(tmpl.content.cloneNode(true));
this.$slider = $(root.getElementById('slider'));
var self = this;
this.$slider.slider({
min: +this.getAttribute('min') || 0,
max: +this.getAttribute('max') || 100,
value: this.getAttribute('value') || 0,
slide: function() {
var event = new CustomEvent("slide", {
detail: { value: self.$slider.slider("option", "value") },
bubbles: true
});
self.dispatchEvent(event);
}
});
};
document.registerElement('ui-slider', {
prototype: SliderProto
});
}();
</script>
</body>
</html>