Forked from: s3012055's forked: konashi.js AC Drive Extension Board Exampl View Diff (1) forked: konashi.js AC Drive Extension Board Example s3011019 Follow 2014-11-25 11:58:22 License: MIT License Fork0 Fav0 View715 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 79 lines HTML 16 lines CSS 90 lines forked: konashi.js AC Drive Extension Board Example // forked from s3012055's "forked: konashi.js AC Drive Extension Board Example" http://jsdo.it/s3012055/b2Dh // forked from tokoro10g's "konashi.js AC Drive Extension Board Example" http://jsdo.it/tokoro10g/qs9b // forked from monakaz's "スライダー" http://jsdo.it/monakaz/aio_slider /*********************** * UI view functions ***********************/ var switchFlg=0; $(function(){ $("#slider").change(function(event){ var val = $(this).val(); $("#value").html(("00"+val).slice(-3)); $("#pane").css({height: val + "%"}); k.acdrive.updateDuty($("#slider").val()); if(val == 0){ switchFlg=0; }else{ switchFlg=1; } }); $("#button").bind('touchend',function(){ //k.acdrive.updateDuty(0); changeFlg(); if(switchFlg){ k.acdrive.updateDuty(100); $("#value").html(("00"+100).slice(-3)); $("#pane").css({height: 100 + "%"}); $("#slider").val(100); }else{ k.acdrive.updateDuty(0); $("#value").html(("00"+0).slice(-3)); $("#pane").css({height: 0 + "%"}); $("#slider").val(0); } }); /* $("#button").bind('touchstart',function(){ k.acdrive.updateDuty(100); }); */ k.find(); //k.showDebugLog(); k.ready(function(){ k.acdrive.init(k.acdrive.MODE_PWM,k.acdrive.FREQ_50HZ); k.acdrive.updateDuty($("#slider").val()); }); }); function changeFlg(){ if(switchFlg){ switchFlg=0; }else{ switchFlg=1; } } /************************************** * extend zepto for tap event handler * ref - http://zeptojs.com * #Creating plug-ins **************************************/ (function($){ $.extend($.fn, { tap: function(fn){ this.on("touchend", fn); return this; } }); })(Zepto); <div id="pane"></div> <div id="button"> <span>ON/OFF</span> </div> <input id="slider" type="range" class="bigslider-in" min="0" max="100" step="1" value="0"/> <div id="value">000</div> <!-- jquery --> <script src="http://zeptojs.com/zepto.min.js"></script> <!-- konashijs --> <script src="http://konashi.ux-xu.com/kjs/konashi-bridge.min.js"></script> <script src="http://konashi.tokor.org/ext/konashi-ext-acdrive.js"></script> forked: konashi.js AC Drive Extension Board Example * { margin: 0; padding: 0; border: 0; font-family: sans-serif; font-weight: bold; color: #fafdff; } body { background: #0068b7; text-align: center; } #slider { margin-top: 200px; width: 260px; } #value { font-size: 100px; margin: 20px; } #pane { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 0%; background: #e62f8b; z-index: -1; } #button { position: absolute; top: 20%; left: 50%; width: 180px; height: 50px; margin-top: -25px; margin-left: -90px; background: #e74c3c; text-align: center; line-height: 50px; font-size: 25px; cursor: pointer; } input[type="range"] { -webkit-appearance: none; outline: none; width: 250px; height: 10px; border-radius: 10px; position: relative; background-color: rgba(0, 0, 0, .8); border: 0; cursor: pointer; margin-top: 20px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 100%; background: #fcc800; } input[type="range"]::-webkit-slider-thumb:hover { background: #ffdc00; } input[type="range"]::-webkit-slider-thumb:active { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3); } input.bigslider-in { width: 200px; height: 60px; border-radius: 60px; } input.bigslider-in::-webkit-slider-thumb { width: 60px; height: 60px; } // forked from s3012055's "forked: konashi.js AC Drive Extension Board Example" http://jsdo.it/s3012055/b2Dh // forked from tokoro10g's "konashi.js AC Drive Extension Board Example" http://jsdo.it/tokoro10g/qs9b // forked from monakaz's "スライダー" http://jsdo.it/monakaz/aio_slider /*********************** * UI view functions ***********************/ var switchFlg=0; $(function(){ $("#slider").change(function(event){ var val = $(this).val(); $("#value").html(("00"+val).slice(-3)); $("#pane").css({height: val + "%"}); k.acdrive.updateDuty($("#slider").val()); if(val == 0){ switchFlg=0; }else{ switchFlg=1; } }); $("#button").bind('touchend',function(){ //k.acdrive.updateDuty(0); changeFlg(); if(switchFlg){ k.acdrive.updateDuty(100); $("#value").html(("00"+100).slice(-3)); $("#pane").css({height: 100 + "%"}); $("#slider").val(100); }else{ k.acdrive.updateDuty(0); $("#value").html(("00"+0).slice(-3)); $("#pane").css({height: 0 + "%"}); $("#slider").val(0); } }); /* $("#button").bind('touchstart',function(){ k.acdrive.updateDuty(100); }); */ k.find(); //k.showDebugLog(); k.ready(function(){ k.acdrive.init(k.acdrive.MODE_PWM,k.acdrive.FREQ_50HZ); k.acdrive.updateDuty($("#slider").val()); }); }); function changeFlg(){ if(switchFlg){ switchFlg=0; }else{ switchFlg=1; } } /************************************** * extend zepto for tap event handler * ref - http://zeptojs.com * #Creating plug-ins **************************************/ (function($){ $.extend($.fn, { tap: function(fn){ this.on("touchend", fn); return this; } }); })(Zepto); <div id="pane"></div> <div id="button"> <span>ON/OFF</span> </div> <input id="slider" type="range" class="bigslider-in" min="0" max="100" step="1" value="0"/> <div id="value">000</div> <!-- jquery --> <script src="http://zeptojs.com/zepto.min.js"></script> <!-- konashijs --> <script src="http://konashi.ux-xu.com/kjs/konashi-bridge.min.js"></script> <script src="http://konashi.tokor.org/ext/konashi-ext-acdrive.js"></script> * { margin: 0; padding: 0; border: 0; font-family: sans-serif; font-weight: bold; color: #fafdff; } body { background: #0068b7; text-align: center; } #slider { margin-top: 200px; width: 260px; } #value { font-size: 100px; margin: 20px; } #pane { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 0%; background: #e62f8b; z-index: -1; } #button { position: absolute; top: 20%; left: 50%; width: 180px; height: 50px; margin-top: -25px; margin-left: -90px; background: #e74c3c; text-align: center; line-height: 50px; font-size: 25px; cursor: pointer; } input[type="range"] { -webkit-appearance: none; outline: none; width: 250px; height: 10px; border-radius: 10px; position: relative; background-color: rgba(0, 0, 0, .8); border: 0; cursor: pointer; margin-top: 20px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 100%; background: #fcc800; } input[type="range"]::-webkit-slider-thumb:hover { background: #ffdc00; } input[type="range"]::-webkit-slider-thumb:active { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3); } input.bigslider-in { width: 200px; height: 60px; border-radius: 60px; } input.bigslider-in::-webkit-slider-thumb { width: 60px; height: 60px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author s3011019 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/oZA6/js"></script> application html5_elements&api slider Discussion Questions on this code? Tags application html5_elements&api slider