研究日誌

126：名無しさん：2014/02/20(木) 07:46:14: 【共通】スワイプ型ランチャー

またランチャーの話です。

こんどは、スワイプできる画面を持ったランチャーです。

外部ファイル（ｊｓとＣＳＳ）２つをGitHubからダウンロードして
以下のサイトを参考にＨＴＭＬを作成しました。

【スワイプでスライドするタッチスライダーを実装する「Swiper」】
http://tecuration.com/2013/06/swiper

【Swiperという軽量でレスポンシブ対応でスワイプ切り替えもできちゃうスライダー】
http://negimemo.net/1878

このＨＴＭＬファイルを使ってＢＡＳＩＣ！のテストプログラムを作成。
他のランチャーと同じロジックで呼び出し先ＨＴＭＬファイル名を変更
しただけです。

ツール名とツールの説明が書いてあるボックス部分がスワイプで左右に
動かせます。

ボックスのツール名をタップすると自作ツールが起動します。

テストプログラムはスワイプできるボックスの内容を３つしか用意していないので
2回スワイプすると最初のボックスに戻ります。

この方法だとボックスを増やしていけば、無限に追加が可能な形なので
いいかもしれません。

参考にしたサイトは、あくまで通常のＷＥＢを作成するためのサンプル
サイトですが、ちょっと読みかえれば、ＢＡＳＩＣ！のＨＴＭＬ画面と
して活用できます。

ＵＩを良くするためにもいいし、特殊な効果を実現するためにも便利なので
今後もＨＴＭＬ作成サイトはたまに見てなにかつくろうと思っています。

【スワイプ型ランチャー画面、テストプログラム、ＨＴＭＬ、ＪＳ、ＣＳＳ】
https://db.tt/o39YSOjb

2chMate 0.8.6/unknown/L01A/4.0.3/LT

新着レスの表示

※書き込む際の注意事項はこちら

※画像アップローダーはこちら

（画像を表示できるのは「画像リンクのサムネイル表示」がオンの掲示板に限ります）

掲示板管理者へ連絡無料レンタル掲示板