1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <title>Slider with Polymer</title> <script src="../polymer/polymer.js"></script> <script src="lib/slider.js"></script> <link rel="import" href="./slider.html" /> </head> <body> <x-slider id='slider' fillColor='goldenrod' strokeColor='red'> </x-slider> </body> </html> |
1 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 78 79 80 81 | <element name="x-slider" attributes="strokeColor fillColor"> <template> <style> x-slider { display: block; } .x-slider-button { float: left; margin-left: 2px; margin-top: 5px; 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); } #xSliderDiv { position: relative; float: right; width: 80%; height: 65%; } </style> <div id='x-slider-buttons-div' style='width: {{width}}px; height: {{height}}px;'> <button class='x-slider-button' id='xSliderMinusButton'>-</button> <button class='x-slider-button' id='xSliderPlusButton'/>+</button> <div id='xSliderDiv'></div> </div> </template> <script> Polymer.register(this, { width: 350, height: 50, strokeColor: 'blue', fillColor: 'cornflowerblue', ready: function () { var self = this, slider = new COREHTML5.Slider(this.strokeColor, this.fillColor, 0); setTimeout( function () { // This timeout is a hack slider.appendTo(self.$.xSliderDiv); slider.draw(); }, 200); this.$.xSliderMinusButton.onclick = function () { if (slider.knobPercent >= 0.1) { slider.knobPercent -= 0.1; slider.erase(); slider.draw(); } }; this.$.xSliderPlusButton.onclick = function () { if (slider.knobPercent <= 0.9) { slider.knobPercent += 0.1; slider.erase(); slider.draw(); } }; } }); </script> </element> |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |