
スキルアップ
2021.04.15
社会人におすすめなプログラミングスクールの条件とは?目的別25校と選び方
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
jQuery
2018.06.29
slider や sortable など、jQuery UI で用意された機能を利用すると、ドラッグや並び替え等 複雑な動作を短いコードで実装することができます。
ですが、スマートフォンのようなタッチデバイス上では期待した動きが望めない事もあります。
そこで今回は、タッチデバイス上でも マウスやキーボードの操作と同様に動かせる実装方法を紹介します。
1.jQuery UI Touch Punch
2.タッチイベント対応の slider
3.タッチイベント対応の sortable
jQuery UIをタッチデバイスに対応させるためのjQuery UI Touch Punchというライブラリがあります。
今回は、このjQuery UI Touch Punch を使用して タッチイベントに対応するシステムを作成します。
jQuery UI Touch Punch をダウンロードして使用する場合は、ダウンロードサイトから、jquery.ui.touch-punch.min.js ファイルをダウンロードして 任意の場所に保存し、次のように読み込んで使用します。
<script type="text/javascript" src="保存場所/jquery.ui.touch-punch.min.js"></script>
jQuery UI Touch Punch の CDN を利用する場合は、次のように記述して jquery.ui.touch-punch.min.js ファイルを直接読み込んで使用します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
こちらから最新バージョンをご確認下さい。
jQuery UI と共に jQuery UI Touch Punch を読み込んで、タッチイベントで動作可能なスライダーを作成します。
スライダーをタッチイベントで動かしてみて下さい。
また、タッチイベントに対応していないスライダーと比較してみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#wkSlider").slider(); }); //--> </script> <div style="background-color:#CCC; padding : 30px 50px;"> <div id="wkSlider"></div> </div>
jQuery UI Touch Punch を読み込むだけで、タッチイベント対応のシステムとなります。
jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。
今度は、タッチイベントで ドラッグ&ドロップによる並べ替えが可能となるように実装します。
次の 5 項目を、タッチイベントによるドラッグ&ドロップで入れ替えてみて下さい。
また、タッチイベントに対応していないものと比較してみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#sortableArea").sortable(); }); //--> </script> <div style="background-color:#CCC; padding : 20px 20px 10px;"> <div id="sortableArea"> <div class="ui-state-default">1</div> <div class="ui-state-default">2</div> <div class="ui-state-default">3</div> <div class="ui-state-default">4</div> <div class="ui-state-default">5</div> </div> </div>
スキルアップ
2021.04.15
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
スキルアップ
2021.04.15
Webディレクターとは、Webサイト制作や、企画、運用の現場においてリーダーの役割を担う職種です。多くの業務をこなすため大変な仕事ではありますが、その分やりがいや魅力もある仕事です。本記事では、Webディレクターの具体的 […]
スキルアップ
2021.04.14
IT業界やエンジニアという職種に対してなんとなくイメージは持っているものの、具体的にどんな仕事をしているのか詳しく知らないという方もいらっしゃるでしょう。本記事では、IT業界とはどんな業界なのかをわかりやすく解説。各業種 […]
スキルアップ
2021.04.02
IT業界未経験からITエンジニアへ転職しようとするとき、強い味方になってくれるのが資格です。IT系の資格試験には数多くの種類があり、取得することでスキルの証明が可能。本記事では、未経験者が就職を有利にするためのおすすめ資 […]
スキルアップ
2021.04.01
「プログラミングができると就活が余裕らしいけど、大学生のうちにプログラミングを学ぶメリットって何?」と考えている方に向けて、本記事では元エンジニアである筆者がこれまでの経験則をもとに、在学中にプログラミングを学習するメリ […]
スキルアップ
2021.04.01
【2021年最新】いざJava SE 11のBronze資格にチャレンジしようと思っても「申込方法が複雑すぎて難しい…」と困っている方も多いのでは?本記事では、2020年に新しくなったOracle認定Javaプログラマ試 […]
INTERNOUS,inc. All rights reserved.