Add advanced interaction controls to your HTML tables the free & easy way
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
CSSはこちら。特に変わったことはしていません。CSS3はtext-shadowとtransitionです。これは必須という訳ではないですね。 #map1 a{ font-size: 14px; color: #666; text-decoration: none; text-shadow: rgba(255,255,255,0.6) -1px 1px 0; } #map1 td{ padding: 6px 3px; text-align: center; } #map1 td.frame{ padding: 0; width: 20px; height: 10px; } #map1 td.land{ background-color: #eef2bf; } #map1 td.sea{ background-color: #f0f9ff; } #map1 td.selected{ back
Jquery Eight-Bit Plugin 8bitキャラクターを描画できるjQueryプラグイン「EightBit.js」。 サイト上の描画ツールを使ってドット絵を描いて、そのドット絵を描画できるというもの。画像ではなくCSSなため、拡大してもうまい具合に８ビット感が出せます。 ボタンを押すと、グラフィックをコード化したものが出力されるのでそちらをデータとして描画できます なかなか面白い仕組みですが、画像の変換ツールなんかが出てきたら実用的ですかね 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 クールなドアノブ風の％グラフを描画できるjQuery Knob XMLを超見やすく折畳み表示できるjQueryプラグイン「XML Tree」 faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon
これは面白い！jQueryでバーコードを描けるプラグイン「jQuery BARCODE」 2010年02月24日- BARCODE : JQUERY PLUGIN TO CREATE BARCODE ONLINE jQueryでバーコードを描けるプラグイン「jQuery BARCODE」というものがあるみたいです。 普通画像を描画というとサーバサイドという発想が出ますが、jQueryを使ってJSでバーコードが描画出来ます 試しに携帯で読み取ってみたらちゃんと読めました。 実装も次のようにとっても簡単で、第一引数にデータと、第二引数にバーコードのタイプを埋め込めばいいみたい。 <div id="bcTarget"></div> $("#bcTarget").barcode("1234567890128", "ean13"); ean8, ean13, code11, code39, code
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」！ 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読！5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する！これは本当にすごい！！ まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ
A three dimensional and space efficient menu. Move your mouse towards the arrow — or swipe in from the arrow if you're on a touch device — to open. Test it with any page by appending a URL, like so: lab.hakim.se/meny/?u=http://hakim.se. Meny can be positioned on any side of the screen: top - right - bottom - left Instructions and download at github.com/hakimel/meny. The name, Meny, is swedish. Cre
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 よく見かける、ページ遷移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。 僕の語彙の無い説明よりサンプル見た方が早そうですね。 ※漢字も間違ってたので修正しました ページ遷移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script> <script src="pagify
WebSocket Communication 自己紹介 かみやん (Twitter@kamiyam) システム開発会社 ほとんどWebのシステム Java・C#がメインのプログラマ 元自動車整備士です 今日は大阪から来ました アジェンダ WebSocketとは？ 現状WebSocketで何ができるのか？ 私のセッションでは難しい話は抜きにしてWebSocketを使ったデモを中心にお送りしたいと思います。 と、事前資料公開時は考えていましたが、デモだけで30分もたないのでWebベースの実装についての解説なども WebSocketとは？ 今日、何度も出てきたと思いますが、リアルタイムに双方向通信を可能にするプロトコルです。 SyncSlide WebSocket Communication http://prog.re-d.net/demo/slide/20110528/ USTREAMをご
Please check out the followup post before jumping to the wrong conclusion. As the last blog post discussed, jQuery version 1.8 is undergoing a spring cleaning to remove insecure, inefficient, ineffective, and inadvisable features. We’ve also begun the work to allow you to build custom versions that exclude parts of the library for even greater savings. Those efforts will make it possible for you t
Hello, my name is jQuery++. It’s wonderful to meet you. Have you ever found yourself wishing jQuery had just one more feature or wanted it to be a tiny bit faster? I know I have, but I understand jQuery can’t do everything. This is why the team at Bitovi created me, a collection of extremely useful DOM helpers and special events that complement jQuery. I am not a UI project like jQueryUI or jQuery
「crocro.jscam」JavaScript... / 3D野郎は寄ってたかれ!WebGLでグリグリ遊べ... / jmpress.js | a jQuery pl...他...全6件
iOSやAndroidに最適化されたjQuery互換の軽量JavaScriptフレームワーク「jQ.Mobi」が公開されたようです Tweet 2012/1/18 水曜日 matsui Posted in Android, iPhone, 記事紹介・リンク | No Comments » スマートフォン環境向けのJavaScriptフレームワークといえばjQuery Mobileがメジャーですが、今回新しくiOSやAndroidに最適化されたJavaScriptフレームワーク「jQ.Mobi」が公開されたようです。 jQuery Mobileは、Black BerryやWindows Phoneなどの各種OSもサポートされていますが、jQ.MobiはターゲットをiOSとAndroidのみに絞ることで、ソースサイズをjQuery Mobileの1/9に削減、速度をAndroid環境で3倍に、
jQuery Projectは11月16日、HTML5ベースのモバイル向けユーザーインターフェースライブラリ「jQuery Mobile 1.0」をリリースした。プロジェクトの立ち上げから1年以上を経ての正式版登場で、主要モバイルプラットフォームすべてをサポートする。 jQuery Mobileは、JavaScriptライブラリであるjQueryのモバイル向けプロジェクト。jQueryコアとjQuery UIライブラリをベースとし、jQuery開発者は効率良くモバイル向けUI開発を行えるという。 2010年夏にプロジェクトが開始されて以来、1年以上の開発期間を経ての正式版となった。対応プラットフォームはiOS 3.2～5.0、Android 2.1～2.3および3.0、Windows Phone 7～7.5、Blackberry 6～7、Blackberry Playbook、Palm W
ActionScript Ajax AngularJS Apache AppleScript ASP.NET Bash C C# C++ Coffee CoffeeScript ColdFusion Command CSS Delphi Django ES6 GLSL Grunt Gulp HAML Haskell HTML iOS Jade Java JavaScript jQuery JSX Less LUA MDX MySQL Objective Other Pascal Perl PHP Plain text PowerShell Processing Progress Prolog Pseudocode Python Rails RegExr Ruby SASS Scala Scheme SCSS SmallBASIC Smarty SQL Stylus SVG Swift Ty
ウェブデザインのなかで、 jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが 定番になりつつありますね。 ふわっと、ポップアップみたいに浮き上がってくるウインドウ、 画像やテキストのスライドなど 最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。 要素をスライドさせるならJquery.cycle.plugin 画像や、テキストなど、 非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。 上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。 シンプルなdemo Even More Demosもオススメです。 オプション一覧はこちら → jquery.cycle.plugin ページ内ポップアップ、lightbox風表現ならfa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
