スマホでスワイプ形式の画像ギャラリーを利用できるjQueryプラグイン「TouchSlider JavaScript touch control slider」
twitter facebook hatena google pocket スマホでも画像ギャラリー的なことやりたいですよね。 jQueryプラグインのTouchSlider -- JavaScript slide contentを利用するとスマホでスワイプ形式のスライドギャラリーを導入することができます。 もちろんPCでも動作しますので、レスポンシブ・ウェブデザインにも良いかもしれません。 sponsors 使用方法 TouchSlider -- JavaScript slide contentからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.touchslider.js"></scri
jQueryで分かりやすいテキストのDIFF表示ができる「jQuery.PrettyTextDiff」:phpspot開発日誌
Hello jQuery.PrettyTextDiff - Arnab's Universe jQueryで分かりやすいテキストのDIFF表示ができる「jQuery.PrettyTextDiff」 次のようにdiffをjQueryでやってくれます。テキストのbefore,afterをブラウザ上でやってくれます。 ブラウザ上で動的にDIFFを表示できるので、投稿前に、こう変わったよってところを表示できてかなり便利ではないでしょうか。 関連エントリ CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 テキスト表現力を豊かにするタイポグラフィ関連jQueryプラグイン１０ 面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」 テキストを新聞風のレイアウトにできるjQueryプラグイン「Columni
フロントエンドJavaScriptにおける設計とテスト
今日話さないこと JavaScriptの基礎知識、jQueryの導入 気持ちいいUIやUXがうんちゃら CanvasやWebGLを使ったリッチでイケてるゲームの作り方
HTML5 × CSS3 × jQueryを真面目に勉強 – #15 Evernote風タグ登録コンポーネントを作ってみた | DevelopersIO
ちょっとした備忘録といったメモには Evernote を使っています。一時期に比べると使用頻度は少し落ちましたが、それでも使っています。地味なところですが、Evernote のタグ登録 UI が結構好きなのが理由の一つでもあります。 Web メールにおいては基本的に受信がメインで送信といっても殆どが返信で済んでしまっていますが、 Gmail を使っています。Gmail は非常に早いサイクルで機能や UI が刷新されまくっていますが、いつの頃から送信先、Cc、Bcc 入力のUIがまるでタグのような見た目とインタラクションになりました。この両者の UI はとても良く似ており、単純なカンマ区切りの文字列よりも視認性が高くて個人的に気に入っている UI の一つです。 そんな訳で、このタグ登録のUIコンポーネントを作ってみました。前回、jQuery UI Widget の作り方について学んだわけです
Opentip | The free tooltip
opentip is a javascript tooltip framework yes - it’s free, open source and comes with different styles! demo styles There are great styles built right into opentip and it's easy to create your own. ajax Opentips can automatically download their contents via AJAX. It's extremely easy to configure them to do so.
Textillate.js
About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
Twitterが自社製JavaScriptフレームワーク「Flight」をオープンソースで公開
Twitterは自社サービスで利用しているJavaScriptフレームワーク「Flight」をオープンソースで公開しました。 Flightはコンポーネントベースの軽量フレームワーク。開発者に対して非同期で独立性の高いコンポーネントを定義する機能を提供することで、デバッグ、テスト、イベントハンドリングなどを容易にするフレームワークのようです。 Githubのページでは以下のように説明されています。 Components cannot be directly referenced, instead they communicate by triggering and subscribing to events. Consequently every component, and every component API, is entirely decoupled from every othe
吹き出し風にポップアップするツールバー実装jQueryプラグイン「Toolbar.js」:phpspot開発日誌
Toolbar.js - jQuery plugin to create tooltip style toobars 吹き出し風にポップアップするツールバー実装jQueryプラグイン「Toolbar.js」 次のように、初期化位置にカーソルを合わせるとポップアップするツールバーを設定でき、そこからアクションを選べます。 ありそうであまり無かったプラグインかもしれませんね。 縦バージョンにもできます これは便利に使えそう 関連エントリ UIがカッコいいオートコンプリート実装jQueryプラグイン「Ajax AutoComplete」 使いやすい複数選択エレメントを実現するjQueryプラグイン「multiselect.js」 コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「Par
[JS]jQueryのプラグイン33+1選 -2012年12月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 videoBG 動画をページの背景（あずきの水玉）でもdiv要素の背景（暗いトンネル）でも配置します。 Superslides フル
jQueryベースのWYSIWYGエディター『Redactor』 | 100SHIKI
マニアックではあるが、なかなか良さそうなのでメモ的にご紹介。 RedactorはjQueryベースのWYSIWYG（What You See Is What You Get）エディターである。 ユーザーにリッチな文書を入力してもらえる際に便利だ。 もちろん他にも似たようなツールはあるが、ツールバーの見た目が今風＆カスタマイズが容易なのでデザインを損なわずに使うことができるだろう。 ウェブ制作者向けではあるが、覚えておいても良さそうですな。
サイトにキーボードショートカットを実装する際に便利なjQueryプラグイン「chaves.js」:phpspot開発日誌
サイトにキーボードショートカットを実装する際に便利なjQueryプラグイン「chaves.js」 2012年07月06日- Standard demo サイトにキーボードショートカットを実装する際に便利なjQueryプラグイン「chaves.js」。 jとかkとかnとかpでアイテムを送れたりする便利なショートカットですが、あらかじめ決められたマークアップをベースに $(elem).chaves(options) と唱えるとすぐに実装でき、カスタマイズなんかも比較的容易に出来るjQueryプラグインです。 以下のようなコードで bingingsにjson形式で関数を指定してあげるとキーボードに応じた処理がfireされるという仕組み 不要な機能もついてきそうですが、とりあえずサクッと実装しちゃいたい場合には使えそうですね 関連エントリ selectボックスを超カッコよくするjQueryプラグイ
ボックス要素に色んなタイプの影を簡単に付けられるjQueryプラグイン「jQuery Shadow」:phpspot開発日誌
jQuery Shadow Plugin ボックス要素に色んなタイプの影を簡単に付けられるjQueryプラグイン「jQuery Shadow」。 次のようにボックス要素に対して影を自由に付けられるプラグインです。$(elem).shadow(option); という風にするだけなので使い方は簡単ですね 単なるボックス要素があっというまにクールになりますね 関連エントリ selectボックスを超カッコよくするjQueryプラグイン「Chosen」 ブラウザ上でサインを書けるjQueryプラグイン「jSignature」 JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」 スマホ用サイトに使えそうなドロップダウン実装jQueryプラグイン「DropKick」 ページめくりを実現するためのjQueryプラグイン集
シンプルで見やすいガントチャートを描けるjQueryプラグイン・jQuery.Gantt - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 シンプルで見やすいガントチャート を描画できるjQueryのプラグイン。 以前見かけてから放置していたので 少し触って見ました。使う機会は 個人的には多くありませんけど、 覚えて置いて損はしないかと。 この手のはよく見かけますけど、今日のプラグインは個人的に使いやすい印象だったのでメモ。 こういうやつ。 サンプル作ったので宜しければご覧下さい。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script src="jquery.fn.gantt.js"></script
ブラウザ上でサインを書けるjQueryプラグイン「jSignature」:phpspot開発日誌
jSignature ブラウザ上でサインを書けるjQueryプラグイン「jSignature」。 CanvasかFlashで描画出来るので多くのブラウザに対応。ウェブサイトにサインを導入したい場合に使えるかも 実装は以下のように超簡単です <script src="libs/jSignature.min.js"></script> <div id="signature"></div> <script> $(document).ready(function() { $("#signature").jSignature() }) </script> データをSVGのbase64形式で取得できたりもするみたい デモページはこちら サイン書いてみました（＾＾） 関連エントリ アイテムを浮遊させられるjQueryプラグイン「jqFloat」 一見普通のテーブルだけどExcel風に使えるjQueryプ
JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」:phpspot開発日誌
timing: a jQuery plugin JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」 setTimeoutやsetIntervalはタイマー関連の関数ですが、沢山使うとどこで何やってるかわかりにくくなって管理がめんどくさいですね。 timingプラグインを使えば、次のように書けば 0.3秒ごとにクラスをつけたり消したりということが可能。これにより文字を点滅させたりする処理が簡単にかけます $('.example1').repeat(300).toggleClass('blink'); repeat は setIntervalにあたり、何度も実行させるメソッドでありますが、setTimeoutの対応としてwaitメソッドがあります。 次のように書けば、0.5秒後にクラスを追加し、その0.2秒後にクラスを削除というような処理が可能です。これをsetTim
jQuery++
Hi, I’m jQuery++. I am a MIT licensed collection of extremely useful DOM helpers and special events for jQuery 1.8 and later. I’m not a UI project like jQuery UI or jQuery Tools. Instead, I’m all about providing low-level utilities for things that jQuery doesn’t support. If Underscore is jQuery’s functional-programming tie, I am jQuery’s bald-spot covering toupee. Select the plugins you want and c
立体感がリアルなON・OFFスイッチ実装jQueryデモ:phpspot開発日誌
jQuery Fancy Switch | Papermashup.com 立体感がリアルなON・OFFスイッチ実装jQueryデモ。 CSS3でやっているわけではなく、画像を切り替えているだけなのでそこまで驚くことではないかもしれませんが、かなり分かりやすいデザインであることは言うまでもなく、更にオシャレなデザインとなっております つい押したくなってしまうようなデザインですね 関連エントリ iPhoneのON/OFFを実現するjQueryプラグイン「iCheckbox」 iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 iPhoneのON/OFFを実現するjQueryプラグイン「iCheckbox」
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ - Shinichi Nishikawa's
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ 2011 10/11 グラフを描画してくれるjQueryプラグインを紹介します。 グラフを動的に作ってくれるものとしては、他のjQueryプラグインやGoogle Chartというサービスなどがあります。 が、今回の”jQuery Visualize”は、中でも一番使いやすそうでしたので、ご紹介します。 他のプラグインについては、【jQuery】IEでも使えるグラフ描画ツール | 岡山のWebプログラマーがつぶやくブログ | 神歌.blogでまとめて紹介されています。 作れるグラフの種類 グラフは以下のものを使うことができます。 棒グラフ 線グラフ 線グラフで線の下を薄く塗れるやつ 円グラフ デザインは二種類 冒頭写真の黒っぽいCoolなのと別に、白っぽいのも用意されています。 また、背景画
iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」:phpspot開発日誌
Catch My Fame New jQuery LightSwitch Plugin iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」。 次のようなUIで、チェックボックスやradioボタンと同じ働きをするUIを作ることが出来ます。 true, false で on/ off を切り替えるUIと、それらがDisabledになった例 radioボタンと同じ動きをする例。１個をyesにすると他がnoになります。 デモはこちら checkboxはありましたが、radioとして動くのは無かったかもしれませんね。 関連エントリ iPhoneのON/OFFを実現するjQueryプラグイン「iCheckbox」 iPhoneスタイルのチェックボックスをjQueryで簡単実装 何を入力したかが分かるiPhoneスタイルのパスワ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.matts411.com/post/grid/