jQuery UI ドラッグ&ドロップで並び替え sortableの使用方法

sortable 概要 jQuery UIを使用して、ドラッグ&ドロップで並び替えを行います。 sortableを使用することで、一瞬で実装できちゃいます。 準備 まずは、 こちらからjQueryをダウンロードします。 次に、 こちらからjQueryUIをダウンロードします。 ダウンロードしたファイルをHTMLで読み込むよう以下のように指定します。 <li...
2016/02/24

jQuery UIでドラッグ&ドロップ draggableとdroppableの使用方法

draggableとdroppable 概要 jQuery UIを使用して、ドラッグ&ドロップを行います。 要素の移動やコピーをGUI操作で行うときなどに役立ちます。 準備 まずは、 こちらからjQueryをダウンロードします。 次に、 こちらからjQueryUIをダウンロードします。 ダウンロードしたファイルをHTMLで読み込むため、以下のように指定します。 ...
2016/02/24

Jquery ドラッグ&ドロップで画像をアップロードできる Doropzone.js

Doropzone.js 概要 Dropzone.jsは、Ajaxを利用した非同期で画像をアップロードできるJqueryライブラリ。 当記事では、複数のドロップ領域が必要になることを想定したコードを紹介しています。 ダウンロード 以下のダウンロードサイトより、ライブラリをダウンロードします。 Doropzone.js サイト Doropzone.js ダウンロード(Git...
2016/01/27
プログラミング参考サイト

プログラミング参考サイトを集めました

プログラミング参考サイト 当記事では、プログラミングに関するサイトを言語別に紹介しています。 各言語の入門・サンプル・関数一覧などがメインとなります。 これから言語を学習したいとき、 開発時に使用したい関数を忘れてしまったときなどに便利です。 サイト一覧 PHP PHP PHPBook eWeb そふぃのphp入門 PHP で WEB 作成...
2014/01/09
CSS3,HTML5

IE8以下でCSS3とHTML5の対応 - respond.js、html5shiv.js

respond.js、html5shiv.jsについて IE8以下では動作しない CSS3、HTML5でコーディングを行った場合、IE8などの古いブラウザでは有効になりまん。 今回は、IE8以下でCSS3・HTML5を有効にすることができるプラグインを紹介します。 これでIE8以下のブラウザでもレスポンシブWebデザインが実現できます! 設定も簡単で、JavaScriptのファイルを読込...
2014/01/09

jQueryでフォームの入力チェック - ValidationEngine

ValidationEngineとは 概要 ValidationEngineとは、Webページのフォームでバリデーション(入力チェック)を行うためのjQueryプラグインです。 バリデーションとは、入力された値が正しいかどうかチェックすることです。 例えば、電話番号入力欄に「足利尊氏」などと入っている場合はエラーにするなど、正しい形式か検証する処理です。 ことなる形式の値が入力された場合...
2013/11/21

Ajax の基礎知識

Ajax 入門 説明 Ajax とはAsynchronous JavaScript + XMLの略で、Ajaxライブラリを使用したJavaScriptのプログラミングです。 有名なライブラリは、prototype.jsやjQueryなどです。 Asynchronous とは「非同期」という意味です。 通常ブラウザとサーバーが同期してやり取りを行い処理されるのですが、このAjaxは非同期で...
2013/10/11

GoogleMapAPIで任意の地点間の距離を測る - JavaScriptサンプル

任意の地点間の距離を測る 内容 GoogleMapAPIを使用して、任意の地点間の距離を測るプログラムのサンプルを掲載します。 スタート地点から、複数の地点を経由して最終地点までのルートと距離を表示するという内容です。 仕様は以下の通りです。 予めスタート地点にマーカーを表示 地図内をクリックすると、そこまでのルートと距離を表示 クリックできる地点は最大8つ 完成イメージ ...
2013/10/08

JavaScriptでユーティリティクラスを作成

JavaScriptでユーティリティクラスの作成 アプリケーションが大きくなるとJavaScriptの保守性が悪くなってきます。。特に業務システムの場合、何万コードのJavaScriptが元気に絡み合いながら動いています。 開発初期から保守性や可読性を気にしていれば良かったのですが、どうしても開発当初はデスマになるのがSIの常でしょうか。。その場合「動けばOK」なノリでプログラミングしてし...
2013/09/04

JavaScriptの文字列に改行コードを入れる方法

「¥」を使用することで改行を含めることができる 以下のようにして変数に改行を含んだ文字列を格納することはできません。 <script type="text/javascript"> //<![CDATA[ var num = "1 2 3"; alert(num); //]]> </script> 上記のようにするとエラー...
2013/08/27
トップへ戻る