利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
公開 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
jQuery Marquee Animation Plugin Preview - CodeCanyon 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」。 ホームページをつくりはじめた時には誰もが使ったマーキー。覚えていくにつれ、ほとんど使われないかわいそうなマーキー。 そんなマーキーもjQueryで超かっこ良く、まるで映画のプロモーション動画に使われるようなエフェクトに生まれ変わったようです。 生まれ変わったマーキーを見てみよう 実装は超簡単! <script language="javascript"> $(document).ready(function() { $('.marquee').fMarquee({width: 960, height: 100}); // サイズをオプション指定 }); </script> <!-- 内容はdivに入
Click on the above image to land in the Lava Lamp Demo page. Then, hover over it and feel for yourself, the nifty effect that Lava Lamp offers. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light wei
Retiring two old projects – animate-textshadow.js and CSS floating feedback button Happy New Year! First of all I’d like to wish everyone reading a wonderful 2016 😁. New years are traditionally associated with new beginnings - clearing out the clutter of the previous year to start afresh. In that spirit, I’m retiring a couple of my old projects animate-textshadow.js and my CSS floating feedback b
連載目次 $.isEmptyObjectメソッドを利用することで、オブジェクト(引数obj)の内容が空であるかどうかをtrue/falseで得られます。以下はそのサンプル・プログラムです。 <script type="text/javascript"> $(function() { // オブジェクトが空であるかを判定 window.alert( $.isEmptyObject({ name: 'Yamada' }) ); }); </script>
cookieを簡単に取り扱う「jQuery Cookie」 Check Tweet 配布元:carhartl/jquery-cookie ライセンス:MITライセンス 「jQuery Cookie」はJavaScriptで取り扱いがめんどくさいcookieについて簡単に取り扱えるようにするためのjQueryプラグインです。 利用方法 まずは、jQuery本体と配布元よりダウンロードしたjquery.cookie.jsをhead要素などで読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> cookieに値を保存するには、次のように$.cookieに対してキーと保存する値を指定して保存します
DOMがロードされて操作・解析が可能になったタイミングで関数を実行します。 これはおそらく、最も重要なイベントになります。殆ど全てのJavaScriptはDOMの準備が出来たタイミングで処理を実行したいと思いますが、 window.onloadでは画像などのロードが済む時点にタイミングを合わせるブラウザもあります。readyイベントを用いることで、アプリケーションの体感処理速度を大きく向上させることができます。 ready関数にコールバック関数を渡してやります。コールバック関数の引数に$エイリアスが来るので、これを用いることでグローバル名前空間での衝突を避けた安全なコードを書くことが出来ます。 この関数を使う場合、bodyのonloadイベントには何も書かないようにしてください。readyイベントが実行されなくなってしまいます。 $(document).readyを用いてもかまいません。複
29 06 09 2007 トレーニングAjax入門2 jQueryでフォントサイズを変更する jQuery, Ajax よくある動的に文字サイズを変更するコードをJavascript JQueryで書いてみました。 昨日の記事jQueryでcookieを超簡単に扱える事がわかったので、 早速、汎用性の高そうなコードを書いてみました。 コード <script type="text/javascript" src="jquery.js"></script> <script language="javascript" src="jquery.cookie.js"></script> <script type="text/javascript"> <!-- $(function(){ $("p").css("font-size",$.cookie('fsize'));
これもわかりやすかったので、検索用にメモ 参考URL http://blog.mj-site.net/2007/06/jquery-select%E3%81%A7%E6%8C%87%E5%AE%9A%E3%81%AE%E3%82%82%E3%81%AE%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%95%E3%82%8C%E3%81%9F%E7%8A%B6%E6%85%8B%E3%81%AB.html html <select name="pref" id="pref"> <option value="">---------</option> <option value="1">1 : hoge1</option> <option value="2">2 : hoge2</option> <option value="3">3 : hoge3</option> </se
28 05 09 2007 javascriptライブラリjQueryでcookieを超簡単に扱う方法 jQuery, Ajax javascriptでcookieを扱うのって結構めんどくさかったりしたのですが、これは超シンプル <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <!--head内▲--> <script type="text/javascript"> <!-- $.cookie('cookiename','data',{ expires: 7 });//書き込み{保存days} document.write($.cookie('cookiename'));//
まるでフルFlashなjavascriptを使用したWebサイト集めてみました[日本編] 最近はjavascriptで表現できることが増え、前まではFlashでしかできなかった効果もできるようになりましたね。 ということで、マウスオーバーや画面遷移でアニメーションしてるとか、ちょっと変わったレイアウトをjavascriptやっているサイトを集めてみました。 投稿日2011年05月19日 更新日2011年05月30日
View Demos 1 2 3 4 5 Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content. Lightweight: 10KB of JavaScript (less than 5KBs gzipped). Appearance is controlled through CSS so it can
I love the simplicity of using (and more important re-using) jQuery plugins. So I decided to release a plugin that came from my personal need - Feature List. This jQuery plugin enables simple and easy creation of an interactive "Featured Items" widget. You can see the demo at this page, and you can download the complete source code with examples from here. What’s So Great About this Plugin? Slick
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く