ローディング画面を簡単に表示できるjQueryプラグイン「BlockUI」
イベント発生時にオーバーレイやメッセージ・ローディング画像といった、いわゆるローディング画面を簡単に表示できるjQueryプラグイン「BlockUI」を紹介します。 BlockUIによるローディング画面 １．機能 「BlockUI」は、例えばあるイベントが発生したときにオーバーレイやメッセージ・ローディング画像などを表示させる見栄えの変更とともに、ユーザーがページを操作できないようにブロックするプラグインです。 フォームの投稿直後など、ユーザーが操作できないようブロックしたいときに有効です。 サンプルを用意したのでご利用ください。サンプルに表示されているフォームボタンをクリックすると2秒ほどUIがブロックされます。 サンプル ページ全体のブロックだけでなく、特定の要素をブロックすることも可能です。 またブロック中はメッセージの他に、モーダルダイアログを表示することも可能です。 ２．プラグイ
jQueryでjsonデータを扱ってみる【入門編】
jQueryでjsonデータを扱ってみる【入門編】 javascriptで外部のWebサービスを利用するデータ形式はjsonを使うことが基本なようです。 似たようなフォーマットとしてXMLがありますが、こちらはHTMLと同じマークアップ言語なのですんなり入っていける反面、jsonは少々わかりずらいといった先入観があったりするんじゃないでしょうか。 そこで入門編と題して（入門編しかない!）改めて基礎から勉強していけたらと思います。 投稿日2010年07月25日 更新日2016年04月26日 とにかくシンプルなjson jsonデータは基本は外部から読み込むことになりますが、練習なのでとりあえずjavascript内の変数内に直に書きます。 「:（コロン）」で区切ったキーと値を一組として、２組目を「,（コンマ）」で区切って記述していきます。 それらを{}で囲むことで一つのオブジェクトとして扱い
初心者向けのjQuery入門講座
使い方 まず最初にチェックするコンテンツです。どのような考えをもとにプログラムを組み立てていくか、設計力を学びます。 サンプル 使い方で学んだことを生かして、簡単なサンプルの作成を学んでいきます。 プラグイン jQueryで利用できる便利なプラグインを紹介していきます。 リファレンス jQueryのリファレンスです。辞書代わりにご利用ください。 使用例 企業サイトでのjQueryの使用例を紹介していきます。 始めに jQueryはデザイナーにも利用しやすいjavaScriptプラグインです。このサイトはhtmlやcssを充分に理解しており、さらに基礎的なjavaScriptをマスターしている方を対象に記事を書いています。 現在はスマートフォン用のゲーム制作に注力しているため、本サイトの更新は休止状態（2014年3月が最終更新）です。ゲーム制作に関するブログ：スマゲー作るよ！はほぼ毎日更新し
CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。 | Ginpen.com
もちろん、そうでない方にも親しんで頂きたいと思います。 最近この記事が話題のようです。 CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました この記事中にjQuery 1.6/1.6.1での .attr()仕様変更がらみの話で、うちの「jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。」の記事へリンクされていました。 ただこの記事はちょっと中身が細かくて、ぱぱっと理解するのは難しいんじゃないかなあと思って、この記事を書いています。どこまでご理解頂けるかはわかりませんが、あっちの記事よりは読みやすいはず。 今さら感もないではないですが……。(´ω｀) jQuery 1.6/1.6.1で何があったの？ .attr()にまとめていた処理を .attr()と .prop()に分割した そしたら今まで動いていたも
jQueryを使った単語の絞り込み機能作成チュートリアル - MySkill Blog
MySkillでは、スキル名からユーザを検索することができます。フリーワード検索ではなく登録されているスキル名で検索するので、その単語一覧を絞り込む機能をJavaScript(jQuery)で実装しています。簡単なスクリプトなので、実装のチュートリアルとしてまとめてみました。 スキルシート/ポートフォリオの検索 方針 まず単語一覧があり、検索窓に入力すると一覧が絞り込まれていくUIを作成することが目標です。単語全てを羅列した上で絞り込むだけなので、都度検索をサーバに投げる必要がなく、JavaScriptだけで完結します。ただし単語数が多くなるとブラウザや環境によってはものすごく重くなるので、使いどころはよく考える必要があります。 HTMLの構成を決める jQueryで実装する 最適化 サンプルプログラム 欠点 HTMLの構成を決める 以下のHTMLで構成されたリストがあるとします。実際はu
S EJ is under construction
Thank you for being patient. We are doing some work on the site and will be back shortly.
jQueryで新しい要素を作成する方法
jQueryで新しい要素を作成する方法を紹介します。 ここでは新しい要素を作成方法と、新しく作った要素にコンテンツを加える方法、そしてウェブページに追加するまでの手順を解説します。 このエントリーはビギナーの方向けの内容です。 １．新しい要素を作る jQueryで新しい要素を作る場合、たとえばp要素を作るには、次のように作りたいタグを直接記述します。 var paragraph = $('<p>'); 次のように記述してもOKです。 var paragraph = $('<p></p>'); 空要素で記述してもOKです。 var paragraph = $('<p />'); jQuery1.3以前では要素を必ず「/」で閉じていなければいけなかったため、一番最初の書き方はNGでしたが、1.4以降では閉じなくても大丈夫になりました。 ２．新しく作った要素にコンテンツを追加する 新しく作った要
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。
imagesLoaded
imagesLoaded JavaScript is all like "You images done yet or what?" imagesloaded.desandro.com Detect when images have been loaded. imagesLoaded on GitHub 8,000 Edit this demo or vanilla JS demo on CodePen. Just to keep things interesting, there’s a 10% chance of adding a broken image. Install Download imagesloaded.pkgd.min.js minified imagesloaded.pkgd.js un-minified CDN <script src="https://unpkg.
レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント
先日エントリーした「ブラウザの幅に応じてレイアウトをきれいに整列できる「jQuery Masonryプラグイン」」の続きで、レスポンシブWebデザイン制作にjQuery Masonryプラグインを利用するための重要なポイントについて詳しく解説します。 サンプル（リンクは２項） 手前味噌ですが、jQuery MasonryによるレスポンシブWebデザインの記事は他にも多く存在する中、実用レベルまで踏み込んでいるのはおそらくこのエントリーだけだと思います。 なお、jQuery Masonryプラグインの基本的な設定方法については割愛してますので、上記のエントリーを参照してください。 １．はじめに このエントリーでは「NHKスタジオパーク」のサイトを参考に、次の内容について解説します。 NHKスタジオパーク まず、カラムレイアウト全体をセンタリングさせるためのCSSの設定について紹介します。 ま
レスポンシブWebデザインで折りたたみメニューに切り替える | 1：n – DETELU Blog
レスポンシブWebデザインでサイトを作る場合に、メディアクエリとjQueryを使ってメニューの表示を切り替えるものをちょこっと作成。 画面サイズが大きい時は横並びのメニュー、小さい場合は折りたたみメニューにする、という簡単なものです。 レスポンシブWebデザインで折りたたみメニューに切り替える 動きとしてはメディアクエリで表示、非表示等を変更、折りたたみメニューのときは「MENU ▼」をクリックしたときにjQueryでclassをつけたり削除したりしています。 にしてもスマートフォンも混沌としてきましたねぇ。ios、android、windows phone、Tizen、Firefox OS等々、OS自体の数が増え、これからスマートフォンブラウザもいろいろでてくるんでしょうねぇ。。。ふうう。。。 <div class="menubtn">MENU ▼</div> <nav id="menu
FlexNav – Jason Weaver
A jQuery plugin for responsive menus FlexNav 1.3.3 jQuery plugin is no longer supported. I have plans to make a non-jQuery version 2 soon.
Fluid full window width carousel with truncated previous and next images
You are now viewing this carousel: #02Fluid full window width carousel with truncated previous and next images HTML <div id="wrapper"> <div id="carousel"> <img src="img/building1.jpg" alt="building1" width="990" height="450" /> <img src="img/building2.jpg" alt="building2" width="990" height="450" /> <img src="img/building3.jpg" alt="building3" width="990" height="450" /> <img src="img/building4.jp
jQueryでcookieを簡単に使える「jQuery Cookie」のまとめ
jQueryでcookieを簡単に使える「jQuery Cookie」の利用方法のまとめです。 １．機能 名前のとおり、「jQuery Cookie」はjQueryでcookieを簡単に使うためのjQueryプラグインです。 JavaScriptでは値のエンコード・デコードやpathやexpireの結合、取得時の操作など、cookie処理が結構面倒なのですが、このプラグインを利用すれば簡単に扱えるようになります。 ２．プラグインのダウンロード githubの「jquery-cookie」のページにある「ZIP」をクリック。 これでアーカイブをダウンロードできます。 ３．基本的な使い方 jQueryと、ダウンロードしたアーカイブに含まれるjquery.cookie.jsを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jqu
画像も動画もGoogle Mapsもあらゆるコンテンツを拡大表示するスクリプト -iLightBox | コリス
画像をはじめ、画像ギャラリー、そして動画、HTMLコンテンツ、外部サイトなど、あらゆるコンテンツを拡大表示するjQueryのプラグインを紹介します。 あらゆるコンテンツをサポートします。 画像、画像ギャラリー、動画（HTML5, YouTube, Vimeoなど）、Flash/swf, Google Maps, iFrame, AJAX, Alert/Confirm/Promptなど 主要なブラウザ全てをサポートします。 IE7/8/9/10, Firefox, Chrome, Safari, Opera iOS4+, Android 主要なデバイスを全てサポートします。 デスクトップ・タブレット・スマートフォン スワイプ操作やRetinaディスプレイもサポートしています。 iLightBoxのデモ デモではあらゆるコンテンツをiLightBoxで拡大表示します。 まずは、画像一枚を拡大表
node.jsを使ってjQueryチックにWebサイトをクローリングする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも僕です。 今日は、サーバサイドJavaScript（node.js）でjQueryチックにDOMを操作して、Webサイトをクローリングする方法についてまとめようと思うよ！ 要は、既存のWebサイトから必要な情報を収集してきて、データベースに突っ込もうということ。 これができると何がうれしいかって、簡単にまとめサイトが作れるんだよね。 クローリングする方法は数々あれど、なにゆえサーバサイドJavaScriptのnode.jsを使ってこれをするかというと、「クローリング対象の部分をjQueryのセレクタで指定できる」のが大きいわけです。 みんな、好きだよね！jQuery！とっても便利だよね！jQuery！ 好みにもよるかと思うが、JavaScriptのようなふにゃふにゃした言語をあえて使う理由は、クライアントサイドプログラミングを組むか、JQueryの恩恵を受けるためといっても過言ではあ
jQuery 1.9 で変わったところを調べてみる。 | バシャログ。
引越しの準備がままならないminamiです。 jQuery1.9 が正式にリリースされました。すでにベータ版として発表されているjQuery 2.0 はIE6/7/8に対応しないことを謳っているため、これらのブラウザ対応をする場合は1.9 を使っていくことになりますね。 jQuery1.9 で変更があった機能を見ていきたいと思います。 どう変わったの？ jQuery 1.9でアップグレードされた機能は下記ページにまとまっています。 jQuery Core 1.9 Upgrade Guide 主要なところを抜粋してみます。 toggle(function,function,...) の廃止 間違えそうですが、表示/非表示のtoggle()は使えます。 jQuery.browser() の廃止 だいぶ前からなくなるよ、と言われていましたが、とうとう廃止に。jQuery.supportや、Mod
jQuery Mobile 1.3β公開。レスポンシブなテーブル、グリッド、追加コンポーネントなど大幅強化
HTML5のマークアップだけでモバイル対応のWebアプリが構築できるJavaScriptフレームワークのjQuery Mobile。レスポンシブWebデザインにフォーカスし大幅に強化された新バージョンjQuery Mobile 1.3βが公開されました。 jQuery Mobile 1.3では、表示幅に対応して自動的にフォーマットが変化する「Responsive tables」や「Responsive grids」、1つのスライダーで値を2つ設定できる「Range Slider」、新しいウィジェットの「Panel」をはじめ、多くの機能追加が行われています。 ブログでは、今回のバージョンでレスポンシブWebデザインにフォーカスする経緯について、以下のように説明しています。 We’ve seen the question “What should I use: RWD or jQuery Mo
スマートフォン端末向けにtel:を仕込む小技 - inkdesign
05 Dec 2012 ※この記事は、軽めのjQuery Advent Calendar 2012の５日目の記事です。 スマートフォン端末のブラウザでは、tel:スキーマを<a href="tel:0120-0000-0000">お問い合わせはこちら</a>というように利用することで、ブラウザ上でタップして電話をかけることができるようになる。 しかし、これをデスクトップブラウザで実装してしまうと、クリックした時に不明なプロトコルとしてエラーとなってしまう。 これが問題となる可能性があるのは、いわゆるレスポンシブ・ウェブデザイン的なアプローチで、モバイルブラウザとデスクトップブラウザでHTMLを一本化してしまうような場合だ。1 カスタムデータ属性を使ったアプローチ 前提として下記のようなマークアップをおこなう。 お問い合わせは<span data-tel="0120-9999-9999">お
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これからのWeb制作に使える、面白いUIを実装できるjQuery・CSS集
