10 Really Interesting jQuery Plugins | Queness ユニークで使えそうな jQueryプラグイン10個。 プラグインといえば、タブやLightboxといった定番のものから、他にも役立つものが色々とありますが、紹介されているものはどれも便利そうでしたのでいくつかご紹介。 Impromptu LightBox風に、OK・Cancel のダイアログを表示できます。 Captify 画像の下部に半透明の背景付きキャプションを表示。アニメーションしていい感じ Favico リンクに自動でfaviconを付けてくれる jQuery BreadCrumb アニメーションして使いやすいパンくずリスト jQuery Spotlight 特定のブロック要素以外にオーバーレイして特定のブロックを目立たせます jQuery Peel ページがペラっとめくれたような驚きのエ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 1,2,3,
背景画像にアニメーションのエフェクトを加え、カラーをゆっくりと変更してサイトの印象をガラッと変えるスクリプトをYOU LOVE.USから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(function() { // *** // Scrolling background // *** // height of background image in pixels var backgroundheight = 4000; // get the current minute/hour of the day var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); // work out how far through
・・・なぜか最近 jquery にはまっているようだ?? まぁ~それは置いといて、 角丸を作成できる jquery プラグインを付けてみたいと思った・・・・なんとなく。調べた所、2種類発見、それがタイトルの2種類です。 早速、どちらが良いか試してみた所・・・・う~~~ん、一長一短?2種を比較した感想 jquery.curvycorners は、「角丸が綺麗」 「角丸の角度が選べる」 「ボーダーも付けれる」 「ちょっと重い」 「ブラウザによって表示が違う時がある?設定のせいかも・・・」 jquery-roundcorners-canvas は、「角丸がちょっと荒い」 「角の種類がいっぱいある」 「軽い」 と、行った所でしょうか?・・・結局、選んだのは jquery-roundcorners-canvas 理由は、こちらの方が軽かったのとIE & Firefox での表示が同じだったからです・
This plugin is now part of jQuery UI and this standalone version won’t be updated anymore. The page will remain as a reference. This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automaticall
ishidaです。 tableで価格一覧や製品一覧などを表示する場合に、行数が長くなるとかなりメリハリのない印象になります。 行ごとにclassを設定すれば見やすくなりますが個別に設定するのも面倒なので、最近のishidaはjQueryを使って背景色を設定しています。 サンプルは以下です。 jQueryでtableの偶数行や奇数行に背景色を設定する方法サンプル 設置方法 設定方法は以下です。 htmlのhead要素に以下の処理を読み込みます。またjqueryはサイトからダウンロードしてください。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("table").each(function(){ jQ
Unless you have been under a rock these past 3 or 4 years than you absolutely have heard about how critical a blog is to your website and your business. You’ve heard that it will pull in targeted, interested traffic that converts. You’ve heard that it will help you build a brand and a reputation for yourself that is unparalleled and more importantly, irreplaceable. You’ve heard that it is the key
jquery-roundcorners-canvas (jrc) A plugin for jQuery to make round corners using canvas. For MSIE to support canvas it uses explorercanvas (http://code.google.com/p/explorercanvas/). This plugin has been tested on ie6/ie7/firefox2/opera9/safari3 Demo demo Download Download jquery-roundcorners-canvas: http://plugins.jquery.com/node/99/release Usage Load jquery.corner.js: <script type=”text/javascr
I know there are a lot of toggle tutorials out there already, but when I was learning the basics of jQuery and the toggle effect, I had a hard time finding resources on how to switch the “open” and “close” graphic state. After reading a few tutorials and mix and matching techniques I was able to achieve this effect, but wanted to share it with those who experienced the same frustration that I had
Posted by Scott and Maggie on 05/14/2008 Topics: ajaxjQueryui designvisual design We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It's especially helpful when organizing large data structures that don't translate well into traditional dropdown or fly-out menus. This drilldown menu provides easy navigation of complex nested structures with
mootoolsを使った非常に軽快に動くスライドメニューです。縦バージョンと横バージョンがあり若干半透明になっていい感じです。 サンプルがあるので簡単に設置できると思います。 横メニューサンプル 縦メニューサンプル 外部ファイルはいくつか読み取りますが、htmlは非常にシンプルなので助かりますね。 <link rel="stylesheet" href="css/MenuMatic.css" type="text/css" media="all" /> ... <ul id="nav"> <li><a href="#" >Link 1</a></li> <li><a href="#" >Link 2</a> <ul> <li><a href="#" >Link3</a></li> <li><a href="#" >Link4</a></li> </ul> </li> <li><a href
2008 年 11 月 4 日 アイタスの新人?制作Tです。 Webサイトを巡っていて、たまに不便に思うことがあります。それは「文章量が多いページを読むときのスクロール」。 マウスホイールの操作を延々と続けるのは、意外とユーザーの負担になるのですね。 今回紹介するスクリプトは、あらかじめ区切っておいたページの内容を、決まった範囲の中でスクロールさせるスクリプトです。 Slick Tabbed Content Area using CSS & jQuery 配布元 デモ たくさんの更新情報を1ヶ所におさめつつ、多少の演出を加えています。SonyグループのWebサイトが更新情報の表示のために実装しているスクリプトの、演出強化版と言えますね。 jQuery.SerialScroll 配布元 デモ 表示枠の中で一枚の文書が縦横無尽に動きます。ホテルや学校の館内見取り図を動かしながら見せるなど、Fl
一定時間で自動的に消える New マークを付ける JavaScript の jQuery 版 小粋空間さんのところで紹介されている「新着エントリーのあるカテゴリーに New マークをつける」の jQuery 版を作ってみました。 このブログの「 Recent Entries 」(最近のブログ記事)のところにある星マーク(New マークのこと)がそれで(下図参照)、3日以内に作成されたブログ記事に表示されるようにしています。 このテクニックは、荒木さんご自身の著書『 Movable Type... 小粋空間さんのところで紹介されている「新着エントリーのあるカテゴリーに New マークをつける」の jQuery 版を作ってみました。 このブログの「 Recent Entries 」(最近のブログ記事)のところにある星マーク(New マークのこと)がそれで(下図参照)、3日以内に作成されたブログ
\閉鎖予定のサイトも売れるかも?/ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう
ニュースティッカーにはいろいろな種類がありますが、今回紹介するjQueryプラグイン「BBC style news ticker」は、かなり目をひきます。 1文字1文字点滅しながら表示されるので、目立つ&うざがられること間違いないでしょう。 sponsors 使用方法 BBC style news tickerからjquery.newsTicker.jsをjQueryからjquery.jsをダウロードします。 <script src="jquery-1.3.js" type="text/javascript"></script> <script src="jquery.newsTicker.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { v
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く