We'll be back soon! Our site is currently undergoing maintenance. Please check back later.

Following many requests, I have upgraded the jQuery spy code to support multiple items returned from the AJAX response and custom timestamp functions - so that requests can be completely tailored. Download the latest jQuery spy Examples Import the plug-in, and call the code on the spy container div (assuming you've imported jQuery already). <script type="text/javascript" src="spy.js"></script> <sc
Introduction This tutorial, we will be making a jQuery Sliding Tab Menu for sidebar. Previously, I made a tutorial about jQuery Tabbed Interface / Tabbed Structure Menu, if you have not read it yet, check it out. I'm using it for my sidebar at the moment. The differences between both tab menus are, the sliding direction and this time, we are using a little bit different HTML structure and massive
Demo Area A small list of things you can do with this library. 1. Tabs The most important UI widget on the web Minimal setup for tabs Naming the tabs 4 different skins with CSS Loading tab contents with AJAX Handling browsers back button AJAX:ed tabs with History support Using mouseover to switch tabs Making Wizards with the Tabs Making Accordions with the Tabs Customizing the Accordion e
自分なんぞがオブジェクト指向とはなんぞと語るなんておこがましく、「オブジェクトっぽい話」でいいかなーと思っていたのですが、ブックマークするときに「オブジェクト」でタグ付けてる人がいたので、これはいかんと思い、こっそりタイトルを直しました。 2回目の今回は、複数のインスタンスをまとめて操作する方法について書きます。 まんじゅうマネージャー 前回、クラス作ってインスタンスを作ると便利だというところで終わりましたが、便利な点としてはまず、「複数のインスタンスをまとめて操作したり、作ったりできることができる」という点があります。どういうことかというと、とりあえず、以下のサンプルを見てみてください。 まんじゅうマネージャーサンプル まんじゅうを一気に作ったり、隠したりすることができます。 これで賞味期限が切れたりしても大丈夫なはずです。 この機能を作れと言われたら、前回の知識だけは結構厳しいのではな
A while ago I published an article explaining the utter awesomeness of extending jQuery’s filter selectors. Building on that here’s something new; a regular expression selector. jQuery’s current attribute selectors (CSS3) do allow basic regex notation but no where near as much as this: :regex jQuery.expr[':'].regex = function(elem, index, match) { var matchParams = match[3].split(','), validLabels
SmashingAppsで、デザインに彩りを与えるCSS・jQueryソリューションが紹介されています。 ざっといくつかご紹介。 » Fancy Thumbnail Hover Effect w/ jQuery 画像にマウスオーバーするとスムーズに拡大してくれるjQuery » Create a jQuery Graph Plugin 棒グラフを生成できる » Animated Menus Using jQuery マウスオーバーすると、ふわーっとアニメーションするメニュー » Improve form usability with auto messages フォームにフォーカスすると、メッセージがフェードイン&アウトする » Control.Tabs サムネイルにマウスオーバーすると、ささっと画像を切り替えてくれる すごくいい感じのが揃っていますね。 その他のリストは以下からどうぞ。
CSS is an acronym that stands for cascading style sheets and refers to a set of instructions that controls the appearance of a web page. The formatting principles of CSS are supported by most browsers include Firefox and IE3. In comparison with HTML, CSS provides more formatting options and finer tuning for instance, instead of being stuck with 7 font sizes one can simply use an infinite number of
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.14? Compatibility with recent jQuery versions (up to 3.7): Usage of deprecated jQuery API
Introduction Here we go again, enjoy my collection of navigation menu. Other ways to capture critical pictures, quite possibly worth more than "a thousand words" would be via a security systems cameras. Additional information. Accordion Menu Dock Menu Navigation/Drop Down Menu Slide Menu Tree View Accordion Menu Dynamic drive Accordion menu | Demo i-MarcojQuery Accordion Menu | Demo Horizonal Acco
Update: due to popular demand, I've caved in, and written a plugin and demos with multiple-select boxes populating each other and driven from MySQL. View: Auto-populate multiple select boxes If you are familiar with using select boxes for categorisation and sub-categories, such as ebay does when selling an item, usually this can require a lot of JavaScript to maintain the select boxes, but jQuery
myTinyTodo homepage PHPとjQueryで動く軽快で使いやすいTODOアプリ「myTinyTodo」。 次のようなUIで、「Add」ボタンを押せばajaxで画面遷移なしにTODOを追加できます。 ちょっとした自分用のTODOリストを構築したい場合にサクッと設置できて便利そうです。 チェックボックスにチェックを入れると、線が引かれ、終わったことが分かりやすくなっています。 更に、上図で「はやくおわらせる」と書いてあるような、TODOに対するノート機能なんかもついています。 関連エントリ 1ファイルのみでDB不要のTODO管理ツール「Todo.php」 RememberTheMilkと同期するiPhoneアプリ「Appigo Todo」 PHP+Ajaxな快速TODOツール ターミナルでTODO管理する:todo.sh タイマーで時間を計れるTODOツール『SlimTime
たまに数十列を表示する表組みに出くわすことがあり、辟易することがあります。 そんな時は、所定の件数で次を見るというようなページネーションをつけられるjQueryプラグインTable Paginationを使いましょう。 sponsors 使用方法 Table Paginationからjquery.tablePagination.0.1.jsをjQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.tablePagination.0.1.js"></script> <script type="text/javascript"> $(document).ready(function()
フォームで項目を入力させるとき、県名など決まりきったものであれば、1文字目の入力で候補を挙げることがユーザビリティ上、好ましいです。 jQueryプラグインjQuery Simple Filterを利用するとJavaScriptを利用して簡単に作成できます。 sponsors 使用方法 jQuery Simple Filterからjquery.simpleFilter-0.5.js、jquery.quicksilver.jsを、jQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.quicksilver.js"></script> <script type="text/javas
目的を持ってAjaxを使うためにjQueryの文法を知ろう:jQueryで学ぶ簡単で効果的なAjaxの使い方(2)(1/3 ページ) いま話題の「jQuery」を使って、目的を持ったAjax開発の効率化や使いどころ・注意点などについてサンプルを見ながら解説していきます。Webデザイナ/プロデューサーも必見! 連載第1回の「Aptanaで始めるJavaScriptライブラリ『jQuery』超入門」では、Ajaxを使うためのJavaScriptライブラリとしてjQueryの使い方を紹介しました。実際にAjaxを使ったシステムを作るときに、Ajaxを使うことが目的になってしまっている場合があります。残念ながら、このようなプロジェクトは失敗することの方が多いのが現実です。本来の目的というものは、Ajaxを使ったシステムによる業務の効率化であったり、ユーザビリティの改善によるリピータの確保であったり
日本最大のポータルサイト「Yahoo! JAPAN」のトップページがリニューアルしたのは、2008年1月のこと。従来の2カラムから3カラムのレイアウトに変わり、世界各国のYahoo!に合わせる形でデザインも一新されました。同時に行なわれたのが、ユーザーインターフェイス(UI)のリッチ化です。新しいYahoo! JAPANのページには、タブ/アコーディオンパネル/フローティングウィンドウなど、ここ数年のトレンドであるAjaxを使ったUIが随所に盛り込まれています。 こうした流れは、トップページだけではありません。リニューアルと前後して、Yahoo! JAPANではさまざまなサービスのUIの改善が実施されています。今回はその中のひとつ、「Yahoo!知恵袋」に注目してみましょう。今年2月にリニューアルされたばかりのこのQ&Aサービスの新しいトップページが、今回のお手本です。 今回のお手本サイト
ネットショップや情報サイトなど、複雑な階層構造のWebサイトでは、なるべく分かりやすくて見栄えのいいナビゲーションを設置したい、というニーズがあります。今回は、jQueryプラグインのひとつ、「Treeview」を使って、リストをツリー風に格好よく表示する方法を紹介しましょう。 ui/li要素をツリー表示する「Treeview」 Treeviewプラグインは、HTMLのul/li要素でマークアップしたリストをツリー風に表示するJavaScriptです。要素をクリックで開閉したり、Windowsのエクスプローラのようなフォルダ/ファイルアイコンを表示したりと、いろいろカスタマイズできるのが特徴です。開発者はJorn Zaefferer氏(Jornの「o」の上に点が2つ付きます)で、MITライセンスで公開されています。 Treeviewプラグインは、以下のページで配布されています。ページの先頭
国内外を問わず、多くのECサイトがお手本とする「Amazon.co.jp」。この連載でも以前、Amazonが採用する「カルーセル」(回転表示するスライドパネル)の作り方を紹介しましたが(関連記事)、Amazonは優れたユーザーインターフェイス(UI)の宝庫でもあります。 中でも、過去の閲覧履歴などからページの大半が動的に生成されるAmazon.co.jpのトップページは、ユーザーを商品購入へと導くさまざまな仕掛けが組み込まれています。今回は、このAmazon.co.jpのトップページに注目します。 今回のお手本サイト:『Amazon.co.jp』 米アマゾン・ドットコムの日本法人アマゾンジャパンが2000年から運営するECサイト。書籍販売から始まり、現在ではペットボトル飲料水や紙おむつ、キッチン家電まで1000万点超の膨大な商品を扱っている。取扱商品の拡大に合わせて、2008年4月に大規模
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. Features: ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it's 58k. The ThickBox JavaScript code and C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く