を超簡単に作ることに成功しましたのでメモしておきます☺
超簡単スライドスイッチ
実際のスイッチはこれです。（クリックすると切り替わります。）
↓
編集スイッチ：
OFF
クリックするとONとOFFになります。
で、どう作ったかというと・・・
作り方
inputで「type=button」を作ります。
inputボタンの角を「border-radius: 20px;」で丸くします。
inputボタンの値を「○ 」で背景をグレーにします。
あとは、JavaScriptでボタンが押されたときに、
「○ 」と「 ●」をボタンのValueとして切り替えています。
ちなみに「 」の部分は全角スペース２個です。
また、背景色も切り替え、ボタンの横のspanの文字列もON↔OFFを入れ替えています。
JavaScriptでボタンがON状態だったらと効く場合も ==’ ●’ と判断しなければなりませんが、機能的にはスライドスイッチの機能を満たしています(^^)/
JavaScript
HTML側
<script>
function chgSwitch(){
var mys = document.getElementById('switchsw');
if (mys.value=='○ ') {
mys.value=' ●';
mys.style.backgroundColor = 'gray';
document.getElementById('switchm').innerHTML='OFF';
writeSpreadsheet();
} else {
mys.value='○ ';
mys.style.backgroundColor = 'yellow';
document.getElementById('switchm').innerHTML='ON';
}
}
</script>HTML側
編集スイッチ：
<input id="switchsw" onclick="chgSwitch();" style="background-color: grey; border-radius: 20px;
font-size: larger;" type="button" value="○ " />
<span id="switchm">OFF</span>そもそも今更なぜか？
そうなんです。今更GAS（Google Apps Script）でHTMLを出力しながらスプレッドシートに保存したりする仕組みを知りました。
私としては、超小規模なWebシステムが簡単に作れる仕組みを発見してしまいました・・・
そして、それはとても大きな海ですね・・・可能性が広がりすぎますね。また、知らないことも沢山あります・・・
ExcelVBAでは実現できない部分ができる感じでとても衝撃を受けています！！
いろいろと試していこうと思います！！
0 件のコメント:
コメントを投稿