jResponsive 表示サイズに合わせて、さまざまな要素のサイズを変更します。要素ごとにmin-size, max-size, height, hspace, vspace, animationの設定可。
ダイナミックなかわいいアニメーションでパネルのレイアウトを変更する、レスポンシブ用のレイアウトを生成するjQueryのプラグインを紹介します。 デモページ DyLayの使い方 Step 1: 外部ファイル 「jquery.js」と「easing.js」と当スクリプトを外部ファイルとして</bpdy>の上に記述します。 <script src="http://code.jquery.com/jquery.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/dylay.js"></script> Step 2: HTML 各パネルはリスト要素で配置し、フィルタやソート用のデータをclassやdata属性に仕込んでおきます。 <ul id="dylay"> <li style="width:
概要 keypress、keydown、keyupのイベントを管理できるjQueryプラグインです。大きな特徴はふたつ。 まずひとつ目は、要素単位で設定できること。通常キーボード系のイベントはinput等の入力系要素かdocumentで発生しますが、jQuery.gpKeyは任意の要素で発生したものとして管理する事ができます。 もうひとつは、キーごとの操作をわかりやすく設定できること。例えば”Ctrl+S”を拾う場合は"^s"という文字列と処理内容をセットにして指定します。 キーボード操作のあるウェブアプリでの利用を想定しています。 ダウンロード jquery.gpkey-0.1.min.js [4KB] jQuery.gpKey.zip [57KB] jQuery.gpKey.tar.gz [57KB] 基本的な使い方 要素をクリックすると反応するようになり、また要素外をクリックした場合
僕はiPhoneとかiPadとかmacみたいな流行りものを使用すると蕁麻疹が全身に出てさらに左腕が疼きだすという特異体質(別名:天邪鬼)のため、これまであまりjQueryは使ったことがなかったです。特異体質によるものもあったのですが、僕みたいなグズがjQueryのような便利なものに手を出したら、面倒なコードを書くにもjQuery頼りになって自分でコードを書く努力を怠る習慣が身についてしまうのでは、という懸念があったためです。最近になってようやく、本当に多少ではありますが独力である程度の処理は書けるし読めるようにもなったので、効率化のためにもjQueryをもっと使っていこうという気になったわけであります。 で、そうなるとやはりjQueryが提供する便利関数では全然足りなくて自分でプラグインを書きたくなるわけです。ちょうどjQueryの公式サイトにjQueryプラグインの作り方指南な記事(ht
The best jQuery modal popup plugin … I have made What is bPopup? bPopup is a lightweight jQuery modal popup plugin (only 1.49KB gzipped). It doesn't create or style your popup but provides you with all the logic like centering, modal overlay, events and more. It gives you a lot of opportunities to customize so it will fit your needs. It requires jQuery 1.4.3+ and has been tested in Internet Explor
明示的 意味 แพลตฟอร์มการเรียนรู้และพัฒนาทักษะด้วยเทคโนโลยี https://suin.io เป็นแพลตฟอร์มที่ให้คุณเรียนรู้และพัฒนาทักษะทางเทคโนโลยีอย่างสะดวกสบาย เรามุ่งมั่นในการให้ความรู้และประสบการณ์ที่มีคุณค่าในการพัฒนาตนเอง pascalcase
jQueryでhtmlタグに任意の属性が存在するかどうかを確認する方法のメモです。チェックボックスがチェックされているかどうかを確認するときなどに役立ちます。 jQueryにはhasClass()というクラスが存在するかどうか調べるメソッドがあります。だから属性の有無を調べるhasAttr()もあるだろうと思い込んでいたのですが無いんですね。つまり以下で紹介するのはhasAttr()を実現する方法でもあります。 <input id='target' type='checkbox'> <script> var attr = $("#target").attr("checked"); if( typeof attr !== 'undefined' && attr !== false ){ //チェックされていた場合の処理 }else{ //チェックされていなかった場合の処理 } </scrip
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト <link href= "mosaic.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"></script> <script src="mosaic.1.0.1.min.js" type="text/javascript"></script> 実装 <div class="mosaic-block bar3"> <a class="mosaic-overlay" href="#"><div class="details">キャプション</div></a> <a clas
DataTablesプラグインとは tableタグを装飾してくれるjQueryプラグイン。 http://www.datatables.net/ 他のtableタグを装飾してくれるプラグイン 「Flexigrid」 http://flexigrid.info/ 「Ingrid」 http://www.reconstrukt.com/ingrid/index.html ちなみに、これらを知った経緯は「jquery table」でググって出てきた この記事を見たから。 http://www.designwalker.com/2009/09/jquery-table.html どうしてこのプラグインを選んだか サンプルプログラムやAPIなどがまとめられており、ドキュメントがしっかりしているから。 これに尽きる。 Flexigridは機能は良いが、ドキュメントが見つからなかったので使用をやめた。
jQuery HTML5 Drag-and-Drop File Upload | LearnComputer jQueryとHTML5でドラッグ&ドロップアップロードを実現するチュートリアル。 jQueryのfiledropプラグインを使いつつサーバにファイルをアップロードするためのJavaScriptとPHPコードの例が掲載されています。 JS部分のコード例。アップ先のPHPエントリポイント、アップ開始、終了時のイベントハンドラが指定できます。 PHP側では $_FILES を使ってファイルを受け取るという簡単な物になっています。 関連エントリ ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」 ファイルアップロード関連のjQueryプラグイン10 PHPを使ったAjaxファイルアップロードサンプル10
Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」が良さそうだったのでご紹介。 HTML5対応ブラウザであれば、ローカルにあるファイルをドラッグするだけでアップロード出来るようになります。 ドラッグ時には複数ファイルを指定できるので、よく添付ファイルを送信するフォームにはおすすめの機能です。 ↑デモの様子。破れた穴の画像にドラッグするとアップされます。 ファイルアップロード中には個々のファイルごとにプログレスバーによる進捗表示も可能です。 使い方 使用するにはライブラリを読み込んで、ファイル送信先のURLを指定すれば良いようです。 ■ JSの読み込み <script type="text/javascript" src="jquery.min.js"></script> <script type="text/j
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
jQuery.Shapeshiftは自分でドラッグ&ドロップできるグリッドライブラリです。 最近増えたのがPinterestのように高さの異なるボックスを並べて表示するUIです。そしてさらに自分で並び替えまでできるようにしたのがjQuery.Shapeshiftです。 最初の表示です。 ドラッグして移動できます。その時、ちょっと斜めの表示になるのがいい感じです。 全てを猫に! jQuery.Shapeshiftではオプションが色々あり、ドラッグ時のアニメーション可否やそもそもドラッグ可否も指定できます。たとえ同じコンテンツであっても見せ方を工夫することでユーザ体験は全く違ったものになります。さらにユーザ自身による並び替えがあればカスタマイズ性が大きく向上するでしょう。 jQuery.ShapeshiftはjQuery/JavaScript製のソフトウェア(ソースコードは公開されていますがラ
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる(?)ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
ツールチップでメニューバーを実装する為のスクリプト・Toolbar.Jsのご紹介です。Webアプリ等でたまに見かけるやつ。省スペース化できていいですね。スマフォとの相性もいいかもしれません。 ツールチップでメニューを実装しよう、というもの。省スペース化できていいですね。 jQuery依存です。Webアプリなんかにどうでしょうか、との事。アイコンはtwitter bootstrapで使われているものを使用してるそうです。 こういうやつ。 デモではアイコンのみになっていますが、慣れてない方にとってはこのままだと分かりにくいのでもう一工夫必要かもですね。作ろうと思えば作れますけどアイデアが参考になったのでメモしました。ライブラリは以下に詳細があります。時間無いので詳細は割愛。 Toolbar.Js
cssやプログラミングcss+jQuery jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Do
HTML5から使えるvideoタグで背景への動画設定を簡単に行えるというスクリプトです。対応していないブラウザには静画が表示されるようになっているみたい。 動画を背景に、というスクリプト。 動画のパスを指定して表示するみたいです。楽でいいかも。尚、HTML5未対応のブラウザには普通の画像を別途用意して指定しておくことで表示を切り替えるみたいです。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script> <script type="text/javascript" src="jquery.videoBG.js"></script>コアとプラグインを読み込み。 $('.foo').videoBG({ position:"fi
白石 俊平 ニュース jquery 0 Comment 2013年1月17日、jQuery「公式」のプラグイン・レジストリ(プラグインの集積場)が公開されました! URLはこちらになります。 http://plugins.jquery.com/ このプラグイン・レジストリの目的は、従来のプラグインサイトでは解決できなかった、「断片化」と「配布」の問題を解決することだそうです。 「断片化」・・・「jQuery プラグインがWeb上の至る所にあり、探すのが面倒」という、現在の状況 「配布」・・・作成したプラグインを配布するためのサイト作成や宣伝に手間がかかる、従来のプラグインサイトでは登録が面倒だった 新しいプラグイン・レジストリは、GitHubと連携することを前提として、こうした問題をエレガントに解決し、従来のプラグインサイトを完全に置き換えるものです。 開発者にとっては、プラグインを公開
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。(※こういったレイアウトはピンボード風と呼べば良いのでしょうか…?) Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinterest) そんな女子力の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く