ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」:phpspot開発日誌
ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」 2011年06月23日- A jQuery plug-in for Lens Effect Image Zooming ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」。 次のように、画像の特定部分の円形のみをズームするようなUIが簡単に作れちゃいます。 ECサイトなどで商品を拡大するように実装されていたらお客さんに喜んでもらえるかも。 レンズの大きさもピクセル指定で自由自在です。 白黒写真がレンズを入れることでカラーになるみたいな効果も。 レンズの色やサイズも選べます。 実装の容易さも素晴らしくて、.imageLensで初期化するだけです。 関連エントリ タイマーを作る際に便利なjQueryプラグイン「jQuery Timer」
[JS]ページネーションをもっと楽しく、使いやすくするスクリプト -jPaginator
カラフルなデザインだけでなく、自動加速のアニメーション、スライダーなど、ユーザビリティを向上する機能を備えたページネーションを設置するjQueryのプラグインを紹介します。 jPaginator デモ [ad#ad-2] 自動加速のアニメーションは、それぞれのデモの左右の矢印をマウスオーバーすると、加速のアニメーションでページの数字が送られます。 スライダー機能はデモ1と3に実装されており、大量のページでも一気に移動できます。 スライダー機能も装備 スクリプトのオプション スクリプトのオプションでは、さまざまなものが設定できます。 selectedPage:1, 現在の選択されたページ nbPages:54, ページの合計数 length:10, スライドによるページの数 widthPx:30, ページ数の幅（px） marginPx:1, ページ数のマージン（px） withSlider
Google Chart APIを使ったQRコードを超簡単に描画してくれるjQueryプラグイン「MyQRCode」:phpspot開発日誌
Google Chart APIを使ったQRコードを超簡単に描画してくれるjQueryプラグイン「MyQRCode」 2011年06月14日- Official Demo page for MyQRCode jquery plugin Google Chart APIを使ったQRコードを超簡単に描画してくれるjQueryプラグイン「MyQRCode」。 Google Chart API でQRコードを作る際にURLが長くなってなんとなく後でHTMLの可読性が悪くなり保守性が悪くなってしまったりしそうですが、このプラグインを使えばシンプルに、しかも動的にQRコードを出すことができます。 直接Canvasなどを使って描画するスタイルのものもありますが、ブラウザが対応していなければ表示できないので、クロスブラウザを保証したい場合は無難に<img>タグに頼るのがよさそうですね。 コードは次のように
Essential JavaScript And jQuery Design Patterns - A Free New Book
Essential JavaScript And jQuery Design Patterns - A Free New Book November 14, 2010 Hey guys. Today I'm happy to announce the release of a free book I've written called 'Essential JavaScript & jQuery Design Patterns For Beginners'. Design patterns are reusable solutions to commonly occurring problems in software development and are a very useful tool to have at your disposal. I wanted to write thi
jQueyを使う場合に覚えておくと便利なChrome拡張:phpspot開発日誌
jQueyを使う場合に覚えておくと便利なChrome拡張が２つほどありましたのでご紹介。 マニュアルを検索する際にクイックに目的のものにアクセスし、開発スピードを上げられます。 jQuery API Browser ツールバーにボタンを追加してマニュアルをインクリメンタル検索。サンプルコードまでをChrome上で出せます。 インストールするとボタンが表示されます。 インクリメンタル検索が可能。 クリックすればサンプルコードも表示されます。 これは便利。 jQuery API Search 標準の検索窓に「jq ajax」などをタイプすればjqueryのマニュアル検索に飛べます Chrome上でインクリメンタルな検索が可能。 結果はjQueryのサイトにて閲覧 とりあえずどちらかいれておいて損はなさそうです。 関連エントリ PHPのエラーなんかをブラウザで確認できるChrome拡張「php-
リンクの開きかたを自在に管理できるjQueryプラグイン「Link Manager」:phpspot開発日誌
jQuery Link Manager Plugin リンクの開きかたを自在に管理できるjQueryプラグイン「Link Manager」。 リンクを新しいウィンドウで開いたり、同じウィンドウで開くという部分は target で指定できますが、これをjQueryを使って一元管理することが出来ます。 例えば、拡張子がpdfやdocだった場合に別ウィンドウで開く、という使い方や、ドメインに〜が含まれていたら別ウィンドウで開くという具合に使えます。 リンクごとにいちいちターゲットをふらずに済むため、ケースによってはなかなか便利そうです。 使い方も次のように簡単。 includeで新ウィンドウで開く対象のURL文字列を増やしたり、逆にexcludeで同じウィンドウで開く設定にしたりするようです。 targetを気にすることなく、HTMLのコーディングに集中できるという点では便利ですね。 自動でやる
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
画像の領域選択が超簡単になるjQueryプラグイン「imgAreaSelect」:phpspot開発日誌
imgAreaSelect jQuery plugin - Examples - odyniec.net 画像の領域選択が超簡単になるjQueryプラグイン「imgAreaSelect」。 他にも同様のライブラリはありますが、これは必要な便利機能がいろいろあって使えそうです <img id="pic" src="..."> とあったとすれば、$("#pic").imgAreaSelect(); で基本は動作します。 あとはオプションで、 ・領域の最大サイズを指定 ・領域のアスペクト比を指定 ・初期選択領域の指定 が可能です。 こういう機能は使っていくにあたってはあったほうが便利そうですね。 UIに癖がなくて汎用に使えそうなところもGood 関連エントリ 画像編集ツールで領域を選択しているようなエフェクトをCSSとGIFアニメで実現する方法 選択範囲をドラッグ＆拡大して写真の部分的な拡大がで
Webのテキストをもっと分かりやすく出来そうなラベル作成用jQueryプラグイン「jQLabel」。:phpspot開発日誌
Webのテキストをもっと分かりやすく出来そうなラベル作成用jQueryプラグイン「jQLabel」。 2011年03月09日- jQLabel jQuery Plugin - Create Beautiful Labels Webのテキストをもっと分かりやすく出来そうなラベル作成用jQueryプラグイン「jQLabel」。 文字列を<span class="label">好きな文字</span>として囲えば次のように文字修飾できます。 ワードごとに色分けしてテキストを分かりやすくすることができそうです。 コードは次のように書きます。ワードと、その色を連想配列で定義してあげる感じです。 $(".label").jQLabel({"pointer":true, "labels":{ "awesome":"#FF9E00", "gmail":"#A65D03", "labels":"#A4977
最近気になってきたjQueryについて色々調べてみました - もとまか日記
最近、「jQuery」というキーワードをよく見かけます。 これって何だろ？と思ったので調べてみたら、JavaScriptのライブラリのようで。 てことで、最近ちょっと気になってたJQueryについて調べてみました。 jQueryの概要 まずは難しいことは抜きにして、以下を読んでみると分かりやすいです。 はじめてのjQuery jQuery仕様関連 一応ですが、仕様について。 jQuery 日本語リファレンス 必要に応じてみればいいかな？と思ってるので、まだ細かくは見てません。 初心者向けの基礎知識、基礎講座 最初は初心者向けの記事を読んでみると良さそうです。 ASCII.jp：40分で覚える！jQuery速習講座一晩で覚えるjQueryの逆引き基礎サンプル7つjQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみるjQuery 開発者向けメモ サンプル、プラグイン 調べてて
リンクにカーソルを合わせるとQRコードをポップアップさせられるjQueryプラグイン「qrTip」:phpspot開発日誌
リンクにカーソルを合わせるとQRコードをポップアップさせられるjQueryプラグイン「qrTip」 2011年01月14日- kovshenin.com // Thinking about WordPress, PHP, MySQL, jQuery, Web 2.0, PR and Social Media リンクにカーソルを合わせるとQRコードをポップアップさせられるjQueryプラグイン「qrTip」 次のように、カーソル位置のＵＲＬをQRコードに変換して表示させちゃうことができます。 画像自体はGoogle Chart APIを使うので、サービス終了の懸念は少ない上にスピードも高速です。 使い方はいたって簡単で、jQuery(element).qr() のように qr メソッドを読んであげるだけです。 デザインもなかなかいい感じですね。 携帯サイトへのリンクの誘導にはもってこいのプラ
ブラウザに分かりやすい通知を送れるスクリプト色々:phpspot開発日誌
あけましておめでとうございます。 今年も淡々と更新をしていきます。よろしくお願い致します。 今年一発目のエントリはブラウザに分かりやすい通知を送れるスクリプトを色々とまとめてみました。 jNotify ページ全体がグレーアウトし、メッセージが強調表示されます。 他の操作がしばらくできないので、確実にメッセージを読んでもらえるようにできます。 アイコンの変更や、メッセージにHTMLを使うことも可能。 Notimoo ページの右上なんかにフェードインしながらブロックをアニメーション表示させられるJSライブラリ。 複数メッセージを連続して出すことが出来ます。 jQuery Notify bar Twitterの通知バーっぽいＵＩでユーザ通知できるjQueryプラグイン。 これも非常に分かりやすい通知が行えます。 jQnotice 吹き出しっぽいデザインで通知が行えます SlideNote 指定位
jQuery.stopのjumpToEnd引数が便利すぎてやばい（JavaScript Advent Calendar 2010 5日目） - KAYAC engineers' blog
JavaScript Advent Calendar 20105日目のago（@kyo_ago）です。 jQueryのソースを眺めててjQuery.stopに引数があることに気づいたので調べてみました。 まず、簡単なスライドダウンメニューを作ってみたいと思います。 jQuery.stop 1 - jsdo.it - share JavaScript, HTML5 and CSS JS部分は以下の通りです。 $(function () { $('div').hover(function () { $(this).find('ul').slideDown(); }, function () { $(this).find('ul').slideUp(); }); }); 少し触ると分かると思いますが、マウスがmenuから外れた後も何度も.slideDown、.slideUpが実行されるため非常に
はじめてのjQueryMobile - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 先月10月にアルファリリースされ、つい先日Alpha2が公開されたjQueryMobile。 新たなモバイル向けフレームワークとして期待が高まりますが、 今日はそんなjQueryMobileを、極めてザックリと紹介してみたいと思います。 だいたいのイメージを掴んで頂ければ幸いです。 公式 : jQuery Mobile | jQuery Mobile jQueryではなく、jQueryUIのモバイル版 と、言うべきでしょうか？ jQueryMobileが提供してくれるのは、 スマートフォン向けのテーマスタイルシートと、 それをより簡単にレンダリングする為の仕組みです。 はじめ勘違いしていたのですが、 jQueryをモバイル向けにチューンした物ではないので注意。 使用の際にはjQueryを一緒に読み込む必要があります。 <link
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA