jQuery.dataの使い方 - KAYAC engineers' blog
最近気づいたんですが、jQuery.dataが結構便利だと思うので紹介してみたいと思います。 (function($) { var name_space = 'name_space'; $.fn[name_space] = function(options) { var elements = this; var settings = $.extend({ }, options); elements.each(function() { var t = this; $.data(t, name_space, {}); $(t).hover(function () { var obj = $.data(this, name_space); obj.status = 'over'; $.data(self, name_space, obj); }, function () { var obj =
KAYAC Engineers' Blog
SREチームの長田です。 今回は、カヤックのメンバーが業務で使うために開発・公開しているOSSなプロダクトをまとめて紹介しようという企画です。 KAYAC organization以下にあるものだけでなく、在籍中のメンバーが作ったものもひっくるめて、実際に業務で使用しているものを中心に 紹介しています。 以下の3つのカテゴリに分けて記載しています。 各カテゴリ内はアルファベット順です。 ツール編 人間が手動で実行するもの アプリケーション編 どこかに常駐して、イベントを受け取ると動作するもの ライブラリ編 ツールやアプリケーションから参照されるもの 集めてみたらそこそこの量になったので、本記事では詳細な説明は省いています。 GitHubリポジトリのURLや関連記事のリンクを併記していますので、より詳しく知りたい場合はそちらを参照ください。 (...) 内はそのプロダクトで使用している主なプ
そのまま編集が可能なテーブル実装用jQueryプラグイン「Zentable」:phpspot開発日誌
そのまま編集が可能なテーブル実装用jQueryプラグイン「Zentable」。 次のように、クリックでその場で編集できるテーブル実装用のjQueryプラグインです。 以下のような特徴があるようです。 ajaxによるデータ読み込み マウスホイールやキーボードによる操作 カラムやテーブルのリサイズ機能 並び替え、フィルタ機能付き ツールチップ機能付き コンテンツにHTMLを入れることも可能 CSSによるテーマデザインが可能 以下のエントリを参照してください。 Zentense: Zentable 関連エントリ スクロール可能なテーブルを作成するJavaScriptライブラリ「ScrollableTable」 わずか2.5KBでテーブルにソート機能を提供する「TinyTable」 テーブルの列でソートするJavaScriptライブラリ
JavaScript++かも日記 - 1997年からの
前回、Web上でLibraのwalletやclientを作る(6)-残高を見るに追記したのだけど、実は、前回成…
第3回 トラバーシング編
要素セットに対してフィルタリングしたり、親子・兄弟関係にある要素を取得したりするメソッドについてまとめた、すぐに役立つ13本を一挙公開。 連載目次 このシリーズでは、jQueryの基本機能を目的別リファレンスの形式でまとめています。リファレンスという性質上、本稿では入門レベルからの解説は行っていません。jQueryの基本、また、Visual StudioでjQueryを利用する方法などについては、拙稿「ASP.NETプログラマーのためのjQuery入門」も併せて参照してください。 さて、第3回となる今回は、トラバーシング（Traversing）編。「Traverse」とは英語で「行き来する」という意味で、jQueryの場合、$()関数で取得した要素セットに対してさらに絞り込みをかけたり、相対的な親子／兄弟関係にある要素を取得したりすることをいいます（要は、要素間を行き来する、というわけです
リッチ過ぎず、どんなページにも馴染みそうなWYSIWYGエディタ実装jQueryプラグイン「wkrte」:phpspot開発日誌
リッチ過ぎず、どんなページにも馴染みそうなWYSIWYGエディタ実装jQueryプラグイン「wkrte」 2009年12月21日- リッチ過ぎず、どんなページにも馴染みそうなWYSIWYGエディタ実装jQueryプラグイン「wkrte」。 普通、JavaScript で動くWYSIWYGエディタというと、大きなツールバーがついていて、それ自体はカッコいいのですがページデザインにうまく馴染ませることが難しかったりします。 wkrte なら、エディタにカーソルがフォーカスしない状態だとツールバーを表示せず、普通のテキスト領域（textarea）のように表示させられます。 何もはいってない状態だと、一見普通のtextareaです 内容が入ってもツールバーがないので目立ちすぎず、いい感じです。 カーソルを合わせるとツールバーが表示。これはとてもスマートですね。 高機能なテキスト編集を実現しつつ、ペ
jQueryで実装する、奥行きのある回転テーブルの動き – creamu
普通と違った、奥行きのあるインターフェースを実装したい。 そんなあなたにおすすめなのが、『jQuery Roundabout』。jQueryで実装する、奥行きのある回転テーブルの動きです。 シンプルなul, liのHTMLを、奥行きのあるインターフェースにしてくれます。しかもクリックすると、前面にぐいっと回転して出てきます。 以下のようなデモも用意されていて、かなり刺激的なことになっています。 Standard Roundabout in Action Clock 一度見てみてください。 jQuery Roundabout ブログデーになりつつあるな。。今日はインプットが多すぎました。。朝までがんばるぞ。 P.S. 今気づきましたが2つとも田口さんとかぶってしまいましたすんまへんm(_ _)m
フォームのための実用的なjQuery集「10 Useful jQuery Form Validation Techniques and Tutorials」
TOP > WebDesign > フォームのための実用的なjQuery集「10 Useful jQuery Form Validation Techniques and Tutorials」 ユーザーとサイト運営者を結びコンタクトフォーム。個人、商用拘わらず、様々なWEBページで目にします。今日紹介するのは、フォームをもっと便利にしてくれる、フォームのための実用的なjQuery集「10 Useful jQuery Form Validation Techniques and Tutorials」を紹介したいと思います。 Form Validation with jQuery from Scratch フォーム自体を配布していたり、未記入の項目を分かりやすく教えてくれたりと様々なフォーム関係のTipsが公開されています。今日はその中からいくつか紹介したいと思います。 詳しくは以下
jQueryとAjaxで作るスムーズページング (1/3)
Googleの検索結果のように、長いリスト項目を複数のページに分割して表示することを「ページング」（Paging）と言います。ページング処理では下部にナビゲーションリンクを配置し、クリックされた番号のページを表示しますが、ページ全体をリロードして切り替えるには時間がかかります。そこで今回は、スムーズにページングさせるためにAjaxを利用して更新が必要な部分のみを外部ファイルから読み込んで書き換え、ユーザーのストレスを軽減する方法を紹介しましょう。 データのHTMLを用意する 今回は、数が多い商品情報のリストを複数のページに分割して表示するサンプルを作成します。はじめにAjaxで読み込むコンテンツデータを用意します。Ajaxは、XMLやJSON（JavaScript Object Notation）、テキストなどさまざまデータを扱えますが、今回はもっとも手軽なHTMLを使いましょう。コンテン
jQuery1.4aでのlive event/special event - monjudoh’s diary
BPStudy#28 : ATNDの発表資料。 スライドなどは用意しておらず、これで発表する。 自己紹介 技術方面でのキーワード jQuery 主にevent周りを追っかけている Mercurial 俺々管理からチーム開発まで、開発をより上手くまわせるバージョン管理の仕方を追求中 Struts2 今仕事で使ってる 気に入った 技術者相手では名前で損してる印象 Python Be PROUD社員だったりDjango・Pyhonハッカソン、Python温泉によく参加してたりで誤解されがちだが全然書けない Perlの方がまだ書ける Be PROUD 株式会社ビープラウドの社員 ついったでbeproudハッシュタグ付き発言を時々している 今日の本題jQuery1.4 先日jQuery1.4のアルファ版がリリースされた。 jQuery 1.4 Alpha 1 Released | Official
jQueryをよく使う人に使えそうな７つのチートシート:phpspot開発日誌
jQueryをよく使う人に使えそうな７つのチートシートがまとまっています。 内容が被ってしまう部分もあると思いますが、７種類の中から自分が使いやすいものを組み合わせて置いておくと便利ですね。 ajaxブームの2005年から4年。すっかりjQueryが地位を確立してしまった感がありますね。 以下のエントリを参照してください。 7 jQuery Cheatsheets For Every Designer & Developer to Have | TutZone 関連エントリ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」 少ないスペース内でコンテンツをグリグリスクロールさせられるjQueryプラグイン「Flips」 jQuery用のGUIコンポーネントプロジェク
[JS]画像をクロスフェードで変更するスライドショーの超軽量スクリプト -Simplest Slideshow
余計な機能は一切なく、シンプルで画像を洗練されたエフェクトで次々に表示するスライドショーのスクリプトをSnook.caから紹介します。 Simplest jQuery Slideshow demo このスクリプトを作成したきっかけは、知人からの依頼だそうです。 当サイトでも多数紹介しているjQueryのプラグインで同様の動作をするものがありますが、多機能すぎるためクロスフェードするだけのシンプルで軽量のものを作成することにしたそうです。 そこで、コードの目標を20行以下で挑んだところ、作成してみると、下記のように大幅に短いものになってしまったとのことです。 ※動作には別途jquery.jsが必要です。 JavaScript <textarea name="code" class="html" cols="60" rows="5"> $(function(){ $('.fadein img:
ページ内に雪を降らせられるjQueryプラグイン「jSnow」:phpspot開発日誌
ページ内に雪を降らせられるjQueryプラグイン「jSnow」。 好きな文字をページ内に雪を降らせたような感じで浮遊させることができます。 デモページを見てみましょう 使い方は簡単で、flakeCode に配列を指定すると文字が指定でき、flakeColor 指定で色を指定できます。 $().jSnow({flakes:30,flakeCode:["♠","♣"],flakeColor:["#f00","#00f"]}); ちょっとしたドッキリエフェクトとして覚えておくと使えるかもしれませんね。 以下のエントリを参照してください。 jSnow, a jQuery plugin for creating falling snow effect on your website | DuMmWiaM.com
製品の特徴についてカッコよく表示できるjQueryプラグイン「Feature List」:phpspot開発日誌
製品の特徴についてカッコよく表示できるjQueryプラグイン「Feature List」。 次のような、製品の紹介なんかでどこかで見たようなUIパーツを簡単に実装できるみたいです。 実装方法 最初はちょっと難しいような気もするのですが、実はかなり簡単で次のように<div>以下に2つのulを置いておきます <div id="feature_list"> <ul id="tabs"> <li> <a href="javascript:;"> <img src="services.png" /> <h3>Services</h3> <span>Lorem ipsum dolor sit amet consect</span> </a> </li> <li> <a href="javascript:;"> <img src="programming.png" /> <h3>Programming<
コンテンツにエフェクトを掛けるjQueryプラグイン10個 - かちびと.net
個人的に必要になるかもと思ってメモ。 テキストや画像にエフェクトを与えて Webサイトを動きのあるサイトにする 手助けをしてくれるjQueryのプラグイン をいくつかご紹介します。 コンテンツに対するユーザーの興味を高めたり、画像を使用せずテキストを装飾したりと、使い方次第でいろいろ用途がありそうです。 Sliding Door Effect マウスオーバーで画像が4隅に開きます。動きも素敵。 Sliding Door Effect / デモ Rainbows テキストにグラデーションや影をつけます。これは凄いですね。 Rainbows / デモ Opacity to Show Focus マウスオーバーしたコンテンツ以外に半透明のエフェクトを掛けるjQueryプラグイン。テキストでも可能。 Opacity to Show Focus / デモ Color Changing Text an
jQuery＋CSSによるカルーセルパネルの作り方 (1/3)
「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル（Carousel：回転木馬）は、メリーゴーラウンド（merry-go-round）のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。 HTML/CSSでカルーセルのベースを作成する 今回作成するカルーセルパネルのHTML／XHTML（以下、HTML）は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp
Crafting an Animated Postcard With jQuery « Build Internet
Nicely illustrated banners are…nice. But why not add a little pizazz by using animation like Flash websites do? Through Javascript web pages are becoming increasingly less static and all sorts of creative possibilities are opening up. In this tutorial we will learn the basics of setting up a continuous animation which can be applied pretty much anywhere. Take a peek below to see an outline of what
第2回 JSDeferredを用いたアプリケーション開発（その1） | gihyo.jp
JSDeferredの基本的な読みかた JSDeferredを使ったコードを読むときには、next() という関数がキーになっています。 リスト1 // next() のチェイン Deferred.next(function () { // 最初の next は Deferred.next alert(1); }). next(function () { // これは Deferred.prototype.next alert(2); }). next(function () { alert(3); }); 前回すこしばかり例を出しましたが、このように next を繋げていくことで処理の流れを表現します。 Deferred.next() と Deferred オブジェクトのメソッドとしての next() があることに注意してください。Deferred オブジェクトのメソッドとしての nex
[JS]jQueryのプラグイン33+1選 -2009年12月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Organic Tabs アニメーションで収縮するタブコンテンツ。 flips パネルを多彩なアニメーションでスライド。 bxSli
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Prototyperに贈るjQuerystからの手紙