Enterキーでフォームを送信したくない時は あるWebアプリケーションのフォームで、Enterキーを押してもSubmitされない様にする必要があって、ちょっと調べた。 リターン(Enterキー)でフォームを送信しない方法: 小粋空間 とりあえずこの記事の「4.押されたキーを判定して抑止する」の所に書いてある方法で対応出来た。 Enterキーで次のフィールドにフォーカスを移動するには 次に、どうせならEnterキーで次のフィールドにフォーカスを自動で移動させたいな~、という事になった。やってみたら、jQueryのおかげでこんな感じで割りと簡単に出来た。 Enterキーが押された時にfalseを返すのではなくて e.preventDefault() を使う様に変えた。その理由はこちらを参照。 Shift+Enterキーにも対応するには さらについでにShift+Enterキーでの逆順の移動に
function index(){ // ページング処理 $this->set('products',$this->paginate('Product')); } <?php echo $this->Html->script('jquery.infinitescroll.min', array('inline' => false)); ?> <?php echo $this->Html->script('products_index', array('inline' => false)); ?> <div id="products"> <?php // 表示内容 foreach($products as $product){ echo '<div class="product">'; echo '<h3>'.$post['Product']['title'].'</h3>'; echo '
Webページの印刷プレビューを、 その場で見やすく素早く表示 させるjQueryプラグインです。 地味だけど結構良かったです。 IEには対応して無い様ですが、 印刷が必要なページに導入する と良いユーザービリティになるかも。 この手のライブラリは個人的に初見だったので備忘録的にご紹介します。 このようにその場で直ぐにプレビューを表示させる事が出来ます。プラグインを導入すると、プレビュー用のボタンが指定した箇所に表示されます。また、ショートカット(WinならCtrl+P)でも同じエフェクトでプレビューが表示されます。 通常のブラウザの機能の印刷プレビューでも確認したところ、確かに別途用意したprint.cssを読み込んでくれているようでした。 ご覧いただいたほうが早そうです。右サイドバーの最上部にプレビューボタンがあります。※IEは対応していませんでした Sample 【追記】 対応していな
今回はhtmlのselectタグを使いやすくするchosenというjQueryプラグインを紹介したいと思います。 chosenを使用するとselect選択項目を検索することができるようになります。 こんな感じになります。 1.chosenプラグインをダウンロードし適当なディレクトリにプラグイン等を配置する ■ダウンロードページ https://harvesthq.github.io/chosen/ ■最低限下記ファイルがあれば十分だと思います ・jqueryプラグイン ・chosen.jquery.min.js ・chosen.min.css ・chosen-sprite.png 2.必要なプラグイン及びCSSを読み込む 3.selectタグを用意する ■任意のクラス名を指定する(今回は"chosen") ■data-placeholder要素にプレースホルダを指定できます 4.chose
これは画像などを除いて、HTML=DOMの読み込みが終わったらfunction()の中の処理(=なにかしらの処理)を実行するという意味です。 jQuery(JavaScript)はHTMLが完全に読み込まれないまま何か処理を実行すると大抵正しく動作しません。なのでこのreadyを使うことになります。 $(function(){ //なにかしらの処理 }); jQuery(document).ready(function() { //なにかしらの処理 }); jQuery(function(){ //なにかしらの処理 });
レイジーロード(遅延読み込み)とは、その名の通り、画像を遅れて読み込ませるテクニックのことです。具体的には、ユーザーがスクロールをして、目的の画像が画面内に映るタイミングで、初めて読み込みを実行します。「遅れて」というよりは、「適切なタイミングで」と言った方が正確でしょうか。さて、このことはどのような意味を持つでしょうか? 転送量の節約ユーザーは訪れたページの全てを見るわけではありません。あなたにも、あるページを訪問して「やっぱ止めた」とすぐに戻るボタンをクリックして帰った経験はありますよね。基本的に、ブラウザは訪れた時点で、ページの全ての画像を読み込みます。 このページに、仮に100枚の画像が掲載されていたとしたらどうでしょうか。ちょこっと訪問されるだけで、毎回、見られてもいない大量の画像の転送が発生してしまいます。余計な転送が発生することで、運営者側にとってはサーバーコストが増える、閲
一言まとめ LightBoxは時代にそぐわなくなってきた。その最有力候補として浮かび上がってきた PhotoSwipe だが、導入する作業が煩雑なため、jQueryプラグインにした。 JavaScriptのギャラリーライブラリといえば「LightBox」です。むしろ「LightBox」が一種の代名詞にもなったくらい一世を風靡したのです。 しかし、時は2016年。もっとモダンな「Lightbox」はないのか… と、誰もが願うものです。 そして、そんな願いを完璧に応えてくれるライブラリが現れた… それが「PhotoSwipe」です。百聞は一見にしかず、まずはPhotoSwipeの公式サイトのデモをご覧下さい。 圧倒的な人気度 GitHubで言語をJavaScriptに絞って、「gallery」で検索した後、さらにソート順を「Most stars」にした結果。 「PhotoSwipe」のスター数
高機能で美しい インターフェイスはやはり2015年度版という感じはしますが、UIはある程度設定で変更出来ます。インターフェイスデザインは5年たったらがらりと流行りが変わるので便利かもしれませんね。 ドラッグ&ドロップサポート もちろん普通にアップロードする事も可能ですが、それ以外にドロップアンドドロップにも対応しているという事です。 同時に複数のファイルをアップロード可能 幾つかのファイルを同時にアップすることが出来ます。先にアップロードするファイルを選び、一斉アップロードも出来ますし、一つ一つアップロードすることも可能です。 対応デスクトップブラウザ まさかのIE6から対応。 Google ChromeApple Safari 4.0+Mozilla Firefox 3.0+Opera 11.0+Microsoft Internet Explorer 6.0+ 対応モバイルブラウザ Ap
jQuery UIは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前のとおり、ユーザーインターフェイス(UI)に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス: jQuery UIを利用するには?」を参照してください。 Progressbarは、名前のとおり、プログレスバーを実装するためのウィジェットです。(例えば)ファイルのアップロードのような時間のかかる処理を実行する際に、その進捗(しんちょく)状況をユーザーに対して通知するために利用します。 HTML5でも、同じ役割を持つ<progress>要素が用意されていますが、まだまだ未対応のブラウザーを利用しているユーザーも少なくはありません。当面は、Progressbarウィジェットにお世話になる局面も多いでしょう
今までバカな事していた。ajaxでpostとかgetする際に、いちいち各inputの値とかを取得していたんだけどそんなことしなくてもform.serializeで一発だった。 javascript function postForm(btn) { $.ajax({ type: "post", url: "/test.php", data: $(btn.form).serialize() + '¶m=1', success: function(json) { // 成功時の処理 } }); } html <form> .. <input type="button" value="送信" onclick="postForm(this)" /> </form> これでformの値をpostしてやるとphp側でうまく配列として取得できる。 serializeすると &xxx=xxx の形式
twitter facebook hatena google pocket セレクトメニューは文字列でイメージしにくい時があります。 そんな時、画像で選択肢を見せてあげると、ユーザーにとってわかりやすいかもしれません。 jQueryプラグインのImageSelectでは、これを簡単に実現できます。 sponsors 使用方法 ImageSelectからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="imageselect.js"></script> <script type="text/javascript"> $(function() { $('select[name=***]').ImageSelec
補足事項 名前空間を使用したイベント名を指定は、イベントの削除や発火を簡潔にしてくれます。 例えば、"click.myPlugin.simple"は「myPlugin」と「simple」の両方の名前空間をこのクリックイベントに定義します。 こうして登録されたイベントハンドラは .off("click.myPlugin") または .off("click.simple")のどちらかで、 他のイベントハンドラに影響を与えること無く、削除することが出来ます。 どれか1つの名前にマッチすれば階層的に指定されてなくても良い所がCSSに類似しています。 また、名前空間の最初にアンダースコア(_)を使うことはjQueryによって予約されています。 ほとんどの主要なブラウザでは、イベント伝搬(バブリング)は要素の一番内側から、BODYに向かっていきます。 ただし、IE8以下のバージョンでは一部のイベント(
属性プロパティに値を設定、または設定されている値を取得します。 .prop( name ) 1.6追加 .prop( name, value ) 1.6追加 .prop( map ) 1.6追加 .prop( name, function(index, prop)) 1.6追加 jQuery1.6で追加された.prop()と.attr()の問題 .prop( name ) 1.6追加 戻り値:String 指定した属性の値を取得します。 引数 説明 <input id="check1" type="checkbox" checked="checked" /> //jQuery1.6.1以上の場合 var is_checked = $('#check1').prop('checked'); //trueが返る var attr_checked = $('#check1').attr('che
2013-03-01 【jQuery】.focus()が機能しない時の解決法 jQuery 問題 .focus()してるのにカーソルがテキストエリアなどに移動しない 解決法 setTimeoutを使った setTimeout(function(){ $(this).focus(); }, 0); 参考 http://stackoverflow.com/questions/11380392/the-focus-method-in-jquery-doesnt-work nobnoob 2013-03-01 10:52 コメントを書く 次の記事 前の記事
BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips (sometimes called "talk bubbles" or "help balloons") associated with a html element on the page. These tips are highly configurable and can be triggered in many different ways. The canvas element is supported in modern versions of FireFox, Safari, and Opera. However, Internet
jQuery deferredの使い方 前編 deferredの基本 jQuery deferredをなんとなく知っているが使い方がよくわからない人のために短期シリーズでおさらいをします。第1回目は非同期処理の概念からdeferredの基本機能までをおさえます。 なぜ、今、jQuery deferred? この短期シリーズでは、2回に分けてjQuery deferredについて解説します。 jQuery deferredは、jQuery1.5で追加された機能であり、特に新しいものではありません。 しかしながら、私が昔書いたjQuery deferredに関するブログ記事をブックマークする人が、いまだにちょこちょこいるのが見受けられるのです。 もしかして、deferredの存在はなんとなく知っているけれど、どのように使ったらいいのかよくわからないという人が多いのかもしれないと思い、改めてまと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く