Lightbox・モーダルウインドウ関連 / Bootbox.js / Bootstrap-modal他...全17件
Bootstrapに便利な機能を追加できるjQueryプラグインまとめ
Lightbox・モーダルウインドウ関連 / Bootbox.js / Bootstrap-modal他...全17件
[JS]複数のCSSアニメーションを簡単に組み合わせて利用できるスクリプト -animo.js
Rotate then flip out それぞれのパネルを回転させ、異なるタイミングでめくってフェードアウトさせます。 animo.jsの使い方 Step 1: 外部ファイル animo.jsはjQuery 2+で動作し、animate.cssを含む60以上の美しいアニメーションをコントロールできます。 head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script> <script src="animo.js" type="text/javascript"></script> <link href="animate+animo.css" rel="stylesheet" type=
[JS]ブログの記事を読み終えたユーザーに、シェアなど次のアクションを促すスクリプト -jQuery Engage
WordPressで作られたブログなどでスクロールして記事を読み終えた時に、その記事をシェアするボタン、記事へのコメント入力フォーム、メールニュースなどの告知を配置したパネルを下からアニメーションで表示するjQueryのプラグイン、いやWordPressのプラグインと言った方がいいのか、を紹介します。 デモページ：記事を読み終えたとこ パネルには左から、コメント、ソーシャルメディア、メールニュースが配置されており、これはカスタマイズできます。 jQuery Engageの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※WordPressなのでjquery.jsは既に利用していると思いますが、無ければ追加してください。 <script src="js/dist/jquery.engage.min.js" type="text/javasc
[JS]複数のエレメントをスクロールしても指定した場所に留まらせるスクリプト -ハチ公
デモページ：一番下までスクロール 「Hachi, stay!」ボタンをクリックすると、復活します。 ハチ公の使い方 実装は非常に簡単で、複数の要素にハチ公を適用することもできます。 Step 1: 外部ファイル 「jqeury.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.hachiko.1.0.0.min.js"></script> Step 2: HTML HTMLは通常通りに実装し、ハチ公を適用するエレメントがスクリプトで指定できるようにidなどを付与します。 例：id=sticky <div id="sticky">Click me to see how the state i
Glide.js
シンプル・軽量で、レスポンシブ対応、タッチデバイス対応、スワイプもキーボード操作にも対応したカスタマイズにも優れたOOCSSベースでマークアップされたスライダーを実装するjQueryのプラグインを紹介します。 Glide.js Glide.js -GitHub Glide.jsのデモ Glide.jsの使い方 Glide.jsのデモ デモはスマフォ・タブレットをはじめ、最新のモダンブラウザでご覧ください。 スライドのエフェクトにCSS3を使用していますが、IE8などの古いブラウザでも代替のエフェクトで動作します。 デモページ Glide.jsの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></
[JS]スクロールした際に見出しや画像やエリアなどが見切れるのを自動補正するスクリプト -Scrollsnap
ユーザーがページをスクロールした時、見出しや画像が見切れてしまう、ストライプの背景で違うカラーが少し見えてしまうなど、ちょっとだけスクロール位置がうまくない時に自動で補正するjQueryのプラグインを紹介します。 Scrollsnap Scrollsnapの特徴 Scrollsnapのデモ Scrollsnapの使い方 Scrollsnapの特徴 Srollsnapはスクロールでのユーザエクスペリエンスを強化するjQueryのプラグインで、ページ内の指定したポイントの上下でスクロール移動が止まってしまったら、自動的にちょうどいい位置にスナップさせます。 スナップ時のポイントはclassで設定可なので、テキスト・見出し・画像をはじめ、div要素やarticle要素などにも設定できます。 対応ブラウザ デスクトップ用の最新のブラウザをはじめ、IE9、スマフォ用のSafariにも対応しています。
[JS]フォームのselect要素をHTMLの変更無しで、ミニマルに美しく使いやすくするスクリプト -Minimalect
フォームのselect要素をHTMLには手を加えずに、美しいミニマルなデザインを適用し、使いやすさもアップさせるjQueryのプラグインを紹介します。 デザインのテーマも用意されており、オリジナルのテーマをスタイルシートベースでつくることもできます。 Minimalect Minimalectの特徴 Minimalectのデモ Minimalectの使い方 Minimalectの特徴 select要素を洗練されたデザインに置き換えます。 optgroupsのサポート。 フィルタリングのサポート。 キーボードナビゲーション。 テーマのサポート。 Minimalectのデモ HTMLの変更は無しで、select要素を美しく、そして使いやすくしたデモがあります。 まずは、一つ目。
Qiitaのtextarea自動補完がOSSになりました - Qiita
$('textarea').textcomplete({ // mentionは単なる名前で意味はありません。 // 分かりやすい名前をつけてください。 mention: { // 必須設定 match: /(^|\s)@(\w*)$/, search: function (term, callback) { // callback には文字列の配列を渡す $.getJSON('/search', { q: term }) .done(function (resp) { callback(resp); }) .fail(function () { callback([]); }); }, replace: function (value) { return '$1@' + value + ' '; }, // 任意設定（下記はいずれもデフォルト値） index: 2, maxCount:
[JS]ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させるスクリプト -SMINT | コリス
SMINT SMINTの使い方 Step 1: 外部ファイル スクリプトを外部ファイルとして記述します。 <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.smint.js"></script> </head> Step 2: HTML まずは、最上部に配置されるナビゲーションから。 <div class="subMenu" > <div class="inner"> <a href="#" id="sTop" class="subNavBtn">Home</a> <a href="#" id="s1" class="subNavBtn">Section 1</a> <a href="#" id="s2" c
複数ページにも対応とは！ページに分かりやすいプロダクトツアーを加えるフレームワーク -Hopscotch
ページに分かりやすく、プロダクトツアーを加えるフレームワークを紹介します。 似たようなスクリプトはたくさんありますが、これはツアー移動のアニメーション、ツアーを戻る、そして複数ページにも対応しています。 1ページ内でのツアーでけではなく、複数ページを横断するツアーも作成できます。 Hopscotch Hopscotch -GitHub Hopscotchの特徴 Hopscotchのデモ Hopscotchの使い方 Hopscotchの特徴 イベントのコールバック ツアー中のさまざまなイベントのコールバックを装備。 マルチページ対応 HTML5のストレージやクッキーを利用して、複数ページにまたがるツアーも可能。 i18n対応 さまざまな言語での実装をサポート。 快適なレスポンス 一つひとつは軽量なインスタンス。 Hopscotchのデモ ページ自体がデモになっています。 中央下の「Tale
フォームの入力欄にテキストを表示する際、ユーザーが使いやすくよりセマンティックに実装する方法
フォームの入力欄にテキストを表示するテクニックとして、HTML5のplaceholder属性やtitle属性にいれたテキストをスクリプトで置き換える方法などがあります。 しかし、placeholderはplaceholderなので、ラベルの代替として利用するのはW3Cでも推奨していません。 参考：The placeholder attribute -W3C フォームに余分なHTMLを追加せず、ラベルを利用してシンプルに解決する方法を紹介します。 入力時はラベルがツールチップで 実装 実装のポイント label要素内のテキストをラベルとして利用する。 初期状態でラベルのテキストを表示する。 入力時にもラベルがユーザーの目に見えるようにする。 ラベルの配置はフォームとページのレイアウトで行われるようにする。 スクリプトが利用可能でない時でも、ラベルを利用できるようにする。 これらのポイントを踏
WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
[JS]手書き風のシーケンス図をウェブページに簡単に設置できるスクリプト -JS Sequence Diagrams | コリス
Demo 3 JS Sequence Diagramsの使い方 Step 1: 外部ファイル JS Sequence Diagramsの実装には、「Underscore.js」と「Raphaël」が必要です。 <script src="raphael-min.js"></script> <script src="underscore-min.js"></script> <script src="sequence-diagram-min.js"></script> Step 2: HTML シーケンス図を描画するエリアを確保します。 <div id="diagram"></div> Step 3: JavaScript スクリプトでテキストを書き、実行します。 <script> var diagram = Diagram.parse("A->B: Message"); diagram.dra
一味違ったパララックスを実装するスクリプト -Parallax.js | コリス
シンプルな実装で、ウェブページに奥行きを与えるパララックスを実装するjQuery/Zeptoの軽量プラグインを紹介します。 スマフォやタブレットの傾きに対応しているだけでなく、摩擦係数なども設定できるので、一味違った面白いことができそうですね。 Parallax.js Parallax.js -GitHub Parallax.jsのデモ Parallax.jsの使い方 Parallax.jsのデモ パララックスは複数の画像を異なるタイミングで動かして視差効果を生み出すもので、デモは奥行きの表現がすごいので少し酔うかもしれないのでご注意ください。 iPadだと傾けるだけで、ゆらゆらと Parallax.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.min.js"></script>
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 | WebNAUT by Beeworks
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための
[JS]複数のパネルを1ページに垂直に配置した際にベストポジションにスクロールを補正するスクリプト -jQuery.panelSnap
Event Capturing 各イベントを取得することもできます。 jQuery.panelSnapの使い方 Step 1: 外部ファイル スクリプトをhead内に外部ファイルとして記述します。 <head> ... <script src="/path/to/jquery.js"></script> <script src="/path/to/jquery.customEvents.js"></script> <script src="/path/to/jquery.panelSnap.js"></script> </head> Step 2: HTML コンテンツは一つずつsection要素（変更可能）で並列に配置します。 スタイルシートは各コンテンツ自由にしてください。 <body> <section>コンテンツ：1</section> <section>コンテンツ：2</sect
[JS]Google Analyticsを使ったABテストが簡単に実装できるスクリプト -easyAB
ランディングページやバナーなどで、クリックされるテキストはどっちだろう？ カラーを変えるとクリック率があがる？ など、どちらがより効果的か検証することができるABテストを簡単に実装できるjQuery（Zeptoにも対応）の超軽量（2KB）プラグインを紹介します。
[JS]紹介せずにはいられなかったｗ、料理画像を出来たてほやほやのおいしそうに見せるスクリプト -Audero Smoke Effect
ほわーんとした煙 Audero Smoke Effectの使い方 Step 1: 外部ファイル head内に、jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../src/jquery.auderoSmokeEffect.js"></script> </head> Step 2: HTML スクリプトでその要素を指定できるようidなどを付与しておきます。 <img id="chicken" src="images/chicken.png" /> Step 3: JavaScript jQueryのセレクタで要素を指定し、アニメーションで表示する画像（
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]面倒なスマフォ・タブレットでの異なるビューポートサイズの確認が簡単にできるスクリプト -rFrame
[JS]古いブラウザではそれなりに、モダンブラウザではよりかっこよく表示する通知パネルのスクリプト -smoke.js
