How to Visualize Data Beautifully With the Chart.js Library
Creating charts that look presentable can be a bit of a pain. Most often, web designers or developers use graphics to display data using Photoshop or Illustrator, which may take a lot time to be done. Your Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets DOWNLOAD NOW Visualization of Data With Chart.js – Tutorial The Chart.js library is one of the gre
画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」:phpspot開発日誌
画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」 2010年07月26日- Sudo Slider jQuery Plugin Demo#1 画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」。 簡単な定義でなんでもスライダーとして動作させちゃうことが出来ます。 <div>の中に<ul>リストで<li>内にコンテンツを並べるだけであとは順次スライドしてくれるようです。 あとはAjaxによるコンテンツ読み込みにも対応してるみたい 以下にサンプルをご紹介。 シンプルな画像スライダー ページ送りを追加した例 ページ送りは番号だけじゃなくて特定文字列の定義も可能 タブっぽいUIにすることも可能。コンテンツの高さは自動でアニメーションしながら調節されるようにしたりもできる 他にも色々
[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider
クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。 標準的なスライドからフェードまで多彩な表示を用意。 各パネルへの直接リンクが可能（ブックマーク可）、ブラウザの「前へ」「次へ」をサポート。 パネル内は画像、テキスト、動画、フォームなどさまざまなHTMLコンテンツを表示可能。 自動再生でスライドショーも可能。 ループ再生も可能。 セットアップは簡単で、カスタマイズも簡単。 IE6+, Fx, Chrome, Safari, Opなど主要ブラウザの
jQueryの日本語の解説サイトと国産のプラグイン集
MopBox 複数パネル（デモには100以上のパネルも）の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
Automatic Image Slider w/ CSS & jQuery | Simple Image Slider Tutorial | jQuery Slider | jQuery Image Rotator
With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, I believe it is wise to build simple widgets like the image slider using HTML/CSS/Javascript, and leave more interactive applications for flash if needed. The html based image slider will have its benefits with SEO and will also degrade gracefully for
コンテンツを滑らかにスライドさせるjQueryプラグイン:phpspot開発日誌
jQuery plugin - Easy Image or Content Slider | Css Globe This is my first jQuery plugin. I wrote several jQuery scripts but never made a real plugin just because I was I afraid of it's complexity. コンテンツを滑らかにスライドさせるjQueryプラグイン。 各種デモが以下で閲覧できます。 Default non-styled image slider Non-styled vertical image slider Non-styled vertical content slider マークアップが次のようにシンプルに記述できる点も導入の敷居が低くていいかんじです。 <div id="slider
jQueryで動作するスライドショーまとめ
Photo Gallery, picture gallery, or slideshow are the best way to showcase your images/photos to your readers. There are a lot of different methods to create them and today we are going to look into different jQuery plugins that can be used to create a better photo gallery. 1. GalleryView GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to imple
JQueryを使ったスライド表現を集めた「10 Best jQuery Sliders」
一枚のページにたくさんの情報をまとめたい時に便利なのがスライド表現。今日紹介する「10 Best jQuery Sliders」はコンパクトで高機能なAjaxライブラリjQueryを使って実装するスライド機能を紹介するエントリーです。 loopedSlider いくつかのスライド表現のサンプルが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Easy Slider 様々なタイプのスライドを制御できるスライド表現。用途に応じて使い分けができそうです。 ■ Introducing Coda-Slider スタンダードなタイプのスライダー。応用が利きそうなつくりになっています。サンプルをダウンロード可能。 ■CrossSlide – A jQuery plugin to create pan and cross-fade ani
jQuery＆HTML5＆CSSでリッチな動画プレイヤー実装jQueryプラグイン「osm player」:phpspot開発日誌
jQuery＆HTML5＆CSSでリッチな動画プレイヤー実装jQueryプラグイン「osm player」 2010年07月06日- Plugins | jQuery Plugins jQuery＆HTML5＆CSSでリッチな動画プレイヤー実装jQueryプラグイン「osm player」。 次のようなリッチな動画プレイヤーがノンFlashで実装できるプレイヤーです。HTML5非対応ブラウザ用にFlashでフォールバックも可能。 Youtube、vimeoの埋め込みもOKです。 jQuery UI Theme-Roller を使ってテーマの変更も容易だそうです。 HTML5の動画プレイヤーは色々出てますが選択肢のひとつとして覚えておいてもよさそうですね。 関連エントリ CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」 HTML5で動画や音声再生を可能
[JS]フォームの入力欄にラベルをくっきりうっすら表示するスクリプト
フォームの入力欄にラベルを通常時にくっきり、フォーカス時にうっすらとアニメーションで表示するスクリプトを紹介します。 jQuery FormLabels Plugin デモページ スクリプトの特徴 クロスブラウザ対応。 ラベルをアニメーションで表示。 多数のオプションと旧式ブラウザへの配慮。 フォームのマークアップを変更しないシンプルさ。 フォームのラベルはinput要素と同じスタイルが可能。 パスワードのラベルはアスタリスク（*）ではなく、テキストで表示。 スクリプトのデモ デモページではいくつかのデモがありますが、デフォルト版のものをキャプチャで紹介します。 デモページ 入力時には入力したテキストが反映されます。 スクリプトの仕様 以下のフォームの要素に対応しています。 input[type='text'] input[type='email'] input[type='passwor
フォーム周りに使えるjQueryプラグイン50 – creamu
フォームをより使いやすくしたい。 そんなときに使えそうなのが、『50 jQuery Plugins for Form Functionality, Validation, Security and Customisation』。フォーム周りに使えるjQueryプラグイン集です。 バリデータやアップローダ、パスワードの安全性チェックなど、いろいろありますね。 jQuery “Highlight” Plugin フォーカスが当たっているフォームに背景画像を敷いて、ハイライトしてくれるプラグイン Autotab: jQuery Auto-Tabbing and Filtering 電話番号などのinputで、自動で次のinputにカーソルを移動してくれる jQuery NobleCount Twitterのような、あと何文字入力できる、を表示してくれる「jQuery NobleCount」 AJ
ページ内スクロールのjQueryプラグインいろいろ - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ページ内、要素間のスムースな スクロールを実装する事が可能な jQueryプラグインのメモ。使ってい るサイトも随分見かけるようになっ てきましたね。 個人的には特定のものしか使っておらず、いろいろと挑戦したいと考えているのでそのとき用にメモ。カルーセルとかギャラリーみたいなスライダータイプは今回割愛しています。 ScrollTo Posts With jQuery ページ内をダイナミックにスクロール。サイドのメニューっぽいところで操作します。 ScrollTo Posts With jQuery Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery 3種類ありま
[JS]あなたのウェブページを52の言語に自動翻訳するボタンを簡単に設置できる -Translate This Button
<textarea name="code" class="html" cols="60" rows="5"> <!-- Begin TranslateThis Button --> <div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script> <script type="text/javascript"> Trans
今日から現場で使えるjQueryのフォーム関連プラグイン15選
Webサイト制作で欠かせないのがフォーム。 これらは購入時や、お問い合わせ、ログインと言ったパーツで良く使われます。 今回はそんなフォームにスポットを当てて、なるべく使いやすく、導入しやすいものをご紹介いたします。 ただし、あくまでもjQueryプラグインのご紹介なので、よくわからないと言う方は華麗にスルーしてください。細かい導入方法までは説明しません。 機能性重視プラグイン In-Field Labels jQuery Plugin フォームの中に入っている文字がオンクリックでうっすらと消えていくプラグイン。 なかなかいい感じ。 Create a Progress Bar With Javascript | Nettuts+ demo シームレスにフォームの内容を変え、さらにどれくらい進んでいるかが％で確認できる。 overset - jVal - jQuery Form Field V
[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
[JS]jQueryのプラグイン33+1選 -2010年5・6月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 simpleSli.de フレキシブルでシンプルで軽量なコンテンツスライダーの決定版。 Lightbox_me DOM要素を指定して
[JS]ドラッグベースのいろいろなインターフェイスが実装できるスクリプト -Dragdealer JS
Dragdealer JS デモ スクリプトはjQueryなど他のスクリプトに依存せずに動作し、圧縮版は12KBと軽量なものになっています。 以下に公開されているデモを紹介します。 シンプルなスライダー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォームのテキストエリアをより使いやすくするテクニック集
[JS]CSSスプライトにフェードや移動、不透明度の変更を加えるスクリプト -bgFade
[JS]カードを重ねるアニメーションで画像を表示するスライドショー