タグ

jqueryに関するt9aのブックマーク (161)

  • かなりクールなjQueryのメニュープラグインやチュートリアル集:phpspot開発日誌

    15 Fresh jQuery Menu Plugins and Tutorials かなりクールなjQueryのメニュープラグインやチュートリアル集 メニューというと便利なものが多かったりしますがデザイン性も秀逸なものといえば、その中から限られたものになります。 「むむぅ、これは」というデザインのものが多数紹介されていましたのでご紹介です。 1からリデザインしなくても少しの手間で実用的なものが実装できそうです これはつかえますね 関連エントリ WindowsのメニューバーっぽいUIを実現できるjQueryプラグイン「Win Menu」 Googleスタイルのシンプルなドロップダウンメニュー実装jQueryプラグイン 画像がダイナミックにスライドするメニューバー実装jQueryプラグイン「pictureMenu」 カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flowe

    t9a
    t9a 2011/07/08
  • A Colorful Clock With CSS & jQuery Tutorialzine

    The first wave of Christmas holidays passed and we are looking forward to New Year’s Eve for a fresh start at all those things we failed to do the last 12 months. And in the mood of the upcoming holiday, this week we are going to make a colorful jQuery & CSS clock, which will help you keep track of those precious last seconds of the year. This is also the first tutorial that features our first ver

    t9a
    t9a 2011/07/08
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    t9a
    t9a 2011/07/07
  • http://tagedit.webwork-albrecht.de/

    t9a
    t9a 2011/06/27
  • [JS]jQueryのプラグイン33 1選 -2011年6月 | コリス

    galleryFocus フォーカスした周辺をアニメーションでフェードさせ、中心をくっきり見せるギャラリー。 [ad#ad-2]

    t9a
    t9a 2011/06/27
  • サイト内で動くデジタル時計を実装するためのjQueryプラグイン「Clock」:phpspot開発日誌

    jQuery Dynamic Clock Plugin | jQuery Plugins サイト内で動くデジタル時計を実装するためのjQueryプラグイン「Clock」。 ちょっとサイト内で動く時計を作りたい場合に、$(element).clock() とやるだけでデジタル時計がエレメント内に現れるという便利なプラグインです。 次のような時計が作れます。CSSデザインなのでデザイン調整は簡単ですし、フォーマットもオプションで簡単に調整できます デモサイトはこちら PCに時計あるからと思っていても時計を表示していない環境とかもあり、実装したいというニーズがあるときにサクっとやっちゃえるので便利かもしれませんね。 関連エントリ 独自デザインselectボックス実装時に使えそうなjQueryプラグイン「EasySelectBox」 タイマーを作る際に便利なjQueryプラグイン「jQuery T

    t9a
    t9a 2011/06/24
  • HisasAnn.com is for sale | HugeDomains

    Make 24 monthly payments Pay 0% interest Start using the domain today. See details

    HisasAnn.com is for sale | HugeDomains
    t9a
    t9a 2011/06/21
  • Facebookライクなサイドバーが簡単に実現可能なjQueryプラグイン「MyFacebookStyleSidebar」:phpspot開発日誌

    Facebookライクなサイドバーが簡単に実現可能なjQueryプラグイン「MyFacebookStyleSidebar」 2011年06月09日- Official Demo page for MyFacebookStyleSidebar jquery plugin Facebookライクなサイドバーが簡単に実現可能なjQueryプラグイン「MyFacebookStyleSidebar」 このプラグインを使えば左側にメニュー、右側にコンテンツがあり、メニュークリックでAjaxなどによって画面を切り替えるUIが実現できます。 ajaxでページ読み込みはもちろんiframeも利用可能みたいです。 ローディング画像を表示できたり、SEOフレンドリなAjaxコール、そしてクロスブラウザ動作という特徴を持ちます。 実際に数億人が使うUIを真似ることで、世界中の人々が使いやすいUIというものを構築で

    t9a
    t9a 2011/06/09
  • HTML+CSS主体のJavaScriptエフェクト! 簡単で「使える」jQueryテクニック(解説つき)

    4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課(めか)でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType(ブログ構築ツール)での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript(以下 JS)プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。 この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer

    t9a
    t9a 2011/06/01
  • もう知らないでは許されない!!「これからはじめる」という人のためのjQuery Mobile情報まとめ | ke-tai.org

    もう知らないでは許されない!!「これからはじめる」という人のためのjQuery Mobile情報まとめ Tweet 2011/5/27 金曜日 matsui Posted in Android, iPhone, 記事紹介・リンク | 4 Comments » モバイルサイト作成のためのフレームワーク「jQuery Mobile」が、すごい人気ですね。 当初は数ある選択肢の中の一ツールとして程度の扱いでしたが、AdobeのDreamweaverが格対応するなど、その勢いは留まるところを知らず、根幹的な技術になりそうな気配すらあります。 今回は過去に当サイトで掲載させていただいた情報も含め、jQuery Mobileを学ぶ上で知っていた方が良さそうなリンクをまとめてみました。 家サイト。英語が苦手な私は、主にダウンロード用途ぐらい。 → jQuery Mobile 家サイト(英語) [j

    t9a
    t9a 2011/05/31
  • fieldset要素単位で横スライドするバリデーション付きの入力フォーム用jQueryプラグイン・jQuery Stepy - かちびと.net

    縦長になるような入力フォームにいいかな と思ってメモ。fieldsetでグループ化された 要素単位でスライド化してくれます。下部 までスクロールする必要が無くなるのと、 どこが誤入力か分かりやすい、場所を取ら ないなどのメリットがあります。 特に、入力項目が長いフォームは離脱率を高くする可能性も否めませんので、入力プロセスを補助するのはユーザビリティに大きく貢献出来るかと思います。IE6でも7でも動作するようです。 日語に直してみました。これは1例で、3つに分けなければならないわけではありません。 入力をミスすると、次のfieldset要素に進めない(スライドできない)という仕組み。 fieldsetごとにバリデーションチェックを行うのでユーザーもストレスが無いような有るような。 うん、ストレス無いです。(キリッ ファイルとか <script type="text/javascript"

    fieldset要素単位で横スライドするバリデーション付きの入力フォーム用jQueryプラグイン・jQuery Stepy - かちびと.net
    t9a
    t9a 2011/05/27
  • HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。:phpspot開発日誌

    HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 2011年05月26日- DESKTOPIFY Aquaron HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 このライブラリを使うことで簡単にjquery風の記法でデスクトップ通知が出来るようです 試しに、入力して送信してみると。 という具合にChromeだと表示されます。 通知していいかどうかも聞かれるのでそこを一度許可すれば、便利な通知として使えます。 LightBox的通知もいいですが、わかりやすさでいえばこちらもいいですね。 関連エントリ JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 ブラウザに分かりやすい通知を送れるスクリプト色々 利用者に対し非常に分か

  • 複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」:phpspot開発日誌

    複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」 2011年05月25日- JSONSelect 複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」 jQuery成功の背景には、そのDOMへのアクセスのしやすさがひとつの要因だと思いますが、JSONSelectを使うと、JSONデータへのアクセスをCSSセレクタっぽく、jQueryっぽく簡単にアクセスできます。 例えば、次のようなJSONデータがあったとしましょう。 JSONSelectで、「.languagesSpoken .language」として選択すると、次のように要素を選択できます。 例えば、検索結果などで、同じ構造の要素がリストとして帰ってくるようなケースにおいて、同じ名前の属性リストをサクッと取得可能。 上位階層が指定できるた

    t9a
    t9a 2011/05/25
    JSON...
  • jQueyを使う場合に覚えておくと便利なChrome拡張:phpspot開発日誌

    jQueyを使う場合に覚えておくと便利なChrome拡張が2つほどありましたのでご紹介。 マニュアルを検索する際にクイックに目的のものにアクセスし、開発スピードを上げられます。 jQuery API Browser ツールバーにボタンを追加してマニュアルをインクリメンタル検索。サンプルコードまでをChrome上で出せます。 インストールするとボタンが表示されます。 インクリメンタル検索が可能。 クリックすればサンプルコードも表示されます。 これは便利。 jQuery API Search 標準の検索窓に「jq ajax」などをタイプすればjqueryのマニュアル検索に飛べます Chrome上でインクリメンタルな検索が可能。 結果はjQueryのサイトにて閲覧 とりあえずどちらかいれておいて損はなさそうです。 関連エントリ PHPのエラーなんかをブラウザで確認できるChrome拡張「php-

  • テーブルを使ったいろいろなjQueryプラグイン26個まとめ | Web活メモ帳

    料金表や一覧を表示する際に欠かせないテーブルコーディングで、検索や並び替え、ページング、グラフ表示など色々なものがあったので、探しやすいようにjQueryプラグインをまとめてみました! jQuery Visualize HTML5とjQueryを使ってテーブルの値をグラフで表示する事が出来ます。 jquery.csv2table.js エクセルなどで作ったCSVファイルを読み込み、クロスブラウザなテーブル表示を行うjQueryプラグイン。 行の絞り込みや文字列検索などかなり高機能になっています。 jExpand 表、画像、リスト、図やその他の要素を折りたたみ表示する事ができます。 Fixed Header Tables ヘッダーを固定して表示します。Excelでは良く使いますね。 縦に長い表を使う場合に非常に便利です。 treeTable テーブルの中にツリー構造を実装できます。 Flex

    テーブルを使ったいろいろなjQueryプラグイン26個まとめ | Web活メモ帳
    t9a
    t9a 2011/05/17
  • jQuery MobileでGoogleMap APIを使ったサンプルがMITライセンスで公開されてた - かちびと.net

    なかなかいいサンプルだったのでシェア。 jQuery MobileでGoogleMap APIを使った サンプルがオープンソースで公開されて いました。ストリートビューなども表示する ことが可能です。興味の有る方はチェック してみては。 スマフォにGoogleMapを表示させるのに、Google Maps JavaScript API V3が必要みたいですが、これをスマフォ対応を簡略化するjQueryプラグイン、jQuery Mobileで使おう、というもの。 jquery-ui-map GoogleMap APIをjQuery Mobileで使ったサンプルです。jquery-ui-mapというプラグインも使用しています。このサンプルはMITライセンスでソースが公開されていますよ。 以下、デモのキャプチャです。 iPhone iPhoneでの実装状態です。 ランドスケープ時も自動で横幅をあ

    jQuery MobileでGoogleMap APIを使ったサンプルがMITライセンスで公開されてた - かちびと.net
    t9a
    t9a 2011/05/11
  • リンクの開きかたを自在に管理できるjQueryプラグイン「Link Manager」:phpspot開発日誌

    jQuery Link Manager Plugin リンクの開きかたを自在に管理できるjQueryプラグイン「Link Manager」。 リンクを新しいウィンドウで開いたり、同じウィンドウで開くという部分は target で指定できますが、これをjQueryを使って一元管理することが出来ます。 例えば、拡張子がpdfやdocだった場合に別ウィンドウで開く、という使い方や、ドメインに〜が含まれていたら別ウィンドウで開くという具合に使えます。 リンクごとにいちいちターゲットをふらずに済むため、ケースによってはなかなか便利そうです。 使い方も次のように簡単。 includeで新ウィンドウで開く対象のURL文字列を増やしたり、逆にexcludeで同じウィンドウで開く設定にしたりするようです。 targetを気にすることなく、HTMLのコーディングに集中できるという点では便利ですね。 自動でやる

    t9a
    t9a 2011/05/11
  • 実質1行でメールフォームのSPAMを防ぐjQueryスクリプト

    3月に フリー写真素材 :: Free.Stocker という無料写真素材サイトをオープンし、このサイトのサイドバーに クックパッド みたいに気軽にメッセージを送れるフォームを設置しました。 しばらくは何事も無かったのですが、ある日突然大量のSPAMメッセージが送られてくるように…(●´⌓`●) 酷い時には3分〜5分に1通送られてくるし、試しに送り元のIPアドレスホストを調べてみたら毎回バラバラなので困りました。 こんな時、多くのサイトでは CAPTCHA と呼ばれる読みづらい英数字の羅列の画像を入力させることが多いと思いますが、それでは「気軽にメッセージを送れるフォーム」とは言いづらいですし、サーバーにもページを表示させるたびに毎回余計な負担がかかってしまいます。 試しにWordPressのSPAM防止などに広く使われている Akismet というSPAM防止APIをメール送信スクリプ

    実質1行でメールフォームのSPAMを防ぐjQueryスクリプト
    t9a
    t9a 2011/05/10
  • 美しいフォームデザインを実装する事が可能なjQueryプラグイン・Ideal Forms - かちびと.net

    チェックボックスやラジオボタンなど、フォーム周り のデザインを美しくする事が出来るjQueryプラグ イン・Ideal Formsのご紹介。スタイルもいくつか 用意されており、フレームワークとして使えるよう です。デザインテーマもいくつか用意されている ので好みで選ぶことも出来ますね。 ボタン、セレクト、ラジオボタンやチェックボックス等のフォームデザインを変更できます。デザイの変更はcssのみで可能なフレームワークタイプなのでノンプログラマーな方でも気軽に使えそうですね。IE6以外は対応しているようです。 フォームのデザインをガラッと変えることが出来ます。よりデザインに統一感を出せそうですね。 テーマも用意されている Ideal Formsはフレームワークとしても利用出来るように、cssでデザインが変更できる作りになっています。現在は3つのcssファイルがテーマとして用意されていますのでそ

    t9a
    t9a 2011/05/09
  • jQuery1.6の更新内容をまとめたよ。 | Ginpen.com

    昨日jQuery1.6が公開されたので、その内容をまとめてみました。 jQuery: » jQuery 1.6 Released だいたい原文にそってますが、翻訳ではありません。 追記 : data()の扱いが誤っていたので修正しました。キーをキャメルケースにする必要があるとしていましたが、引数を与えずにマップを得た場合の話で、引数にキーを与えて個別に取得する場合は過去のコードと互換性があります。thanks @GeckoTang !(23:11) 変更点 既存コードに影響がある変更がいくつかあります。 data属性の自動マッピング ハイフン “-” を含む名前のとき、$element.data()に引数を与えずに得たマップのキーはキャメルケースに変換されるようになりました。 var $div = $('<div data-abc-xyz="123" />'); var data = $d

    jQuery1.6の更新内容をまとめたよ。 | Ginpen.com
    t9a
    t9a 2011/05/05
    1.6の更新内容