レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」:phpspot開発日誌
レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 2013年03月05日- Sidr - A jQuery plugin for creating side menus レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 iPhoneのfacebookアプリなどで採用されている左や右にスライドするメニューをブラウザ上で実現できるjQueryプラグインです PCでも違和感なく使えるのは嬉しいですね メニューが開いていない状態。 開くと画面が左にスライドしつつ左からメニューが表示されます テーマも白と黒から選べるみたい 関連エントリ Facebookアプリ風パネルメニューのCSS実装デモ「cssPanelMenu」 HTML5＆CSS3なフリーのドロップダウンメニュー２５ レスポンシブなCSSベー
属性設定で簡単にデータバリデーションが出来るJSフレームワーク「Parsley.js」:phpspot開発日誌
Parsley.js 属性設定で簡単にデータバリデーションが出来るJSフレームワーク「Parsley.js」 <input>に対して data-* の形で属性を設定すればデータのバリデーションが簡単にカッコよくできちゃうフレームワークです。 例えば、<input data-type="email">って記述しておけば、そのinputにメールアドレス以外が入力されていればエラーを検出出来ます。 emailだけでなく、数値、URL、アルファベット等のチェックに対応。その他、最低・最高の長さの設定や、必須項目、範囲設定、正規表現、リモートURLによるパラメータチェックができ、とにかくバリデーションするなら全体的に機能が詰まっています。サンプルサイトもBootstrapベースで作られていて、Bootstrapとも相性が良さそう。 FE側でのバリデーションをスマートにやりたいって方は評価してみてもよ
レスポンシブな日付ピッカー実装jQueryプラグイン「pickdate.js」:phpspot開発日誌
Pickadate.js レスポンシブな日付ピッカー実装jQueryプラグイン「pickdate.js」 $('.datepicker').pickadate()、とするだけで次のような大きめの日付ピッカーを表示して日付を選択出来ます。 スマホ、タブレットも自動対応。デザイン的にBootstrapで使ってもいけそうですね これは１つで大体の端末に対応できそうで便利そうです。 関連エントリ Google風のBootstrapテーマ「GoogleBootstrap」 Bootstrapで矢印を描くのなら「Bootstrap Arrows」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」 TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」 Twitter BootStrap に追加できる５つのコンポーネン
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
[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ：領域を拡大 バーの長さが変化していることに注目してください！ Perfect Scrollbarの使い方 Step
コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」:phpspot開発日誌
jQuery Stick ’em: Make Content Sticky on Scroll, to a Point | Viget コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」。 最近よくある、ページをスクロールしてもついてくるサイドバー。position:fixedなどを応用して綺麗についてくるようにできますが、コンテンツが大きく３つに分かれている場合はちょっと実装が難しいかも。 そんな時に使えるのがこのプラグイン。デモページを見て頂ければ分かりますが、コンテンツごとに固定されるサイドバーをわけられるようです。 スクロールしても、サイドバー「Heading」と書かれた部分は右側に固定されて表示されます。 更にスクロールするとコンテンツが別れるので、それ以上は下に来ません。 １から実装するとなるとpositionの切り替えが結構大変で挫折しがちな
画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」:phpspot開発日誌
画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」 2013年01月18日- Image Picker 画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」。 好きな画像を選んでもらう、というようなインタフェースを考えた時に、画像をそのまま表示してクリックして選ぶというのが当たり前のインタフェースですが、これをHTMLで簡単にできるようにするのはちょっと面倒。 というわけで、こちらのプラグインを活用すれば、selectボックスを簡単に画像選択UIに変換出来ます selectのoptionにdata-img-srcといった感じで画像のパスを定義しておいてあげればOK Pinterest風なレイアウトに出来るのも今時のライブラリ感がありますね 関連エントリ フォームをカッコよくするjQuery
普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」:phpspot開発日誌
ParamQuery jQuery Grid Plugin 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 ありきたりなカッコいい、とはいえないような以下のテーブルがあったとします プラグインで初期化すれば、ソータブル、エディタブル、なクールなテーブルに早がわり これは5,6年前でいえば魔法だと思う方は少なくないでしょう。 関連エントリ レスポンシブなテーブルを作るjQueryプラグイン「MediaTable」 テーブルをグラフに変換してくれるjQueryプラグイン レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table So
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
簡易的なクイズを作れるjQueryプラグイン・SlickQuiz - かちびと.net
簡単なクイズコンテンツを作れる、というjQueryプラグインのご紹介です。クイズの回答次第で分岐する、みたいな細かい設定はできませんが、これはこれでシンプルでいいかも。 1問1問回答して進めていくような、簡易的なクイズを作れる、というスクリプトです。 選択肢を選んで進むと別の選択肢が出て正解/不正解を表示させる、という流れ。最後に正解数がとメッセージが出ます。 <script src="jquery-1.7.min.js"></script> <script src="slickQuiz-config.js"></script> <script src="slickQuiz.js"></script> 回答やメッセージはJSONを使うみたいです。 $('#foo').slickQuiz(); あとはクイズを表示させる場所を指定すれば完了 何かで使えるかも。という事で備忘録でした。 Slic
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
jqueryでhtmlの書き換えを行う方法
jqueryでhtmlを書き換える方法はいろいろとあります。 テキストを書き換える方法 $("セレクター").text("書き換え"); 例えば、フリーランスをデザイナーに書き換える <p class="text">フリーランス</p> jqueryのタグは $("p.text").text("デザイナー"); すると <p class="text">デザイナー</p> になります。 htmlタグごと書き換える方法 $("セレクター").html("書き換え"); 例えば、pタグのフリーランスをh3タグのデザイナーに変更します。 <p class="text">フリーランス</p> jqueryのタグは $("p.text").html("<h3>デザイナー</h3>"); すると <h3>デザイナー</h3> にかわります。 htmlの追加 指定した要素内部の先頭に追加する方法 $("セ
「ノンプログラマーのためのjQuery生成ツール」作りました
ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。 追記：イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。 追記：イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。 ツールチップを表示 やっつけで作ったので中のコードはかなりひどいです。あしからず。 １．使い方 本エン
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
まよねこ inside » Blog Archive » 【jQuery】thisの親や子要素の指定方法
jQueryでよくつかう”this”の親要素や子要素を指定する記述をすぐに忘れてしまうので、メモ。 /* 110131 */ 子要素指定方法についての記述で、間違いをご指摘いただいたので、訂正しました。 親要素 thisの親要素を取得する。 [javascript toolbar="true"]$(this).parent().css[/javascript] 参：jQueryで親要素のスタイル変更 : JSをつらつらとダラダラと書く parentのカッコを忘れてて、子一時間悩むとかもう止めたい… 子要素 thisの子要素（ここでは<ul>）を取得する。 [javascript]$(this).children(“ul”)[/javascript] $(“ul”,this).css →これ、間違い（補足は後述） $(this).find(“ul”) →これも、間違い（補足は後述
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
iPhone/iPad用のhtml要素をドラッグ&ドロップできるページを作る – mix-an
技術的な内容の備忘録をつけていこうと思います。 本来はテーマごとにブログをたちあげたほうが良いのでしょうが、とりあえずここで。 iPhone/iPadのSafariでhtmlの要素をドラッグ&ドロップ可能にする方法です。 PC用のWebページの場合はjQuery UIを使えばさくっと簡単に実装できるのですが、iPhone/iPadではマウスではなくタッチ操作になるのでそのままでは動きません。 jQuery UIをiPhone/iPadで動かすにはjQuery UI Touch Punchを利用する必要があります。 jQuery UI Touch Punchはタッチイベントからマウスのイベントへ橋渡しをしてくれるもの。これを使えばマウスでドラッグ&ドロップするのと同様にタッチ操作でドラッグ&ドロップが可能になります。 jQuery UI Touch Punchは読み込ませるだけで使用可能です
iPhone / iPadでオブジェクトのドラッグ＆ドロップを可能にするjQueryプラグインを作った - ハードコイルド・ワンダーランド
jQuery jdragdrop plugin iPhone / iPad向けにWebアプリを作っているとオブジェクトをドラッグ＆ドロップしたい場面によく出くわす。 方法は色々とあるのだが、毎回'var x = event.PageX; ....'とか書くのは面倒なのでjQueryプラグインにして使いまわすことにした。 初jQueryプラグインなので変な書き方をしているかもしれないが、iPad / iPad2 (iOS4 / iOS5)でそれぞれ動作確認できたので一旦リリースすることにする。 これはなに？ iPhoneおよびiPadのSafari上でdiv elementのドラッグ＆ドロップを出来るようにする。 また、オプションとして以下のような機能がある。 ドロップ先のオブジェクト(Droppable Object)を作成できる。 Droppable Objectにしかドロップできないオ
jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ
jQuery、プラグイン、jQuery UI、Web経由のCDNとは CSSの書き方も分かるjQueryプラグイン実践活用法（1） 基本／おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説 デザインハック ＜ リッチクライアント 2009/12/8 今回は「jQuery UI」のより進んだ活用例 ■ jQueryのプラグイン「jQuery UI」とは？ 今回紹介するjQuery UIは、JavaScript（Ajax）フレームワークjQueryのプロジェクトがjQuery用に開発している、以下の機能を提供するプラグインです。 ドラッグ＆ドロップなどのマウス操作の機能拡張 ユーザーインターフェイスを改善するウィジェット（アコーディオン、日付入力、ダイアログ、スライダー、タブなど） 今回は、jQuery UIのドラッグ＆ドロップ機能
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これからのWeb制作に使える、面白いUIを実装できるjQuery・CSS集
