selectタグの option を他の入力フィールドで入力したキーワードフィルタで動的に絞り込む要求がありました。 サーバと通信をして select タグを書きなおすということをしたくなかったので、jQuery だけで検索するように書きました。 （１文字キーが押される度にサーバーに問い合わせたくなかったからです。） 汎用性の為に、メソッド化しました。 var pulldownFilter = function(filter, selecter){ var optionArray = new Array(); $(selecter).children().each(function(){ optionArray.push( { value:$(this).prop("value"), body:$(this).html() }); }); $(filter).keyup(function(
たったこれだけで、キーボードの入力を無効化することができます。 キー入力イベントは .keydown() で処理キーボードからの入力は、それぞれのキーに応じたコードが割り当てられています。 まずは具体的にどのようなコード値が得られるのか、確認してみましょう。keydown のイベントを利用すれば、入力のタイミングでコードを取得することができます。 キーコード取得サンプル $(function(){ $("#hogehoge").keydown(function(event){ // 入力されたキーのコード var keyCode = event.keyCode; // キーコードを出力 $("#hogehogeKeyCode").val("keyCode: " + keyCode); }); });キー入力イベントを無効化する方法前述のサンプルでは、左側のテキストボックスに押下したキーの内
jQuery スクロールで記事の自動読み込みを実現する方法 – グリッドレイアウトにも対応 – infinititescroll等 どうもこんばんは。今回のtipsは【jQuery スクロールで記事の自動読み込みを実現する方法 – グリッドレイアウトにも対応】についてです。自動読み込みと書きましたが、クリック等の手動も可能です。結構見かける手法ですのでメモしておきます。 自動読み込み用プラグイン【infinitescroll 】 インフィニティスクロール、このプラグインを使えば簡単に自動読み込みを実現してくれます。設置方法も簡単で非常に優秀なプラグインです。 スクロールで自動読み込み <div id="blogBody"> <div class="post">….</div> <div class="post">….</div> <div class="post">….</div> </d
<2014-06-16> Bootstrap3版にサンプルを変更 <2013-03-03> オリジナルのものがforkされて、より機能が追加されているようです。IE8対応化 & 日付選択用の表示カレンダーを日本語に変換できるようになっています。 スクリプト <link href="css/datepicker.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"> <script src="js/bootstrap-datepicker.js" type="text/javascript"> <!-- 日本語対応用スクリプト --> <script src="js/locales/bootstrap-datepicker.ja.js" type="text/java
datetimepicker改造版 の使い方です。 ※通常のdatepickerが使える状態（jquery.uiが入っている）の前提で記述しています。 STEP１ まずは、ココからダウンロードしてください。 ダウンロードしたファイルを解凍すると以下の二つのファイルがあります 1. jquery.ui.datetimepicker.js 2. jquery.ui.datetimepicker-jp.js 1が本体ファイルで、2が日本語化するファイルです。 基本的には2を好きなようにいじってください。※詳しい方は1をいじってもらってもかまいませんｗ 2のファイルはこんな感じです。（ちょっと修正して26行目からの部分をコメントアウトしておく事にしました）
どうもこんばんは。今回は【簡単にモーダルウィンドウを実装する方法 (プラグイン不要)】というネタです。モーダルウィンドウ？という方もいるかと思いますので別の言い方をするとポップアップで小窓が出てくる表現の事を指します。実装方法はとても簡単ですので機会がありましたらお試しください。 コード（2013/4/11更新しました） 基本的には下図の用な仕様になっております。表示するコンテンツを増やす場合にはコピー&ペーストでwd2,wd3…と任意の数にしてください。 $(function(){ $(‘.btns’).click(function(){ wn = ‘.’ + $(this).data(‘tgt’); var mW = $(wn).find(‘.modalBody’).innerWidth() / 2; var mH = $(wn).find(‘.modalBody’).innerHei
編集中に別のページに遷移しようとした時に確認ダイアログを出したい。 以下のように onbeforeunload イベントを使えばOK。 window.onbeforeunload = function (e) { var e = e || window.event; // For IE and Firefox prior to version 4 if (e) { e.returnValue = 'Any string'; } // For Safari return 'Any string'; }; jQueryの場合 $(window).bind('beforeunload', function(event) { return 'Any string'; }); ただし、IEの場合は以下のような遷移しないaタグでもonbeforeunloadが発生してしまう。 <a href="jav
Tested on iPad, iPhone, Android and other touch-enabled mobile devices. jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library. Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser wil
jQueryUIのsortableって便利ですよね。でも、iPhoneやiPadだとタッチイベントをうまく検出してくれずそのままでは動作しません。 そこでjQuery の sortable を iPad 対応するで紹介されているようにタッチイベントをマウスイベントに置き換えて動作させる方法があります。 function dispatchMouseEvent( event_type, touch_event ){ var simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent( event_type, true, true, window, 1, touch_event.screenX, touch_event.screenY, touch_event.clientX, touch_
Camera 表示サイズに合わせて最適なレイアウトを提供するResponsive Design対応のスライドショー。
超定番のjQueryのプラグインを厳選して集めました。 商用利用が可能なものを優先的にピックアップしています。 （利用する際はそれぞれライセンスをご確認くださいね） 超定番プラグイン アニメーションのイージングを簡単に扱えるプラグイン jQuery.easing jQuery.easing
※ 更新終了 ajaxComboBoxへ合流しました。 Updating is closed. This plugin was unified with "jquery.ajaxComboBox". jquery.ajaxComboBox simple mode: http://www.usamimi.info/~sutara/ajaxComboBox/#sample07 Latest version : 1.5.4 (2012/02/10) jQuery 1.7以降で動作します 目次 (Contents) → デモ、ダウンロード (Demo, Download) → 特徴 → 設置方法 → オプション → 更新履歴 デモ、ダウンロード (Demo, Download) 【デモ (Demo)】 ajaxSuggest【日本語版】 (for Japanese) ajaxSuggest【英語板
Tooltip is a good way to show extra information when user hovers the cursor over an element. The “hover box” will appear when the mouse hover in, and disappear when the mouse hover out. If the tooltip is being used appropriately, it can improve our site’s user friendly level, and also save us a lot of spaces. Today, we are going to see 15 jQuery plugins to create an user friendly tooltip. Related
Image Upload and Cropping with PHP and Jquery PHPを使って画像をアップしてjQueryで切り抜くチュートリアルとデモが公開されています。 配布されているプログラムをダウンロードしてプロトタイプとして使って開発効率を高める事もできますし、単に学習用に使うこともできそうです。 実際のサービスで使うにはセキュリティの問題がないかどうかをちゃんとチェックして使いましょう デモページはこちら 関連エントリ PHPでWEBサイトのスクリーンショットを作成するチュートリアル PHPでAmazon SESを使うチュートリアル PHPとGDを使ってCaptchaを自作するチュートリアル
webサイトをより効果的に見せるための手段としてjQueryを選択するという事も多いと思います。今回紹介するのは使えるjQueryプラグインまとめたエントリー「10Useful jQuery Plugins」です。 Subway Map Visualization シンプルなものから少し変わったギミックのプラグインまで幅広いジャンルのものが紹介されています。今回はそのなかからいくつかきになったプラグインを紹介したいと思います。 詳しくは以下 arbor.js グラフの可視化ライブラリにより画面のリフレッシュ処理や仕事の効率化が可能になります。ユーザーが必要な情報を選んで表示させたりと、見る人によって得ることのできる情報が異なるコンテンツ制作ができそうです。シンプルな線で綺麗に系統立てられているので、さまざまな場面で使いやすいと思います。 Mobily Playground – Mobily
よく見かけるタイプのjQueryを使ったスクロールしても上に固定されているメニューを紹介します。最近FC2ブログの上部に現れた検索バー（このブログは非表示にしてます）みたいな感じです。 <script type="text/javascript"> $(function() { $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop != 0) $('#nav').stop().animate({'opacity':'0.5'},400); //スクロール時 else $('#nav').stop().animate({'opacity':'1'},400); //一番上にあるとき }); $('#nav').hover( function (e) { var scrollTop =
全画面をスライドギャラリー風にするダイナミック なナビゲーションをjQueryを使って実装するサン プルです。透過処理が必要ですが、IE6、IE7の 両問題児でも問題なく動いてくれますので、実践 でもプロモーションなどに利用できるっぽいですね。 スライドするとロゴが平行してスライドする事で視差 効果も出しています。 クロスブラウザ対応なので使いどころも出て来るかもしれませんね。ダイナミックに動いてくれますのでプレゼンテーションやポートフォリオ、キャンペーンなどに使うのも面白そうです。 Awesome Scrolling Navigation 全画面がスライドします。背景に画像を指定しているのでテキストなんかも入れられるっぽいですね。試していませんけどこれは結構使えそうです。 動作確認していただくと分かるかと思いますが、左上のロゴ部分も微妙なスライドをして視差効果を出しています。 マークアッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
