
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
jQuery
2018.04.13
jQuery UI は、jQuery のプラグインの集まりで、jQuery UI を利用すると ドラッグ & ドロップ や 統一性のあるデザインなどを簡単に実現することができます。
今回は、jQuery UI の導入と使用方法を紹介します。
1.jQuery UI の導入
2.カレンダーを表示
3.ドラッグ & ドロップ
jQuery UI を導入する方法は、jQuery 自身と同様に「 ファイルをダウンロードして HTMLファイル内で読み込む方法 」と「 CDN を使用して HTMLファイル内でファイルを直接読み込む方法 」がありますが、ここでは CDN を使用する方法を紹介します。
※双方の違い等については、jQuery【 ダウンロード 】jQuery を使用するための準備をご参照下さい。
jQuery UI を利用する場合は、jQuery UI の CDNを使用して HTMLファイル内で次のように読み込みます。
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
jQuery UI のテーマページから デザインを選択することができます。
上記ページの左側に表示される「 ThemeRoller 」の「Gallery」タブをクリックすると、デフォルトのテーマの一覧が表示されますので、こちらからテーマを選択します。
( 一覧からテーマをクリックすると、右側にプレビューが表示され デザインを確認することができます。 )
ここでは HTMLファイル内で次のように読み込んで「 Sunny 」を選択してみます。
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css">
CDN のリンク先 URL は、jQuery UI の「 Blog 」ページで「 CDN 」で検索して、選択したテーマ( ここでは Sunny )のリンク先 URL を取得して下さい。
上記の CDN は「 jQuery CDN 」を使用していますが、「 jQuery CDNGoogle Ajax Libraries API 」や「 Microsoft Ajax CDN 」も同様に使用できます。
導入した jQuery UI を使用して、入力補助のカレンダーを表示します。
入力欄をクリックしてみて下さい。
先ほど選択したテーマ「 Sunny 」のデザインでカレンダーが表示されます。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <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/sunny/jquery-ui.css"> <script type="text/javascript"> <!-- $(function() { $("#wkCalender").datepicker(); }); //--> </script> <div style="background-color:#CCC; padding : 20px;"> 日付入力<input type="text" id="wkCalender"> </div>
「 datepicker 」は、jQuery UIのメソッドです。
HTML 要素を選択して datepicker メソッドを記述するだけで、入力補助のカレンダーが表示されます。
jQuery UI を使用して、ドラッグ & ドロップを実装します。
1 ~ 3 の BOX を、ドラッグ してドロップエリア にドロップしたり、ドロップエリアから外に出したりしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <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/sunny/jquery-ui.css"> <script type="text/javascript"> <!-- $(function() { // ドラッグ $(".box").draggable({ containment:"#dragArea" }); // ドロップ IN $("#dropArea").droppable({ accept:".box", drop: function(e, ui) { $("#infoArea").html(ui.draggable.text() + " IN" ); }, // ドロップ OUT out:function(event,ui){ $("#infoArea").html(ui.draggable.text() + " OUT" ); } }); }); //--> </script> <style> .box{width:40px;height:40px;text-align:center;} #box1{background-color:pink;} #box2{background-color:orchid;} #box3{background-color:skyblue;} #dragArea{background-color:#CCC; padding : 20px;} #dropArea{width:90%; height:100px; text-align:left; background-color:bisque;} </style> <div id="dragArea"> <div style="display:inline-flex; align-items: center;"> <div id="box1" class="box">1</div> <div id="box2" class="box">2</div> <div id="box3" class="box">3</div> </div> <div id="dropArea"> <p>ドロップエリア</p> </div> <div id="infoArea"> </div> </div>
「 draggable 」は、jQuery UIのメソッドです。
HTML 要素を選択して draggable メソッドを記述すると、指定した要素がマウスで移動できるようになります。
同様に「 droppable 」も jQuery UI のメソッドで、指定した HTML 要素が ドロップを受け入れ可能な要素となります。
droppable メソッド内の「 drop 」は、ドロップした時に実行されます。
同様に「 out 」は、ドロップエリアから出た時に実行されます。
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.