Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
プラグイン不要のjQueryとCSSを使った簡単なモーダルウィンドウの実装方法をご紹介します。 まずはサンプルをご覧ください。 モーダルのサンプル See the Pen simple modal window01 by RECOOORD (@recooord) on CodePen. See the Pen simple modal window01 by RECOOORD (@recooord) on CodePen. 上記2つのサンプルはHTMLの文章量が異なるだけで、CSSとjQueryは同じコードを使っています。 特徴としては、文章量が少ない場合は、ブラウザ中央に表示され、文章量が多い場合はモーダルをスクロールして閲覧することができます。 HTML <!-- モーダルを開くボタン --> <div class="modal-open">モーダルを開く</div> <!-- モーダ
DataTablesはHTMLの<table>をデータグリッドにするためのライブラリで、 下記のような特長があります。 素の<table>に下記の機能を手っ取り早く追加することができる 件数制限機能 ページング機能 (10件ずつ表示してページ切り替えするなど) ソート機能 (列の見出しをクリックして並び替え) フィルタ機能 (全データのキーワード検索) スクロール機能 (表が大きい場合にスクロールバーを追加する) サーバからのデータ(JSON)読み込みと表示ができる 外観がまとも (下記のようにBootstrapの外観に合わせることも可) ※ 編集機能もありますが有償です。 ライセンスはMITで、使用するにはjQueryが必要です。 この文書では、DataTablesの基本的な使い方を説明します。 (列や行の移動、列固定、無限スクロールなどの拡張機能がいろいろありますが、この文書では説明し
フローティングアイテムをフッターの上で止める方法です。フッターと色が被ったりしてフッター上で止めるという実装もたまにやりたくなります。 jQueryを使ってフッターの高さやスクロールの位置をゴリゴリと取得していくというやり方ですね… 動きとしては以下のような感じになります。（右下の「トップへ」というボタンが固定されています）
Ajax通信の開始／終了／成功／失敗のタイミングで任意の処理を差し挟む際に利用するグローバルイベントを、現在の通信だけ対象外にする方法を説明する。 ← 前回 連載 INDEX 次回 → jQueryでは、グローバルイベントと呼ばれる仕組みを利用することで、Ajax通信の開始／終了／成功／失敗のタイミングで、任意の処理を差し挟むことが可能になります。具体的な実装については、別稿「TIPS：非同期通信の開始／終了／成功／失敗のタイミングで処理を実行するには？」で解説しているので、併せて参照してください。 もっとも、グローバルイベントが一様に全てのAjax通信に適用されてしまうのが望ましくない場合もあります。そのような状況では、$.ajaxメソッドのglobalパラメーターをfalseとすることで、現在の通信だけをグローバルイベントの対象外にできます。 以下は、先述の別稿で作成したget.htm
ajaxって便利ですよね。 非同期でコンテンツを追加読み込みする際は必須の手法です。 あまりない状況かと思いますが、今回ajaxで読み込んだコンテンツの高さを取得する必要がありました。 しかもajaxの実行はループ内（each関数）で数回行うという合わせ技です。 処理の順序としては、 （１）ajaxでコンテンツ読み込み。を数回繰り返し。 （２）読み込んだ各コンテンツの高さ取得。をまた数回繰り返し。 です。繰り返しの繰り返しです。 が、この処理の実行順序がなんとも不安定。 かつ、（２）の処理が（１）の実行途中で先走っている始末。 ダメダメの繰り返しじゃんってことで調べました。 ajaxCompleteで解決！と思いきやajaxCompleteを使えば、ajax処理が完了した時点で着火します。 用途はこんな感じです。 $(document).ready(function(){ //コンテンツ読
input[type="file"]をAjaxで送信したい時 普通にAjaxを使って送ると、ファイルが文字列になってしまい form.submit()した時と違うのでハマったのでメモ。 どうやら FormData を使い Ajaxが自動的に送信データを整形する機能をOFFにすれば form.submit()と同じデータで送れるようです。 ■ フォーム <form id="myForm" name="myForm" method="post" action=""> <input type="file" name="file" id="formFile"/> <input type="text" name="text" id="formText"/> <textarea name="textarea" id="formTextarea"></textarea> <input type="sub
正直、表示だけするならどれも高機能で大差ないと思う。 ただ、多くのグリッド系ライブラリは、高機能な代わりに遅い＆書きにくかったり、編集機能はあるものの表示→編集モードへの切り替えがもっさりしていたり保存機能が書きにくかったりする。 その中で高速な表示、Excelかのような編集機能を備えているのがSlickGridだ。 「Excelみたいにできないの？」とはよく言われることでその言葉にそんな簡単じゃねーんだよ、とイラッとしたことがある人も多いかと思うが、SlickGridを使うことでお互いストレスフリーな関係を築けるだろう。 では、SlickGridのパワーが実感できる例を紹介したい。 1.パフォーマンス このExampleで表示しているデータは、なんど500,000件である。他のグリッドが数万件表示可能！と言っているそばで、ケタが違う。何せExcel(2003)の限界行より多いんだからビッ
既存のフォームにバリデーション等何かしらの処理を挟みたい場合、jQuery を使えば簡単に実現できます。 実装方法 例として、まず下記のような単純なフォームがあるとします。 <form method="post" action="/hoge/confirm/"> <input type="text" name="name" /><br /> <input type="tel" name="name" /><br /> <input type="fax" name="name" /><br /> <input type="submit" value="送信" /> </form> 通常であれば、送信ボタンを押したら /hoge/confirm/ にすぐに遷移してしまいますが、ここで送信前に一旦処理を挟みたいと思います。 間に挟む処理の引数で処理完了時のコールバック関数を指定できる場合 間に挟
ここでは、iPhone, iPad, Android 系端末で画面の縦横に応じて出力する HTML を切り替えたり、縦横の切り替わり時に発生するイベントを捕捉して何らかの処理を行うサンプルスクリプトを掲載しています。 縦横に応じて読み込むスタイルシート ( css ) を切り替える 画面の縦横に応じて、それぞれ読み込ませるスタイルシートを切り替えるには、以下のようにスタイルシートを設定します。なお、IE などのデスクトップ用のブラウザでは、画面の表示領域の大きさを縦長にしたり、横長にしたりすることで読み込む css が切り替わっていることを確認できます。 <head> <meta charset="UTF-8"> <title>iPhone/iPadで縦と横の時の読み込むスタイルシートをそれぞれ設定する</title> <meta name="viewport" content="widt
Webページのスクロールに合わせて要素を表示させるjQueryプラグイン［Scrolla］を紹介します。 同様の機能を持つプラグインでは［ScrollReveal］や［jquery.inview］または［WOW.js］などが有名ですが、これらと肩を並べて秀逸なので自信を持ってオススメできます。 実際に使ってみたサンプルは コチラからどうぞ。 Download : https://github.com/maximzhurkin/jquery-scrolla 導入方法は以下より。 ［Scrolla］のアニメーション部分は［animate.css］に依存します。 つまり必要になるファイルは3つ。 animate.css jquery.js scrolla.jquery.min.js これらのファイルを予め読み込んでおきます。 <link rel="stylesheet" href="animat
数字をカウントアップできるjQueryプラグイン「jquery-numerator.js」を紹介します。
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く