タップすることでプラスとマイナスに切り替わるアイコンの実装 アコーディオンでよく見かける、プラスマークとマイナスマークが切り替わるアイコンの作り方をご紹介します。 ※css3、jQueryを使います。 HTMLの構築 まずHTMLのコード例です。
jqueryで以下のように書いたら画像の読み込み完了後に読み込まれると思っていたら、 ieは正しく動作せず。どうやら、ブラウザによって挙動が異なる模様。 http://api.jquery.com/load-event/ $("#photo img").load( function(){ //ロード完了後の処理 } そこでimagesLoadedプラグインを使用するとieでも画像の完了後の処理が可能になります。 https://gist.github.com/268257 $("#photo img").imagesLoaded( function(){ //ロード完了後の処理 }); 画像のロード完了処理の際はお気を付けください。
連載:jQuery Mobile入門(最終回) 第6回 jQuery Mobile APIでもっとJavaScriptプログラミング 山田 祥寛 2012/06/14 本連載の初回では、jQuery Mobileは(jQueryのモバイル版というよりも)jQuery UIのモバイル版である、と述べた。実際、jQuery Mobileでは標準であまたのウィジェットを提供しており、マークアップのみでネイティブ・アプリ・ライクなスマホ・アプリを開発できてしまう。もっとも、その特長が故に、ともすると、jQuery Mobileではあらかじめ用意された範囲でしかアプリを開発できないと思われがちだ。 そのようなことはない。jQuery Mobileでは、豊富な独自のJavaScript APIを提供しており、これらを呼び出すことで、固有の仕組みをアプリに簡単に組み込める。そうした自由度の高さも、jQu
imgタグのwidth/height要素を指定していない場合、イメージがどう表示されるかはブラウザによって異なる。 すべてのブラウザで画像オリジナルのwidth/heightを取得しようとしても、ブラウザ毎にパラメータやメソッドが異なる jQueryを利用すると、下記コードで画像の実際のサイズを取得できる /* * 画像の実際のサイズを取得する * * @param string image img要素 */ function getActualDimension(image) { var run, mem, w, h, key = "actual"; // for Firefox, Safari, Google Chrome if ("naturalWidth" in image) { return {width: image.naturalWidth, height: image.na
add(expr) 要素集合に、条件式にマッチした要素集合を追加します。 add(expr, context) 要素集合に、指定されたコンテキストの条件式にマッチした要素集合を追加します。 addClass(class) 要素のクラスに、指定した CSS クラスを追加します。 addClass(fn) 要素のクラス属性に、指定した関数が返す CSS クラスを追加します。 after(content) マッチした要素の後(弟要素)に、指定した内容を追加します。 after(fn) マッチした要素の後(弟要素)に、指定した関数の内容を追加します。 jQuery.ajax(settings) HTTPリクエストを使用してデータを取得します。 ajaxComplete(handler) Ajaxリクエストが完了した時に実行するコールバック関数を登録します。 ajaxError(handler) A
jQueryにはたくさんのプラグインがあるので、気づけばjsフォルダがものすごいファイル数になっていたりします。今回はプラグインを使わなくても簡単に実装できる機能を「26 cool and useful jQuery tips, tricks & solutions」というエントリーから紹介します。 詳しくは以下 1.右クリックを無効にする方法 右クリックを禁止したい場合などに。コンテキストメニューが非表示になります。 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2.フォームの初期値を消す方法 検索フィールドなどに。 $(document).ready(function() { $("input.text1").val("Enter your
PHP、JavaScript、Ajax、HTML/XHTML、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説A jQuery Twitter Ticker 〔TLをティッカー表示〕 Adding Twitter to your site with jQuery Part 2 〔指定したユーザーのタイムラインを取得して表示するjQueryプラグイン〕 Display your latest Twitter update with jQuery 〔あなたの最新のつぶやき1件を取得して表示するjQueryプラグイン〕 How To Create A Twitter jQuery Plugin 〔Twitter jQueryプラグインの作り方〕 jqtwitter 〔指定したユーザーのつぶやきを表示するjQueryプラグイン〕 jQuery –
時が経つのは早いもので、ぼーとしてたらもう1月も終わりそうですね。外村です。 先日リリースされたjQuery1.4で新しく追加されたメソッドや新しい使い方ができるようになった機能を全部ではないですがいくつか紹介します。以下に変更点が全て掲載されているのでそちらも参照するといいと思います。 Version 1.4 ? jQuery API 新規で追加されたメソッド 1. nextUntil()、prevUntil()、parentsUntil() 指定したセレクタまでの要素を返します。以下の例ではitem3とitem4の後ろにテキストが追加されます。 <ul> <li id="item1">item1</li> <li id="item2">item2</li> <li id="item3">item3</li> <li id="item4">item4</li> <li id="item5
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」。 Chromatableはテーブルのヘッダーを固定させ、テーブルの要素にスクロールバーを付けることができるjQueryプラグインです。 普通のテーブル Chromatableで初期化 次のようにスクロールしてもヘッダー位置はそのままで非常に分かりやすい。 実装方法 実装方法も超簡単で、JSコード自体はたったの1行で実装可能。 <!-- ライブラリ読込み --> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.chromatable.js"></script> <!-- 初期化方法1 --> <script> $(document).ready(functio
jQuery Plug-in Farbtastic is a jQuery plug-in that can add one or more color picker widgets into a page through JavaScript. Each widget is then linked to an existing element (e.g. a text field) and will update the element's value when a color is selected. Download Farbtastic 1.2 - January 8, 2007 (License: GPL). Demo Farbtastic uses layered transparent PNGs to render a saturation/luminance gradien
最近ようやくjQueryに目覚めました。 面倒な指定がこれほど楽々と出来てしまうと笑いが止まりません。 言い過ぎました。そんなに笑えません。 あったらよさげなプラグインを一つ思いついたのでちくちく書いてたんですが、いつの間にかclass指定もrel指定もいらないスムーズスクロールのコードを書いていました。 interface.jsという有名なjQueryライブラリの応用です。 interface.jsについてはEmotional Webさんが解りやすい記事を書かれていたので、interface.jsの導入までのご参考にどうぞ。 Interface.jsで簡単スムーススクロール - Emotional Web 普通はPageTopとかに「#top」を指定したりすると思うのですが、それだけではもったいないなーと。 当サイトで実際に使っているソースを書いておきます。 以下のソースはIEで動かない
IE6 で position:fixed させる方法いろいろ 擬似フレームで position:fixed expressionで position:fixed Javascriptで position:fixed 3の場合、Fixed positioning っていうライブラリもあるみたいです。 jQueryを使用して簡単にできないか試してみました。 jQueryを使用すると $j(window).scroll() メソッドでスクロールイベント $j(document).scrollTop() メソッドでスクロール量 が取得できます。 クロスブラウザを気にせず、簡単に書けます(ヘッダ部固定の例)
jQuery 1.2 以降だと scrollTop(と scrollLeft)という疑似スタイルが利用できるようになったので,jQuery UI を使わずとも,jQuery Core 本体だけでページ内スクロールができるようになりました。 たとえば, <html> <body> <p> blah, blah, blah, ... blah, blah, blah, ... </p> <p> <a href="#" id="link_to_top">ページの先頭へ</a> </p> </body> </html> このような HTML で「ページの先頭へ」というリンクをクリックしたときに,スムーズにスクロールしたいのなら, $(function () { if (! $.browser.safari) { $('#link_to_top').click(function () { $(thi
This plugin was originally written by Dave Methvin. Dave and I collaborated on several improvements and the project is now hosted on github. The most recent version is also available here: jquery.corner.js. It's important to understand that this corner plugin is pulling off its magic by adding more elements to the page. Specifically, it adds div "strips" to the item to be cornered and sets a solid
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く