jQueryタブプラグインでリンク元にパラメータを与えて開くタブを制御する | A Day in the Life
特定のタブが開いている状態でリンクをさせたい時は無いでしょうか？例えば3番目のタブがアクティブになっている状態に...などです。 4回に渡ってタブプラグインを改修していきましたが、今回はURLにパラメータを付けて特定のタブが開いた状態へリンクを貼れるように改修いたしました。（正確には書いてもらった...） 詳しい解説は今回は省きますが、内容はURLに付いたパラメータを解析するメソッドを用意し、パラメータに応じて開くタブを制御しています。タブ数は4つまで対応するようになっています。 使い方 オプションで用意しているプロパティは以下の通り targetID 初期値 #tab タブメニューと表示・非表示するブロックを梱包するdivのID名を指定 tabElement 初期値 .tab-list li タブメニューを指定 boxElement 初期値 .tab-box 表示・非表示するdivのクラ
.each() | jQuery 1.9 日本語リファレンス | js STUDIO
.each( function(index, Element) ) 1.0追加 戻り値:jQuery マッチした各要素に対して、指定した関数を実行します。 引数 説明 次のような箇条書きリストがあった場合、 <ul> <li>foo</li> <li>bar</li> </ul> 下記の処理を実行すると、 $('li').each(function(index) { alert(index + ': ' + $(this).text()); }); 次のように各要素のテキストをアラート表示します。 0: foo 1: bar ループ処理中にfalseを戻り値として返すと、ループ処理を中断することが出来ます。 デモ DIV要素をクリックすると、繰り返し処理によって各DIV要素のstyleを変更します。 <!DOCTYPE html> <html> <head> <style> div { c
他ページから指定したタブへダイレクトリンクする方法を探しています。 - ｊQueryで下記URLのタブメニューを実装しております。... - Yahoo!知恵袋
ブラウザは HTML のソースコードを上から順に解釈していきます。 解釈しながら、例えば <script> タグが現れたら、そのスクリプトを解釈して実行します。 続けて HTML ソースを解釈して、例えば <img> タグがあれば画像を読み込んで表示して、ということを行い、 </html> まで読み込むと HTML の中身が全て構築されます。 (1) HTMLを解釈する（している途中） (2) HTMLの中身が全て構築される（DOMツリーが完成する） (3) 画像などの読込中のものが全て読み終わる（load イベントが発火する） (3) まで終えると、ページの読み込みが完了した、ということになります。 「タブボタンをクリックしたら...」と JavaScript に jQuery を用いて記述していますが、この <script> タグは、 <body> よりも手前に書いています。 つまり、
jQuery リファレンス：:not( )
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
jQueryによる要素の存在チェックまとめ
jQueryによる要素の存在チェックまとめです。 jQueryを実行する際、「$(selector)」が成功してjQueryオブジェクトが生成されたことを判断したいケースがあるかと思います。なかったらすいません。 ということで、jQueryで要素（jQueryオブジェクト）が1つでも存在することをチェックする方法を調べてみました。実際に動かした結果でまとめてます。 サンプルはscript要素で括ってますが、必要に応じて「$(function(){ ... });」などで括ってください。間違った情報・表現等がありましたら適宜修正しますのでご指摘ください。 １．$(selector)[0] 「$(selector)」で生成されるjQueryオブジェクトは配列のように扱える（配列の基本メソッドが使える訳ではない）ので、0番目の要素をチェックすることで存在チェックを行えます。 <script> i
ページ内で気持ち良いスムーススクロールをするためのjQueryプラグイン作った。
ページ内リンクをクリックした場合にスムーズにスクロールするようにしてくれるjQueryプラグインです。同じようなプラグインはたくさん公開されているのですが、これだ！というのがなかなかなかったので自作してみました。 ダウンロード 使い方 下記のような感じでjQueryとjQuery.smoothScroll.jsを読み込みます。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.smoothScroll.js"></script> あとは普通にページ内リンクを設定するだけです。 <div id="header"> ヘッダー内容
jQuery：ページ最下部までスクロールすると自動でコンテンツを読込む | raining
WEBサイトでページの最下部までスクロールした時にローディング画像を表示し、 次に表示するコンテンツを自動で読込んで出力するようなページを見ることがあります。 FacebookやTwitterなどは、同じようにページの下までスクロールすると情報を読み込んで出力します。 jQueryの「jQuery.Bottom」プラグインを使用すれば同じような動作をさせることが可能です。 下記より、ダウンロードすることができます。 jquery.bottom-1.0.js 下記にjQueryの「jQuery.Bottom」プラグインの使用して、ページの最下部までスクロールした時に自動的にコンテンツを表示させる時の使用方法をメモします。 ■ 「jquery.bottom-1.0.js」プラグインの使用方法 【JS】 jQueryとjquery.bottom-1.0.jsを読み込みます。 下記はwindowオ
スクロールで順に画像読み込みLazy Load Plugin for jQuery
Mon, Jan 1, 0001 Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading. This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader ut
imgタグの画像のロードタイミングを制御できるjQueryプラグイン"Lazy Load" - ふろしき Blog
Webページを表示する時、画面に表示されていない無駄な画像までロードしていませんか？ 画像のロードは、Webブラウザの表示を遅らせるだけでなく、サーバ側にも負荷を与える厄介な処理でもあります。"Lazy Load"は、そんな画像ファイルのロードタイミングを、JavaScript側で制御できるjQueryプラグインです。 JavaScriptで画像ファイルのロードのタイミングを制御できるということは、画像ロードによるサーバ負荷を分散させるアプローチが可能になります。また画面に一度も表示されないような画像はロードさせないように制御すれば、負荷そのものを減らすことも可能になります。 Webブラウザ側でも、ページ自体をロードする際に一括で画像ファイルをロードさせる必要がなくなるので、表示速度の改善に繋げることができます。動作環境は、モダンブラウザはもちろんのこと、IE8以上から動くことが確認されて
jQueryでthisの子要素を取得するやり方いろいろ | Base Views
公開 2010年6月6日（日） 更新日 2014年8月18日（月） スポンサーリンク jQueryを使っていて、thisとその子要素を同時に指定したい場合がある。 結構いろんなやり方があるみたいで、取りあえず使いやすそうなので下の3通り。 $("hoge",this) $(this).children("hoge") $(this).find("hoge") 一番上がシンプルでいいかと思うんですが、取得したいthis直下の要素名をthisの手前に書くんですね… 使いどころは多そうですが、例えば下みたいなの。「Click1」をクリックしたらその直下の<div>が隠れるようにしたい場合とか。 <ul> <li>Click1 <div> <h2>Menu1</h2> <p>text1</p> </div> </li> <li>Click2 <div> <li>Menu2</li> <li>tex
レスポンシブWEBデザイン対応のメニューが作れるチュートリアル17（ソースファイル付き） | co-jin
レスポンシブWEBデザインを行ううえで重要になってくるのがメニューをどのようにするかということではないでしょうか。 自分でメニューをレスポンシブ対応にさせるのもいいですが、レスポンシブ対応のメニューも類型化されてきていますので、ユーザーとしても一般的なメニューのほうが使いやすいですよね。 そこで今回は、そんな類型化されたレスポンシブWEBデザイン対応メニューの詳しいチュートリアルとソースファイルがついているサイトをご紹介します。 チュートリアルを使って学ぶもよし、ソースファイルを利用してプロジェクトに活かすものよし。 いずれにしてもとっても役だつサイトばかりです。 これからレスポンシブWEBデザインに取り組もうという方も、ぜひ見てみてくださいね。 Creating a CSS3 Responsive Menu アイコン付きのメニュー。 4段階のブレークポイントで、モバイルではメニューボタン
[SDDmenu2] Simple Drop Down Menu2
Very short Core code is 4 lines. Multiple pulldown You can m… Read more →
jQuery 超簡単且つ軽量にプルダウン型メニューを実現する方法 | Stronghold Archive
どうもこんにちは。今回のtipsは…【超簡単且つ軽量にプルダウン型メニューを実現する方法】です。 コード jqueryで8行と、とても軽い仕様になっていますのでよろしければご活用ください。 $(function(){ $(‘.nav’).hover(function(){ var nav = $(this).find(‘li’).length; $(this).not(‘:animated’).animate({‘height’:24 * nav + ‘px’},’fast’); },function(){ $(this).animate({‘height’:’24px’},’fast’); }); }); HTML <div id="menu"> <ul id="menuBody"> <li> <ul class="nav"> <li class="head">MANU1</li> <l
jQuery：スクロールで表示されるページトップの実装方法 - NxWorld
数多くのサイトで実装されているのを見かける、ページを一定量スクロールすると出現する「このページの先頭へ」のようなページトップを実装する方法を紹介します。 このブログでも実装している（現在は未実装）のですが、同じような動きを実装したいというお問い合わせをいただいたのでその方への回答も兼ねて、動きが被っている感じですが全7タイプの実装方法を紹介します。 最近ではちょっと変わったタイプも多く見かけますが、今回は凝ったアニメーションなども特にないシンプルなものなので、どんなタイプのサイトにも合わせやすいかと思います。 はじめに ここで紹介している実装方法は全てjQueryを使用していますので、あらかじめjQueryを読み込ませてください。 また、HTMLは全て下記のものを使用しています。 紹介しているサンプルはclassにpagetopを用いて実装していますので、class名を変更した場合はCSS
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
レスポンシブ＆タッチ対応！スライダーjQueryプラグイン「SlidesJS」 | スターフィールド株式会社
レスポンシブサイトが増えてきて、レスポンシブとタッチの両方に対応していて、安定して動作するようなスライダーの必要性も高くなっています。 またそれに加えて、お客様からの難題に答えられるような柔軟性のあるスライダーとなると、なかなかjQueryプラグインで見つけるのは大変です。 今回そんな中探していて、シンプルですがとても使いやすいスライダーの、「SlidesJS」というjQueryプラグインを見つけましたので、ご紹介いたします。 ↓「SlidesJS」のサイト SlidesJS, a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 コチラの特長としては、 エフェクトは普通のスライドとフェイドのみと少ないものの、 レスポンシブに強いということが挙げられると思います。 画面の幅に
Fullscreen Slit Slider with CSS3 and jQuery
A bene placito You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity. Ralph Waldo Emerson Regula aurea Until he extends the circle of his compassion to all living things, man will not himself find peace. Albert Schweitzer Dum spiro, spero Thousands of people who say they 'love' animals sit down once or twice a day to en
Slippry - A responsive slider by booncon
Responsive Buzzword? Yes. Important? Very. We got frustrated at the lack of free, responsive sliders, so we wrote our own. Sure, there are some out there, but we found out the hard way, they have two settings or they use soon-to-be-deprecated functions. Oops. Modern HTML5 + CSS3 + jQuery Slippry is written with the future in mind, not the past. We wrote it to work on the latest jQuery functions, C
『jQuery 最高の教科書』サンプルサイト
Chapter 02 3 ステップではじめるかんたん jQuery 入門 # Easing Chapter 04 確かな基礎力を養う jQuery の基本テクニック 01 さまざまなホバーエフェクトで学ぶ動きのある表現の基本 02 画像とキャプションの表現 03 丸いボタンのレイアウト 04 見え隠れするサイドバー 05 タイポグラフィの表現 # Chaper 04 完成版 Chapter 05 活用の幅を広げる jQuery の必修テクニック 01 なめらかな動きの スライドショー Basic 02 多機能なスライドショー Advanced 03 スティッキーヘッダー Basic 04 デザインが変化する スティッキーヘッダー Advanced 05 画面領域を有効活用できるタブ Basic 06 高機能で拡張しやすいタブ Advanced 07 スムーズスクロール Basic 08 拡
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Drop-Down Navigation: Responsive and Touch-Friendly by Osvaldas Valutis
