jQueryプラグインのPopEasyを使って簡単モーダル表示

簡単にモーダル表示 概要 モーダルウィンドウとは、なんらかの画面の子画面として生成され、開いている間は他の画面を操作できないインターフェースになっている画面です。 今回は、このモーダルウィンドウを簡単に設置することができるPopEasyというjQueryプラグインを紹介します。 画面遷移を行わずにメッセージや何かの情報を表示したり、入力フォームを表示したり、画像を拡大表示したいときなどに便...
2013/08/27

jQueryのいろいろなイベントについて

jQueryでよく使われるイベントの紹介 一番よく使われているクリックしたときに実行されるイベントです。 $("#selecter").click(function() { //クリック時の処理 }); 変更されたときに実行されます。 よくプルダウンなどで使用されます。 $("#selecter").change(function () { //変更時の処理...
2013/08/12

jQueryで可変グリッド・Masonryプラグイン

jQuery 可変グリッドの実装方法 概要 Masonryのプラグインを使うことで、簡単に可変グリッドのWebサイトを制作することができます。 また、今回ではスライダーで各コンテンツのサイズを調整できるようにしてみました。 Masonryプラグインの設定例 まずは、Masonryから「masonry.pkgd.js」を取得します。 今回は、シンプルで簡単な方法を紹介しています。...
2013/08/06

ブルブル震えるjQueryの紹介 jRumble

ブルブル移動する動作を実現 jRumbleというjQueryプラグインを使用して、画像や文字などをガクガクブルブル震える動作を行うことができます。 設定方法もとても簡単ですぐに出来るため、興味があれば試してみてください。 仕組みもシンプルで、JavaScriptでランダムな位置数を生成して、それをCSSのtopやleftに適用して移動させるという処理をsetIntervalを使って連続で...
2013/08/02

jQueryでiframeの縦幅を自動調整

iframeの縦幅を自動で調整する方法 概要 iframeの横縦の幅は、通常呼び出し元のページでサイズを指定します。 読み込みページの縦幅が可変する場合など、縦幅が呼び出し元ページで指定した縦幅を超えるとスクロール表示されてしまします。 スクロール表示されずに、すべて表示したい時もありますよね。 そんな時は、JavaScriptを使用します。 方法は簡単です。 iframeページが読...
2013/07/30

jQueryで簡単に吹き出しをポップアップ

マウスオーバーで吹き出しをポップアップ 概要 jquery.balloon.jsを使用して、マウスオーバーで吹き出しを簡単にポップアップで表示する方法の紹介です。 このjQueryプラグインは、シンプルでとても簡単に設置することができます。 また、カスタマイズも容易にできるためおすすめです。 当記事では、初めにサンプルコードを掲載し、各オプションの設定方法について説明していきます。 ...
2013/07/30

jQuery ドラッグ&ドロップで並び替え

jQueryで簡単にテーブルをドラッグ&ドロップで並び替える 概要 jQueryプラグイン、TableDnDを使用してテーブルの行をドラッグ&ドロップで並び替える方法を紹介します。 今回使用するプラグインは、いろいろな機能がありますが、ここでは一番シンプルな並び替えを行う機能のみを紹介します。 プラグインをダウンロードするとサンプルのHTMLがありますので、その他の機能はそちらをご覧くださ...
2013/07/25

TinyMCEの設置方法、機能の紹介 - WYSIWYG

TinyMCEの設置方法と機能を紹介します。 概要 TinyMCEとはJavaScriptで作られた、プラットフォームに依存しないWebベースのWYSIWYGエディタです。 高機能であり、Wordpressでも使用されているプラグインです。 WYSIWYGとは「見ているものが手に入る」という意味であり、作成・編集時にディスプレイ上で見ているものがそのままHTMLコードとして出力することがで...
2013/07/23

jQuery で本をめくるようなUIを実装

本をペラペラめくるようなUIを実装 概要 トップページのメイン画像のUIで、本をめくるような動きを実現できるプラグインを使用させていただきました。 使用したのは、「book block」というjQueryプラグインです。 設置も簡単で、様々な動作を実現することができます。 また、その他にも同じような本をめくるような動作をするjQueryプラグインをいくつかピックアップしてみま...
2013/07/16

jQueryからPHPを実行して処理を行う非同期処理

記事概要 jQuery からサーバーサイドスクリプトを実行 jQuery はクライアント上で動くプログラムです。 そのため、jQuery ではサーバーサイドで行う処理はできません。 サーバーサイドで処理を行いたい場合は、リクエストを送信してサーバーサイドのプログラムを実行し、結果を取得する必要があります。 つまり、画面遷移が必要になる訳です。 しかし、ボタンクリック...
2013/07/11
トップへ戻る