意外と簡単！モーダルウィンドウをプラグインなしで作る | Web Design DAY
モーダルウィンドウを実装するjQueryプラグインはたくさんありますが、わざわざプラグインを使わなくても、意外と簡単にモーダルウィンドウを実装することができます。自分で実装できれば、仕組みを理解しているのでカスタマイズやメンテもしやすいのが最大のメリットです。 また、モーダルウィンドウのメリットやデメリットにも触れつつ、サンプルで確認しながらプラグインなしで作っていきます！ モーダルウィンドウとは? 素材サイトなどを見ているとよく出てくる、会員登録を促す画像やボタンが全画面にオーバーレイして表示されるやつです。 モーダルウィンドウが表示されると、閉じるか、指定の動作を完了するまで他の操作ができないところが特徴で、この点がメリットでもあり、デメリットでもあります。 主な用途は下記になります。 ローディング ローディングが必要なコンテンツを表示する際に、ローディング中であることを伝えるために使
jQueryで画像などコンテンツ要素を順番にフェードインさせる方法｜BLACKFLAG
写真のギャラリーページなど、たくさんの画像が一覧となって並べられているページでの ページロード時に画像が一枚ずつ順番にフェードインしながら表示される演出技法。 一度に全ての画像がフェードインするよりも 滑らかな読み込みアニメーションを演出することができます。 この画像（コンテンツ要素）が順番にフェードインしながら表示する演出を jQueryを使って簡単シンプルに実装する方法を紹介してみます。 まずは動作のサンプルから。 下記画面の「リロード」を押してみてください。 サンプルを別枠で表示する ページの読み込みが終わると 一覧画像が左上から順々にフェードインして表示されます。 この全体構成について、 まずはHTMLから。 ◆HTML <ul> <li><a href="#"><img src="img/photo1.jpg" alt="" /></a></li> <li><a href="#"
[jQuery]スクロール量に応じて(連動して)、アニメーションさせる方法 | UNORTHODOX WORKBOOK | Blog
アニメーションというか、jQueryでスクロールを監視して数値化し、それをリアルタイムに反映させることで滑らかに動かす方法。スクロール量に連動させているので、スクロールするたびにアニメーションのような滑らかな動きをします。 色々な使い方があると思うけど、ここではwidthの値をリアルタイムに更新し、スクロール量に応じて幅を広げたり狭めたりする方法をのせています。 デモとHTMLとCSS 言葉だけだと説明が難しいので、デモを見てもらうと何をやりたいのか分かるかと思います。とてもシンプルです。※古いIEでは見れません。 DEMO デモでは５種類ありますが、基本的にはスタート位置(CSS)が違うだけで、内容はほとんど同じ。 HTML HTMLは何でも良くて、便宜上、空divの要素を更新するような形にしています。 <div class="contents"> <div class="line"><
![[jQuery]スクロール量に応じて(連動して)、アニメーションさせる方法 | UNORTHODOX WORKBOOK | Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/dc8c95bc6d707ff555b0dcfe047f07bb04a7b352/height=288;version=1;width=512/https%3A%2F%2Ftheorthodoxworks.com%2Fwordpress%2Fwp-content%2Fuploads%2F2015%2F01%2Fcatch-study.jpg)
jQuery custom content scroller – malihu | web design
When upgrading from version 2.x to 3.x it’s important to use version 3 CSS and .png files. Version 3 is backwards compatible but it’s also a huge overhaul. One significant change is that you don’t need to call the update method manually (the script does it automatically). For more info see changelog. Version 2 is still maintained and updated here. Get started Configuration Methods Styling Callback
画像ズーム プラグイン
スワイプ対応の画像スライダー・ギャラリー用プラグイン 画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b Lightboxプラグイン「Boxer」 「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」 「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ iTunesのC
jQueryのonをliveの代わりに使う場合の書き方 - 無理しない感じ
jQueryのliveは1.9以降使えないので代わりにonを使おうと思ったのですが、その使い方を間違えて覚えてしまっていたのでメモしておきます。 間違った使い方 $('.hoge').on('click', function() { alert('liveの代替としては間違った使い方だよ'); }); この使い方では、onload時点で存在するDomに対してclickイベントのバインドはできますが、後で動的に挿入されたDomにはバインドされません。 動的に挿入したDomにもバインドされるようにするには以下の様な使い方をします。 正しい使い方 $(document).on('click', '.hoge', function() { alert('liveの代替としてはこうする'); }); 上記のように、セレクタをonの第二引数として指定します。 これにより、document配下が監視され
jQueryのイベント一覧 | たねっぱ！
※以前はクリックした回数に応じて処理を変更出来るtoggleというイベントが存在しましたが、jQueryバージョン1.9で削除されました。 [クリック関係あるある]右クリック、左クリックを判別したい ある範囲内でマウスクリックした際に、左or右クリックによって動作を変える必要がある場合、以下の問題に直面します。 どうやって左or右クリックを判別するか 右クリックした際に出るコンテキストメニューを出したくない場合どうすればいいか 「１」に関しては、 $('#IdName').on('mouseup', function(e) { // e.whichには // 左クリック: 1 // 中クリック: 2 // 右クリック: 3 // が入っています。 console.log(e.which); }); のように、e.whichで判断する事で解決できます。 「２」に関して、何も対策していないと右
jQuery UI Datepicker の便利機能を一気にまとめて定義！使いやすいカレンダーはこれだ！
各日付入力項目の用途にあわせて、必要な機能を実装するのが最も望ましいですが、最初から何でも出来るように提示してしまうのも手段の１つです。そこでこれまで紹介した機能を一通り取り入れて、汎用的に使える利便性の高いオプション定義を、事前に一括定義する方法について今回は紹介していきます。 カレンダー入力が便利になる汎用的な Datepicker のオプション設定一般的 jQuery UI のプラグインが保持しているオプション設定は、それぞれ初期値が定義されています。通常は、プラグイン呼び出し時にオプション値を渡して反映させます。 しかし複数の画面に渡って何度も利用される場合、都度オプション項目を設定していてはソースコードが煩雑になってしまいます。そこでオプションの初期値を、JavaScript 側で利用頻度の高い設定に予め変更しておくことで、何度も同じオプション設定をしなくて済むようになります。
jQueryで特定の要素が存在するかどうかを判別する処理｜BLACKFLAG
スクリプトを組む際に、特定の要素が存在する場合のみに処理を実行させる、といった場面にはよく遭遇するのでjQueryで要素の存在の有無を判別する処理を自分用のメモ書きとしてご紹介してみます。 jQueryで特定の要素が存在するかどうかを判別する処理【.length】 タグそのものに対して判別させることも可能ですが、サンプルではID「#sample」が存在するかどうかの処理について。 要素が存在するかどうかの判別方法はいろいろありますが、扱いやすかったものとしてまず「.length」を使っての判別から。 要素の数があるかどうか、を判別する処理になり、存在しない場合は値が空になるので、存在しないという判別になります。 「.length」を使っての「#sample」が存在した際の処理は以下のようになります。 ◆SCRIPT $(function(){ if($('#sample').length)
jQuery 忘れがちなことメモ「jQuery逆引きマニュアル」編 - Cyokodog::Memo
「jQuery逆引きマニュアル」のモニター当選したので、読みながらメモしよう 第１章 jQuery の基本構文 1-7 イベントを設定したい foucs と focusin メソッドの違い focusinメソッドはイベント場部リングでも動作する $('body').focusin(.. とかできるってことかな？（delegate的なことができる？あとで確認） mouseover と mouseenter メソッドの違い マウスカーソルがのった時に実行。mouseoverはイベントバブリング時にも発生 mouseleaveメソッド マウスカーソルがはずれた際発生 keypress メソッド 文字入力にのみ対応。shiftキー等は、keydownで取得するとのことだが、keypress時に押下状態かを判別するには以下でOK $('input').keypress(function(e){ e.
contents() - jQuery 日本語リファレンス
要素のテキストノードも含めた全子要素を取得します。対象要素がiframeであれば、呼び出されるコンテンツのDocumentを選択する。
jQueryを使ってiframe要素の中身にアクセスする | バシャログ。
残暑の蒸し暑さから、涼しさを通り越して、寒いと感じる今日この頃、tanakaです。 今日はjQueryでiframe要素の中にアクセスして、情報を取得したり、改変したりする方法を紹介します。 jQueryは、Webページに対するアクセスを簡潔に表現できるライブラリですが、iframe内の文書にまで、 $('div iframe p') といった感じでアクセスすることはできません。ドキュメントが違うからでしょうか？正しい理由はわかりませんが、同時に2つのページをまたいで処理するのは混乱しそうなのでこれはこれでいいと思います。で、そういったときにアクセスする方法があるのでご紹介します。 [追記 2010/09/27]注意点として、親フレームとiframe内ドキュメントのドメインが異なる場合はアクセスできません。 iframe内のドキュメントにアクセスするにはcontents() $(...).
DOM選択処理：フィルタリング｜jQuery APIリファレンス｜Ajax｜PHP & JavaScript Room
マッチした要素から指定したインデックス番号の要素を選択します。 第1引数indexには、選択する要素のインデックス番号（0始まり）を指定します。 最後の要素のインデックス番号は、要素の長さ-1になります。 例えば、3番目の要素を選択する場合は、$(A).eq(2);のようにインデックス番号に「2」を指定します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/
【jQuery】選択した項目によってセレクトボックスの色を変える方法 ｜ KLUTCHE
フォーム内のプルダウンメニューの選択項目を変更する度に、セレクトボックスの背景色を変える方法です。 デモ サンプル IEでは選択中のセレクトボックスは青背景になるので少しわかり辛いかもしれません。 HTML <select class="clorfulSelect"> <option value="">選択してください</option> <option value="red">赤</option> <option value="blue">青</option> <option value="green">緑</option> <option value="gray">灰</option> <option value="black">黒</option> </select> select 要素に class「clorfulSelect」を設定します。 Javascript jQuery 依存
jQuery UI Tabsのメモ - ×××Diary
jQuery UIのTabsを使ってみたのでいろいろメモっておく。 本エントリーで扱ってる項目 デフォルトで開くタブをセットしたい 別のタブへ切り替えたい１ 別のタブへ切り替えたい２ タブの上をマウスオーバーしたら切り替えたい タブの順番をドラッグで入れ替えたい タブの順番をドラッグで入れ替えたい(cookieで順番記憶してみた) ■デフォルトで開くタブをセットしたい ⇒selectedに開きたいタブの数字(0以上)を指定する ・サンプルでは、デフォルトのタブ指定方法を示します。 【動作確認用】→Demo <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sample</title> <link type="text/css"
jquery selectメニューでのonChangeのような使い方
selectメニューを変更したときにonchangeのように実行させるjqueryの書き方 リストが多い場合になんか応用出来そう 例: テキストボックスへ選択したデータを追加 <input type="text" name="hoo" value="" id="key" /> <select id="hogehoge"> <option value="AAA">りんご</option> <option value="BBB">ごりら</option> <option value="CCC">らっぱ</option> </select> <script type="text/javascript"> $(function(){ $('#hogehoge').change(function(){ $('#key').val($('#key').val() + $("#hogehoge").va
【jQuery】.on() の使い方（jQuery1.7～） at softelメモ
jQuery1.7から、.bind()、.live()、.delegate()などは非推奨となり、.on() が推奨となりました。今後すべてのイベントは .on() で、となっていきそうですが、なにやら引数が多くて分かりにくい感じ？では使ってみましょう。 １、$(セレクタ).on(イベント, 関数) セレクタにマッチした要素で、イベントが発生すると、関数が実行されます。 = .bind() ですね。 「セレクタにマッチした要素に」なので、そこにある要素に対してとなり、後から動的に追加した要素に対しては効きません。 example $('#example-button').on('click', function(){alert('clicked!');}); Demo デモ – $(セレクタ).on(イベント, 関数) ２、$(document).on(イベント, セレクタ, 関数) do
jQuery.stopのjumpToEnd引数が便利すぎてやばい（JavaScript Advent Calendar 2010 5日目） - KAYAC engineers' blog
JavaScript Advent Calendar 20105日目のago（@kyo_ago）です。 jQueryのソースを眺めててjQuery.stopに引数があることに気づいたので調べてみました。 まず、簡単なスライドダウンメニューを作ってみたいと思います。 jQuery.stop 1 - jsdo.it - share JavaScript, HTML5 and CSS JS部分は以下の通りです。 $(function () { $('div').hover(function () { $(this).find('ul').slideDown(); }, function () { $(this).find('ul').slideUp(); }); }); 少し触ると分かると思いますが、マウスがmenuから外れた後も何度も.slideDown、.slideUpが実行されるため非常に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1216彩票-官网平台
http://plugins.adchsm.me/slidebars/