タグ

jqueryに関するaquila2005のブックマーク (48)

  • jQueryでロールオーバー!プリロード対応版 (1/3)

    ロールオーバー効果付きメニューバーの完成画面。メニューボタンにマウスカーソルが重なると別の画像を表示する。画像がクリックできることをユーザーに視覚的に伝えられるメリットがある(画像クリックでサンプルページを表示します) ロールオーバーの基的な仕組みを作ろう 最初に、もっとも単純な方法でロールオーバー効果を作成してみましょう。画像(img要素)の上にマウスカーソルが重なると、スクリプトで指定した別の画像に差し替えるロールオーバーです。 メニューバーのHTML/XHTML(以下、HTML)は以下のように記述しています。メニュー部分はul/li要素で作成し、li要素の内側にa要素を、その内側にimg要素を記述しています。li要素の後とその次のli要素の間を<!-- と -->でコメントアウトしているのは、CSSでli要素を横並びにしたときに発生する余分な空白(すき間)を防ぐためです。コメントを

    jQueryでロールオーバー!プリロード対応版 (1/3)
    aquila2005
    aquila2005 2009/10/30
    プリロード対応ロールオーバー
  • jQueryでAjaxを利用する基本チュートリアル (1/4)

    前回の「フォーム」に続き、jQueryの特別な機能を解説します。今回取り上げるのは、「Ajax」を利用するための機能です。 今さら聞けない「Ajax」とは? 「Ajax」(エイジャックス)は 「Asynchronous JavaScript + XML」の略で、あえて日語にすれば「JavaScriptとXMLによる非同期通信処理」といった意味です。難しく聞こえますが、JavaScriptでWebページを切り替えずにサーバーとデータをやりとりすることです。JavaScriptでサーバーのデータを取りに行けば、ページを切り替えずに画面の一部を書き換える、といった処理ができるようになります。 WebブラウザーはWebページを表示するために、サーバーからHTML/XHTML(以下、特に断りのない場合はHTMLと書きます)ファイルを取得し、取得したHTMLを解釈して描画(レンダリング)します。通常

    jQueryでAjaxを利用する基本チュートリアル (1/4)
    aquila2005
    aquila2005 2009/09/23
    異なるドメイン上のファイルを取得
  • jQueryによるフォームのデザインの基礎(後編) (1/5)

    (前編からの続き) 3.フォーム部品を選択するセレクター jQueryには、フォーム部品を選択する専用のフィルター(セレクターの一種)が多数あります。専用フィルターで選択できる要素は、ほとんどの場合、以前に紹介したjQueryのCSSセレクターでも選択できますが、専用フィルターを使うとより簡単です。 ■フォーム部品を選択する:input :inputは、input要素やtextarea要素、select要素、button要素など、すべてのフォーム部品を選択できるフィルターです。 次のサンプルは、いずれかのフォーム部品がフォーカスされると、フォーカスされた要素の背景色をcss()で変更します。フォーカスが外れると、再びcss()で背景色を元の色(初期値)に戻します。背景色に限らず、CSSを初期値に戻すきには、css("background",""); のように、値を設定せずにプロパティ名だけ

    jQueryによるフォームのデザインの基礎(後編) (1/5)
    aquila2005
    aquila2005 2009/09/08
    フォームのコントロール2
  • jQueryによるフォームのデザインの基礎(前編) (1/3)

    前回まではjQueryの基的な使い方である、「セレクターで(X)HTML要素を指定し、イベントが発生したタイミングで(X)HTMLCSSを書き換える」プログラムの書き方を紹介してきました。jQueryにはほかにも、Webページを使いやすくする便利な機能が用意されています。今回からは、これまでに触れていない特別な機能を紹介していきましょう。 第8回は、「問い合わせフォーム」など、商用サイトには欠かせない(X)HTMLフォームをjQueryで制御する方法です。jQueryには、1.フォーム部品の値を取得・変更する命令、2.フォームに関するイベントの処理、2.フォーム部品を選択するセレクター――といったフォーム関連の機能が揃っています。 1.フォーム部品の値を取得・変更する命令 フォームを操作する専用の命令が、val() です。val() を使えば、フォームに入力/選択されている値を取得した

    jQueryによるフォームのデザインの基礎(前編) (1/3)
    aquila2005
    aquila2005 2009/09/08
    formのコントロール
  • jQuery1.3への移行について - monjudoh’s diary

    3 Quick Steps for a Painless Upgrade to jQuery 1.3 | Learning jQuery ブコメでメモしようとしたら長くなったので CSSセレクタでのXPath式属性指定が廃止された $('[@title=foo]');→$('[title=foo]'); カスタムセレクタの実装をJavaScriptコードの文字列ではなく、関数にしなければならなくなった jQuery.extend(jQuery.expr[':'], {セレクタ名,実装});とやって拡張するのは一緒で、実装の書き方が違う 古いの:"jQuery(a).siblings(m[3]).length>0" 新しいの:function(a,i,m) {return jQuery(a).siblings(m[3]).length>0;} visibility: hiddenになっている

    jQuery1.3への移行について - monjudoh’s diary
    aquila2005
    aquila2005 2009/08/26
    jQuery1.3 後方互換について
  • IE6 position:fixed の諸問題を解決する jQuery.exFixed.js - Cyokodog :: Diary

    最近の更新履歴 2011-12-07 Ver 1.3.2 リリース jQuery 1.7.1に対応しました。 2010-12-27 Ver 1.3.1 リリース fixed 要素がブラウザ表示エリアから隠れ1度非表示状態になると、ウィンドウをリサイズし表示エリア内におさめても非表示状態が続いてしまう不具合を修正しました。 2010-11-14 Ver 1.3.0 リリースしました。exAPI ベースの実装に変更しました。サイズに auto を指定できるように変更しました。 2009-12-08 Ver 1.2.2 リリースしました。IE6 にて fixed 対象要素を非表示にしても表示されてしまう不具合を修正しました。Ver 1.2.1 でサイズを明示せずプラグインを実行すると fixed されない不具合を修正しました。 more jQuery exFixed を使用すると、IE6 で p

    IE6 position:fixed の諸問題を解決する jQuery.exFixed.js - Cyokodog :: Diary
    aquila2005
    aquila2005 2009/06/29
    IE6でposition:fixedを実装するスクリプト(後方互換モードにも対応)
  • fancyBox

    Fancybox #Fancybox is the ultimate JavaScript lightbox alternative that sets the standard for premium user experience in multimedia display. Supports images, videos, maps, inline content, iframes and any other HTML content. This is the fifth generation of Fancybox. Both Carousel and Panzoom components are used under the hood and that's what makes this project so unique. In addition, Fancybox is ea

  • distinctcorp.com.au | TLSA record

    distinctcorp.com.au This domain is registered for one of our customers. If this is your domain name, please visit this page to see how to register it as DNS zone into your account. Note: If you already have registered the DNS zone for your domain name, please wait for DNS propagation. Your web site will be displayed soon. It may take few minutes. * Do you know what the TLSA record is? Suggested ar

    aquila2005
    aquila2005 2009/06/18
    CSSスプライトにアニメーション処理の追加
  • http://bizcaz.com/archives/2008/12/23-133748.php

    aquila2005
    aquila2005 2009/02/03
    IE6でも動く、jQueryのScrollToプラグイン
  • Plugins | jQuery Plugins

    With this plugin, you will easily scroll overflowed elements, and the screen itself. It gives you access to many different options to customize and various ways to specify where to scroll. Check its Homepage to read a detailed documentation on its use. You can then visit its Demo to see all the possibilities in action. Finally, you can read about its 2 sons: jQuery.LocalScroll: Will add a scroll

    aquila2005
    aquila2005 2009/02/02
    スムーズスクロール
  • Plugins | jQuery Plugins

    aquila2005
    aquila2005 2009/02/01
    ページのスクロールに追従するブロック要素
  • jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ

    JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを5つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){

    aquila2005
    aquila2005 2008/12/12
    jQueryの高速化
  • jQuery Selectors

    Toggle Button = $('selector').addClass('highlight').animate({ marginLeft: 10}, 'fast'); Download This Lab This is a paragraph, which means it is wrapped in <p> and </p>. Those "p" tags in the previous sentence are formatted as <code>. This is the first list item (<li>) in an unordered list (<ul>). This is the second list item. It has a link in it. This is the third list item. It has a class of "my

    aquila2005
    aquila2005 2008/12/09
    jQueryのセレクタ確認に便利
  • http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

    aquila2005
    aquila2005 2008/12/05
    階層メニュー
  • はじめてのjQuery

    デザイナ向け「初めてのjQuery」

    aquila2005
    aquila2005 2008/11/28
    はじめてのjQuery
  • jQuery examples

    jQuery examples # example update star comment link 1 curvyCorners 20080123 3 角丸 curvyCorners の jQuery版 * 3 tabs-simple 20080123 4 最もシンプルなタブ * 4 jdNewsScroll 20080123 4 リストをスクロール表示 * 5 columnizeList 20080123 4 list を table のように表示 * 6 toggleElements 20080123 4 任意の要素を開閉 * 7 styleswitch 20080123 4 style の切り替え * 8 tooltip 20080123 4 シンプル * 9 autogrow 20080123 4 textarea の高さを自動調整 * 10 lightbox 20080123

    aquila2005
    aquila2005 2008/11/17
    jQueryのサンプル(日本語訳)
  • jQuery liScroll - a jQuery News Ticker

    liScroll (a jQuery News Ticker made easy) 1.0 Last updated friday, april 22 2011 What's this? liScroll is a jQuery plugin that transforms any given unordered list into a scrolling News Ticker jquery.li-scroller.1.0.js 10/10/2007The first thing that most Javascript programmers 10/10/2007End up doing is adding some code 10/10/2007The code that you want to run 08/10/2007Inside of which is the code th

    aquila2005
    aquila2005 2008/10/23
    ニュースティッカー
  • Open Source - Scroll Follow - The Kitchen @ Net Perspective

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

    aquila2005
    aquila2005 2008/10/23
    スクロールしてもついてくるブロック要素
  • jQuery 642 プラグイン:skuare.net

    jQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavaScriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連、メニュー関連、フォーム関連、テキスト/リンク関連、その他、日語未解説のjQueryプラグインを分類して紹介しています。 初心者でもすぐにリッチなサイトを作成可能ですので、ぜひjQueryプラグインをご利用ください Image Menu Form Text/Link Other W/O_JP

    jQuery 642 プラグイン:skuare.net
    aquila2005
    aquila2005 2008/08/27
    jQueryのプラグイン紹介サイト
  • jQuery 日本語リファレンス

    jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ?'); }, function(){ $(this).text('ヌー'); } );

    aquila2005
    aquila2005 2008/08/08
    日本語リファレンス