blog.katsuma.tv
jQuery1.5から追加されたjquery.deferred。どんなものなのかはなんとなく理解していたのですが、全く触ったことがなかったので練習がてら、このblogのトップページにあるFlickrの最新画像サムネイル表示ライブラリを、jquery.deferredを利用したjquery.pluginとして書きなおしてみました。 jquery.flickr.js 利用方法 jquery(1.5)以上と、当jsをロードしておいた状態で、 $('#foo').flickr({ user_name: 'katsuma'}); こんなかんじで最新画像のサムネイルがロードされます(デフォルトでは6枚)。Topページもこのシンプルな方法でロードさせています。 枚数を変更したいときは $('#foo').flickr({ user_name: 'katsuma', view_num: 3 }); こんな
高機能ライブラリ「jQuery」とそのPlugin「Validation」 - すぎゃーんメモ
非常に高機能で便利なJavaScriptライブラリとして評判の「jQuery」をちょっと触ってみた。 jQuery Pluginが豊富に存在する、というのも人気の理由のようで。 formの入力チェックをしてくれる「Validation Plugin」というものを使って試してみた。 bassistance.de » jQuery plugin: Validation 忘れてしまわないうちにメモっておこう。 最も簡単なサンプル それぞれ上記リンクからダウンロードして、「js」というディレクトリに放り込んでおいた。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>title</title> <script type="te
簡単にフォームの入力チェックが行えるjquery.validate.js-JavaScript Library Archive
簡単にフォームの入力チェックが行えるjquery.validate.js Check Tweet 配布元：bassistance.de » jQuery plugin: Validation ライセンス：MIT/GPL jquery.validate.jsは入力フォームのバリデーション（チェック）を簡単に実装することが出来るjQueryプラグインです。 利用方法 利用方法はまず、jQuery本体と配布元よりダウンロードしてきた「jquery.curvycorners.min.js」をhead要素などで読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script> バリデーションを行いたい
A jQuery inline form validation, because validation is a mess
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The ro
[jQuery] ページ内をスムースにスクロールする | 広島、晴れのち晴れ
WordPressについて、というよりはホームページ作成での便利な事ですが…。 ここの記事を参考にしてページ内をスムースにスクロールする関数を作成しました（ほぼ丸写しですけど）。 使用条件としては必ずjQueryが読み込まれている事です。 // Easingの追加 jQuery.easing.quart = function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }; /*------------------------------------- ページ読み込み中 -------------------------------------*/ jQuery(document).ready(function(){ // // <a href="#***">の場合、スクロール処理を追加 //
今日から現場で使えるjQueryのフォーム関連プラグイン15選
Webサイト制作で欠かせないのがフォーム。 これらは購入時や、お問い合わせ、ログインと言ったパーツで良く使われます。 今回はそんなフォームにスポットを当てて、なるべく使いやすく、導入しやすいものをご紹介いたします。 ただし、あくまでもjQueryプラグインのご紹介なので、よくわからないと言う方は華麗にスルーしてください。細かい導入方法までは説明しません。 機能性重視プラグイン In-Field Labels jQuery Plugin フォームの中に入っている文字がオンクリックでうっすらと消えていくプラグイン。 なかなかいい感じ。 Create a Progress Bar With Javascript | Nettuts+ demo シームレスにフォームの内容を変え、さらにどれくらい進んでいるかが％で確認できる。 overset - jVal - jQuery Form Field V
webデザイナーのためのjQueryベストプラグイン＆チュートリアル10個
かなり人気のあるjQueryですが、そんなjQueryの私個人が選ぶ素敵なプラグインとチュートリアル10選。 とりあえず定番的なものをどうぞ。 ちなみにjQueryを自作できるレベルまで手軽になりたい人は以下記事参照。 web制作の現場で使うjQueryデザイン入門が激しくお勧めな件 タグクラウドの細分化 jquery Hover Sub Tag Cloud - Noupe サンプルデモ これかなり好き。 タグクラウドをさらに細分化させて表示させてます。 こういう発想は今までなかったので最初見たときちょっと感動しましたね。 ローディングページ How to Load In and Animate Content with jQuery | Nettuts+ サンプルデモのメニュー部分をクリックしてみてください。 右上にローディングのマークが若干出て、さらにアコーディオン風に内容が変わります
[JS]jQueryのプラグイン100選 -2009年総集編
2009年に紹介したものを中心としたjQueryのプラグイン100選です。 カルーセル・ニュースティッカー関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 角丸関連
jQuery1.4の新機能を1.4だけに14個 - KAYAC engineers' blog
時が経つのは早いもので、ぼーとしてたらもう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
画像にオーバーレイのキャプションをつけられるjQuery – creamu
Quenessで、jQueryを使って画像にオーバーレイのキャプションをつけるサムネイルギャラリーの作り方が紹介されています。 ソースは以下のようになっていて、とてもシンプルですね。 <div class="photo"> <div class="heading"><span>Pier</span></div> <img src="images/pier1.jpg" width="300" height="186" alt="" /> <div class="caption"><span>Lorem de scua shemf huan rougt ecrit vato de souju kanasa.</span></div> </div> 画像にマウスオーバーすると、トランジションでキャプションが表示されます。 ぜひ見てみてください♪ » Create a Thumbnail Gall
プレロード（先読み）｜jQuery plugin｜Ajax｜PHP & JavaScript Room
PHP、JavaScript、Ajax、HTML/XHTML、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説How to create a Visual Image Preloader using jQuery 〔ページロード完了後に画像を順番にフェードイン表示〕 Image Loader 〔画像の属性を指定可能な画像プレロード〕 jQuery Image Preload Plugin 〔戻り値をオブジェクトとして取得可能な画像のプレロード〕 jQuery.Preload 〔画像プレロード〕 Lazy Load 〔スクロールに応じて徐々に画像を読み込む〕 preloadCssImages 〔CSSで定義されている背景画像を自動プレロード〕 Preloading Images with jQuery and JavaScript 〔ロード時
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
suzunari – CodeRepos::Share – Trac
suzunari ブログパーツフレームワーク suzunari Download http://svn.coderepos.org/share/lang/javascript/blogparts_framework_suzunari/suzunari.js Compressed: http://svn.coderepos.org/share/lang/javascript/blogparts_framework_suzunari/suzunari.min.js svn co http://svn.coderepos.org/share/lang/javascript/blogparts_framework_suzunari/ License Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
![jQuery基礎文法最速マスター[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
とてもシンプルなjQueryのタブコンテンツ – creamu
シンプルなタブ切り替えコンテンツを作りたい。そんなときにおすすめなのが、『Simple jQuery tabs』。とてもシンプルなjQueryのタブコンテンツです。 activeクラスをJavaScriptでaddしたり、removeしたりしているようですね。HTMLも含めて、コードがとてもシンプルになっています。 デモは以下から。 demo ロゴにイラストが使われていてなかなか素敵なブログなので、一度見てみてください。 Simple jQuery tabs 今日から前職で一緒だったフォトグラファー、鞆岡（トモオカ）さんの写真展が開催されています。場所は表参道ヒルズにて。 鞆岡隆史「花木」写真展 花や木のとても綺麗な写真を撮る方です。「写真をうまく撮るにはどうしたらいいですか？」と聞いたら、「教えることはない」ということを教えてくれたトモオカさん。いろいろ質問しても、「そうじゃない」「そう
長～いページもスッキリ！jQueryでタブ表示 (1/2)
1つのWebページに多くの情報を載せようとすると、縦に長くなって見づらくなってしまいます。そのようなWebページを整理するには、ページをいくつかのタブに分けるのが1つの方法です。今回は、jQuery UIの「Tabs」というウィジェットを使って、ページをタブに分ける方法を紹介します。 Tabsをダウンロードしてみよう jQueryには、ユーザーインターフェース関連の基本的なライブラリを集めた「UI」（User Interface）があります。その中の1つに「Tabs」というウィジェットがあります。Tabsは、Webページを複数のタブに分割して、切り替えられるようにするものです。 jQuery UI Tabsを使うには、まずこのJavaScriptファイルをダウンロードします。ダウンロードページに接続すると、ダウンロードするモジュールを選ぶページが表示されますので、「UI Core」と「Ta
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery と object タグの怪 - てっく煮ブログ
http://www.designwalker.com/2010/06/jquery-forms.html
http://www.bface.net/tips/jquery/?p=45
[JS]jQueryで実装するアクセシブルでフレキシブルなタブ