タグ

jQueryに関するcelitanのブックマーク (22)

  • 覚えておくと地味に便利だと思える日が来るかもしれないjQueryのコードスニペット何個か - かちびと.net

    この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 これならjQueryじゃなくてもいいんじゃ 無いか、っていう記事です。短くて使い やすいスニペットなんですが、まぁ用途 は人それぞれだと思うので適当に流して 下さい。自分が使いやすいようにまとめ たいだけです。 そのコードおかしいわーみたいなのあったらすいません。まぁその程度の記事です。というわけでいろいろとツッコミどころ満載かもですが、あんまり気にしないで下さい。じゃあ記事書くなよって話ですけどw デモの見方 jsfiddleというサービスを好んでよく使うのですが、あまり見慣れないかもなので一応デモの見方を。上図の○で囲った部分、Resultを押せばデモ画面に、再生ボタンでリロードします。 簡単なコードなので実践で使うにはもう少し工夫が必要です。また、jQuery

    覚えておくと地味に便利だと思える日が来るかもしれないjQueryのコードスニペット何個か - かちびと.net
  • 簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」:phpspot開発日誌

    簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」 2011年06月15日- jLinkPreview 簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」のご紹介。 リンクを合わせたときにリンク先のイメージが分かるといいですが、それをjQueryプラグインの形で、簡単に実装できます。 サムネイル画像にはwimg.caというサービスが使われています。 サムネイル表示の例 使い方は以下のように初期化すればよいみたい。 画像のプレロードや、サムネイルサイズ(幅・高さ)、フェードや背景色など自在にカスタマイズできますね プラグインもそこまで大きくないため、サムネイルのプロバイダを変更するのもソースをちょこちょこっと変えれば対応できます。 関連エントリ テキストシャドウを自在にアニメーションさせられる

  • [JS]ページをリフレッシュしないでコンテンツをアニメーションでロードするスクリプト -fLoadingSite

    ページをリフレッシュしないで、次々にコンテンツをスライドのアニメーションでロードするjQueryのプラグインを紹介します。 fLoadingSite 0 1 デモページ [ad#ad-2] ロードするコンテンツは、それぞれすべてブックマークが可能です。 上記デモページのトップは「fLoadingSite/sample.html」となり、「About us」をクリックすると、「fLoadingSite/sample.html#aboutus.html」をロードします。 デモページ:About us ※上記リンクで直接「About us」のコンテンツをロードします。 fLoadingSiteの主な特徴 6つのユーザーオプション:url_location, map_location, handler, loadingImg, home_page, page_ref クリック時のhandlerのス

  • 【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 (3) ページャ/ソート機能付きテーブルリストを作る | エンタープライズ | マイコミジャーナル

    動作サンプル - JSON+Ajaxでソートなどを可能にしたテーブルリスト FlexigridはJSON形式やXML形式で一覧画面に表示するデータをやりとりさせることで、ページャやソートなどの機能を簡単に組み込むことができるようになっている。ここではPHPを使用し、MySQLから郵便番号データを取り出してJSON形式で返すサンプルファイルを作成してみた。サーバ実行環境は次のとおり。 OS: FreeBSD 8-current Webサーバ: Apache 2.2.8 PHP: 5.2.6 MySQL: 5.0.51a pdo_mysqlインストール済み 各ソースコードと、実行結果は次のとおり。 zip_json.php (※) <?php function sanitizeTag($var) { if ( is_array($var) ) { $var = array_map("sanit

  • jqueryでラジオボタンのラベルを取得する: Ma note

    ラジオボタンの値を取得する方法は色々なところで紹介されているが、 ラジオボタンのラベルの値が欲しいことがあった。 そんな時に試行錯誤の上に考えた方法。(あんまり需要はないだろうけど。。。) まず、以下のようなhtmlがあるとする。 <input type="radio" name="sexId" value="1" />男 <input type="radio" name="sexId" value="2" />女 選択されたvalue値を取得するには以下の方法で出来る。 var val = $("input:radio[name='sexId']:checked").val() 今回やりたいのは、ラベル(男、女)の値が欲しい。value値は変えられない前提。 色々、探して以下のサイトを参考にした。 http://ascii.jp/elem/000/000/456/456040/index

  • jQueryのセレクタの使い方いろいろ - omnioo lab.

    実際にやってみるとjQueryはかなりおもしろいです。私自身これまで殆どサーバーサイドのスクリプトしか使っていなかったので実際にJavascriptを使ってみるとかなりいい感じです。かつてはJavascriptが比較的へんてこな動き(というのも初心者向けに書かれた解説の殆どがなんか田舎臭いへんてこなサンプルしかない...)だったので、全く興味が持てなかったのですが、jQuery的なライブラリーが手軽に使える現在、これはかなりおもしろいです。いろんなことができそうです。  セレクタの使い方なのですが、jQuery初心者の皆様には結構な朗報かもしれません。(って、普通みんな知っているだろうけど。)  jQueryのよいところはxhtmlにオブジェクトとして簡単にアクセスできることです。直感ですが数年後には標準でこの機能がブラウザーに組み込まれていてもおかしくないといった感じがしないでもないで

  • selectボックスをシンプルなプルダウンに拡張するjQselectable(jQuery.selectable.js) :: 5509

    セレクトボックスのユーザビリティを劇的に向上できるかもしれないjQueryプラグインです。バージョンアップでjQuery.selectable.jsからjQselectableに名前が変わりました。 サンプルを見てみる トピックス 特徴 ダウンロード 導入方法 スタイル 拡張 表示形式 selectable simpleBox エフェクト 透明度 プルダウン位置の調整(少し高度な設定) プルダウンの高さ カスタマイズ 独自のselectボックスに適用させる id、classの引継ぎ 日付で使う Callback関数を使う 動的にselect要素のDOMを書き換える場合(rebuildメソッド) サンプル 更新履歴・追記 動作環境 特徴 selectボックスの選択ってイライラしないですか?jQselectabeを使えば解決できるかもしれません。以下が主な特徴になります。 セレクトボックスの

  • jQuery Slider plugin (Safari style) « Design it. Develop it. Use it.

    Design, interface, interaction, big project development, research (by Egor Khmelev). jQuery Slider is easy to use and multifunctional jQuery plugin. Below you can find demos and documentation. If you have any suggestions, comments or just found a bug – please do not hesitate to write. Download sources (52Kb)

  • パスワードの強度によっておねえさんがエロくなるjQueryのプラグイン Naked Password | TRIVIAL TECHNOLOGIES on CLOUD

    みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 免責事項 プライバシーポリシー 強度の高いパスワードを作るのは当にめんどくさい。ならば強度の高いパスワードにはご褒美を与えればいいんじゃないか,と作者が考えて作ったのがNaked PasswordというjQueryのプラグインだ。パスワードの強度に合わせて,おねえさんが豊満な肢体をあらわにするぞ。 このプラグインを使うと,エロい姿のおねえさん見たさに,みんなwell known wordsを避けたり数字を混ぜたりして最強強度のパスワードを登録するようになるので,ハッカークラッカーがパスワード破りしずらくなる。エロは世界を救う。世界を救うjQueryプラグインNaked Passwordをみんな使おう。ただし,強度の

  • jQuery Mobile使用時によく使いそうなマークアップのリストと動作サンプル - かちびと.net

    この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 自分用に備忘録。そろそろチートシート が出てくる頃じゃないかと思うので、そう 焦ることも無い情報だと思いますが、近々 使いそうなのでその時に面倒な事になら ないようによく使いそうなマークアップを リストとしてメモしておきます。 ちゃんとしたデモは家で確認して下さい。ここにあるサンプルは僕のいい加減なサンプルです。尚、マークアップが見やすい様にするだけの為にコメントアウト入れていますが気にしないで下さい。 [note]追記 もう少し増やして見やすくしたものをダウンロード出来るようにしました。 [/note] プラグイン読み込み <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquer

  • 複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」:phpspot開発日誌

    複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」 2011年01月25日- jQuery File Upload Demo 複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」。 「Upload files」ボタンを選択するとダイアログが開き、複数ファイルを一括して選択。その後すぐアップロードが始まり、プログレスバーを通して進捗を表示、アップされたファイルのサムネイルも次のように表示してくれるという、ファイルアップロードのフルセットを提供してくれます。 アップされたファイルの横に表示されているごみ箱アイコンをクリックすればすぐさま削除も可能。 HTML5ベースなプラグインなのでFlashも不要です。 アップロードの受け口としてphpのソースも同

  • 少しのコードで実装可能な20のjQuery小技集

    少しのコードで実装可能な20のjQuery小技集素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、今回はプラグインなしで実装できるjQueryの小技を紹介します!「jQueryってなんだ?」という人もコピペで実装できますよ!サンプルも用意したのでぜひご覧ください! 追記:この記事で紹介されているいくつかの方法が、今では CSS のみで実装可能です!詳しくは「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」をご覧ください。 jQuery の基的な使い方まずはjQuery 家から jQuery ファイルをダウンロードします。<head> 内に下記を記述し、jQuery ファイルを読み込みます。 <script type="text/javascript" src

    少しのコードで実装可能な20のjQuery小技集
  • [JS]jQueryのプラグイン33+1選 -2010年11・12月

    当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る

  • 打ちやすいバーチャルキーボード実装が可能なjQueryプラグイン「VirtualKey」:phpspot開発日誌

    Index of /Plugin/Virtualkey 打ちやすいバーチャルキーボード実装が可能なjQueryプラグイン「VirtualKey」。 コンテンツの横に表示されているボタンを押すと…。 大きめのキーボードが表示されます。配列が通常のキーボードと似ているので打ちやすいですね。 英字しか対応していないため、パスワード入力欄などの英字フィールドにキーロガー対策として入れる部分で使えそう。 関連エントリ ソフトウェアキーボード実装ならこれかもという「jQuery Keypad」

  • カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」:phpspot開発日誌

    カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 2010年11月29日- JQUERY BUBBLE POPUP v.2.3.1 - display animated and shadowed "bubble" popups with few lines of code in jQuery カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 カーソルを合わせた際に、単にポップアップするのではなく、ポップアップ自体がフェードインアニメーションしながら動きをもって表示されることでより、利用者の注意をひくことができそうです。 見た目も影付きでカッコいいのが特徴です。 デザインは選べます。 何かにカーソルを合わせた時だけじゃなくて最初から特定のエレメント上に表示しておくこともでき

  • jQuery Youtube Player

    The jQuery Youtube Player plugin builds a custom youtube video player, toolbar and playlist area. Examples: Basic Advanced Embedded Multiple Playlists Custom Playlist Positioning Custom toolbar buttons Themes Userguide Userguide Issues/Feature requests If you notice the plugin is working as expecting, or would like to request new features, please use the issue tracker. Tested on: FF3.6; IE 6, 7 an

  • [JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider

    クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。 標準的なスライドからフェードまで多彩な表示を用意。 各パネルへの直接リンクが可能(ブックマーク可)、ブラウザの「前へ」「次へ」をサポート。 パネル内は画像、テキスト、動画、フォームなどさまざまなHTMLコンテンツを表示可能。 自動再生でスライドショーも可能。 ループ再生も可能。 セットアップは簡単で、カスタマイズも簡単。 IE6+, Fx, Chrome, Safari, Opなど主要ブラウザの

  • ユーザがアイドル状態になったかどうか確認できるjQueryプラグイン「IdleChecker」:phpspot開発日誌

    Idle Checker : by Kevin Lint ユーザがアイドル状態になったかどうか確認できるjQueryプラグイン「IdleChecker」。 ユーザがブラウザ上で操作しているうちはいいのですが、席をたったりした場合にログアウトを発生させたいようなケースがありますね。 会社なんかで画面をそのままにして席をたった後、ログイン状態のままだと誰かに操作されてしまう危険性がありますが、自動でログアウトを実装する仕組みがこのプラグインで実現出来ます。 デモページを見ると、ページ内でいる時間数がどんどん上がっているのが確認できます。クリックするとリセットされます。 プラグインのメソッドに、タイムアウト秒数や、ログアウトURLをパラメータとして渡しておくことで、指定した時間がくればログアウトURLに移動するようなことが簡単に実装出来ます。 ログアウトした際の例 使い方は以下のようにオプション

    celitan
    celitan 2010/06/21
    アイドル時間を測定するプラグイン
  • Apple風デザインが美しい、スライドショーギャラリーのスクリプト

    PHPやデータベースなどを使用せず、jQueryとCSSで実装するスライドショーギャラリーのスクリプトをTutorialzineから紹介します。 A Beautiful Apple-style Slideshow Gallery With CSS & jQuery デモページ デザインはAppleにインスパイアされたもので、角丸、グラデーション、ドロップシャドウ、鏡面反射などが美しく使用されています。 サムネイルの仕事も丁寧です。

  • jQuery Form Pluginの解説と画像のAJAXアップロード - くらげだらけ

    ExtJSの勉強もしてるんですがね、jQueryの方が楽ちんすぎて今でも使っているんです。 jQueryでは.load()とか.post()とか.get()とか書けば簡単にAJAXが書けますが、フォームをAJAXで扱いたい場合は「jQuery Form Plugin」を使うわけです。 これを使えばAJAXフォームの送信もカンタンカンタン。 APIリファレンスを日語で書いたので覚え書きに載せときます。 って言っても、たいした量でもないので、いまいち分からなかったらプラグインファイルを見た方が早いですよー。 jQuery Form Plugin のAPI ■ ajaxForm() AJAX処理したい任意のフォームを設定します。 詳細についてオプション値を設定することも出来ます(オプションについては下の方に)。 Chainable: Yes. //オプション値なし $('#myFormId')

    jQuery Form Pluginの解説と画像のAJAXアップロード - くらげだらけ