様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」:phpspot開発日誌
様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 2012年11月13日- Jquery Slider 様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 ウェブ上から超細かくパラメータを調整して、独自のスライダーを作ることが可能です。 既存のスライダープラグインを落としてみたけれど、どうもこだわりの挙動にはならない、とお悩みの場合に使えそうです。 パラメータ調整画面「BuildYourOwn」ボタンで現れ、カスタマイズが容易に行えます 画像切り替えのエフェクトも大量のエフェクトから選択が可能です。 関連エントリ CSS3を使ったクールなスライダー実装jQueryプラグイン「slideControl.js」 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 これは新
8bitキャラクターを描画できるjQueryプラグイン「EightBit.js」:phpspot開発日誌
Jquery Eight-Bit Plugin 8bitキャラクターを描画できるjQueryプラグイン「EightBit.js」。 サイト上の描画ツールを使ってドット絵を描いて、そのドット絵を描画できるというもの。画像ではなくCSSなため、拡大してもうまい具合に８ビット感が出せます。 ボタンを押すと、グラフィックをコード化したものが出力されるのでそちらをデータとして描画できます なかなか面白い仕組みですが、画像の変換ツールなんかが出てきたら実用的ですかね 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 クールなドアノブ風の％グラフを描画できるjQuery Knob XMLを超見やすく折畳み表示できるjQueryプラグイン「XML Tree」 faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon
XMLを超見やすく折畳み表示できるjQueryプラグイン「XML Tree」:phpspot開発日誌
XML Tree - visualise and traverse your XML | jQuery Plugins Demo XMLを超見やすく折畳み表示できるjQueryプラグイン「XML Tree」。 APIなんかでXMLはよく使うようになりましたが、XML自体を次のように折畳み可能でスタイルされたインタフェースで見ることができるjQueryプラグインのご紹介です。 ブラウザベースの味気ないXMLビューワよりも見やすい場合がありそうです。 次が実装のためのコード。描画のコードが超簡単なのもいいですね。 関連エントリ 綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」 折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」 WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jqu
独自デザインのラジオボタン・チェックボックスを超簡単実装できるjQueryプラグイン:phpspot開発日誌
Screw Default Buttons! | Custom Radio Buttons and CheckBoxes 独自デザインのラジオボタン・チェックボックスを超簡単実装できるjQueryプラグイン。 ONかOFFの状態の２枚の画像を用意してjQuery関数で初期化するだけで簡単に独自デザインのものが作れます。 実装コード例。超簡単ですね。 追加のCSSでよりスタイルを独自に変えることも可能です 関連エントリ 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」 独自デザインselectボックス実装時に使えそうなjQueryプラグイン「EasySelectBox」 CSS3で独自デザインの綺麗なボーダーを実装する例
ChromeをiPhoneシミュレーターにできる拡張「IPSim」:phpspot開発日誌
iPSim - Chrome Web Store ChromeをiPhoneシュミレーターにできる拡張「IPSim」 IPSimを使えばChromeをiPhoneシミュレーターにすることが出来ます。 インストールすると次のようにボタンが追加されます クリックするとシュミレーターが現れます。 縦・横方向での表示が可能。 以下、横表示の例 Chrome自体がWebKitベースなので実機でもそれほと差異がない点にも注目。 ChromeでサクッとiPhone対応したい場合に入れておくとよさそうですね。 関連エントリ PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 PHPフロントエンドのコンソールロギング用Chrome拡張「C
新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」:phpspot開発日誌
新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」 2011年04月25日- 新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」。 この春、会社に入って、サーバに入って vim でプログラミングさせられている人はそれなりにいそうですが、その場合に速攻でプログラミングをマスターできるquickrunプラグインを入れておきましょう。 プログラミングを覚えるには作って動かすが一番いいですが、「書いて」→「保存して」→「実行して」を一瞬で行えます。 具体的にはプログラムを書いていて、コマンドモードで「￥r 」をタイプするだけでペインが分かれてプログラムの実行結果が得られます。 VPSなどを借りて、これからプログラミングをはじめようって方にも有効です。 かなりインスタントに実行できるので、こう書くとこう出る、がサクサク進められる
ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit... 次の記事 ≫：かなりいい感じのWordPressテーマ２０ Allan Jardine | Reflections | Visual Event ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」。 JavaScript で開発していて、jQuery等の各種フレームワークや、on〜 を使ってイベントを埋め込むことは多いですね。 後になって、どこにイベントがあるのかをすぐ見える化し、どのような処理が記述されているのか、確認することのできるブックマークのご紹介です。 当サイトにはそれほどイベントが組み込まれていませんので、Yahoo! Japanのトップページで試してみます。 ブックマークレットを起動すると、グレーアウトされ、エレメントの上
JavaScriptコーディングに関するテクニックやパフォーマンス等のリファレンス集:phpspot開発日誌
最近発見した、JavaScriptコーディングに関するテクニックやパフォーマンス等の参考になりそうなエントリをリファレンスをまとめてみました。 Avoiding Problems With JavaScript’s getElementById Method in Internet Explorer 7 | Impressive Webs IE7のgetElementByIdで起こる問題を避けるためのTIPS集。 How to add a CSS Link programmatically using JavaScript <link>タグをJavaScriptによって動的に作成してCSSを動的に設定するコード例 JavaScript CSS Selector Benchmarks CSSセレクタでDOMにアクセスする際の各フレームワークでの速度ベンチマーク比較 6 Ways To Wor
これは絶対覚えておいた方がよいシルエットの素材集:phpspot開発日誌
これは絶対覚えておいた方がよいシルエットの素材集。 85サイトのフリーかつハイクオリティなシルエット素材集が物凄い勢いでまとまっています。 覚えておくと色々な場面で使えることは間違いなさそう。 人型だけじゃなくて、動物や昆虫・植物などそろってます。 リンク先は以下のＵＲＬから参照してください 85 Free High Quality Silhouette Sets | Graphics
デザインのインスピレーションを受けるために便利なサイト集:phpspot開発日誌
50 Best Sites To Get Design Inspiration|Dzine Blog デザインのインスピレーションを受けるために便利なサイト集が紹介されていましたので一部ご紹介。 暇なときにでも見ていれば、感性を上げられそうなサイトばかりです。 Design Flavr 多数あるデザインサイトを、フリーワード、カテゴリ、色、タグなどから自在に検索することが出来ます Flashなサイト、CSSなサイトといった感じでカテゴリわけ 色による検索機能。作っているサイトに似た色を選択し、ちょっと物足りないかもという構築中のサイトに付け加える何かのインスピレーションを見つけられるのかも Muse サムネイルでデザインサイトを順に紹介 Cool Showcase 絵の検索サイト。カテゴリ、タグ、フリーワード検索が可能 Digital Abstracts 比較的大きなサムネイルとともにクー
HTMLだけでは実現できないドロップダウンチェックリストの作成JavaScript:phpspot開発日誌
jQuery Dropdown Check List HTMLだけでは実現できないドロップダウンチェックリストの作成JavaScript。 複数選択式の選択リストは普通に作成することが出来ますが、チェックボックスを使ったわかりやすいＵＩの実現は難しいですね。 「jQuery Dropdown Check List」ならjQueryプラグインなので、非常に簡単に実現できます。 $("#s6").dropdownchecklist(); のように、１行で初期化できるところも素晴らしいですね。 一昔前にやっていれば、どうやってやってるんだろうと検討もつかなかったと思いますが、進化したものです。 関連エントリ JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
2008年に注目を集めた使えるJavaScriptライブラリ集:phpspot開発日誌
Best of 2008 - JavaScript | Design Shack 2008年に注目を集めた使えるJavaScriptライブラリ集が紹介されていました。 どれも非常に便利でサイト構築に役立ってくれるでしょう。 sIFR Lite Javascriptでテキスト文字列を綺麗な画像にしてくれるライブラリ。 画像部分にはFlashを採用している。検索クローラーフレンドリ。 <h3>How is this different than the original sIFR?</h3> ↓ DD_belatedPNG IE6でも透過PNGに簡単に対応させられるライブラリ The EqualHeights jQuery Plugin 異なる高さのブロックを統一してくれるライブラリ ↓ DD_roundies 角丸の簡単実現ライブラリ jQuery.popeye ポップアップではなく、サイト
もうサイトのメニュー作成には困らない！多種多様なサイトメニュー配布サイト「Styled Css Menus」:phpspot開発日誌
Styled Css Menus - High Quality Web Based Professional Css Menus: allmenus もうサイトのメニュー作成には困らない！多種多様なサイトメニュー配布サイト「Styled Css Menus」。 ということで次のようなメニューのサンプルダウンロードが可能なサイトのご紹介。 ダウンロードページ CSSなのでちょっとスタイルを変えてオリジナルにしてみるのも良さそう。 CSSメニューでいうと、次の関連エントリも参考にできます。 デザイン性に優れたCSSメニュー集 使えるCSSメニューいろいろ CSSで作成されたサイトのメニューサンプル集 CSSのみでクールな階層メニュー作成サンプル CSSのクールなメニューをオンラインで簡単生成「CSS Menu Generator」
ページ内でpromptやconfirmの実行を可能にするJavaScriptライブラリ「pprompt.js」:phpspot開発日誌
ページ内でpromptやconfirmの実行を可能にするJavaScriptライブラリ「pprompt.js」 2006年11月29日- p0t: pprompt.js jsでデフォルトのalert, confirm, promptを単に置き換えるような単純なライブラリないかなと思って探してました。 ページ内でpromptやconfirmの実行を可能にするJavaScriptライブラリ「pprompt.js」。 JavaScriptベースのプロンプトダイアログって何か使いにくい感じがしていたのですが、このライブラリがあればその不満も払拭できそうです。 実装も簡単で、必要なCSSとJavaScriptを読み込んで、次のようにアンカーオブジェクトのonclickイベントから呼び出すだけです。 <ul> <li><a href="#" onclick="PPrompt.alert('This i
高速＆シンプルなJavascriptテンプレートシステム『RND』:phpspot開発日誌
amix.dk : RND - fast and simple JS template system As web applications get more dynamic and complex, it's crucial to know what's the fastest way to render content. I have done some research and I am gladly sharing it with you. 高速＆シンプルなJavascriptテンプレートシステム『RND』の紹介。 Ajaxなどを駆使して動的にWebアプリケーションのHTMLを書き換える手法は、最近のWebアプリのトレンドとなっています。 動的にWebアプリケーションのHTMLを書き換える方法としては次があります。 これらの方法のそれぞれのベンチマークを取ると、 document.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スピード感が凄いプログレスバー実装ライブラリ「progress.js」:phpspot開発日誌
JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」:phpspot開発日誌