Demo This jQuery plugin simplifies the usage of Bootstrap Pagintion. It uses appropriate classes: .pagination (you change this one), .active and .disabled. Check out the demo. Here is corresponding piece of code: $('#pagination-demo').twbsPagination({ totalPages: 35, visiblePages: 7, onPageClick: function (event, page) { $('#page-content').text('Page ' + page); } }); And HTML code: <ul id="paginat
前回の続きです jquery-workshop.hatenablog.com 今回は、結果表示の方 前回は検索条件と検索対象のカスタマイズでしたが 今回は検索結果表示のカスタマイズです。 autocompleteではテキストボックスの下に一覧が出るのが標準ですが これを <div id="search_results"> <div class="search-resuls"> ... </div> <div class="search-resuls"> ... </div> <div class="search-resuls"> ... </div> </div> や <table id="search_results"> <tbody> <tr><td> ... </td></tr> <tr><td> ... </td></tr> <tr><td> ... </td></tr> </tb
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
ASP.NET MVC 2 から HTTP POST 時の検証以外にも JavaScript を利用したクライアントサイド検証がサポートされました。入力中にも自動的にエラーを表示してくれるのは非常に快適ですが、独自の検証属性の場合はそのままではクライアントサイド検証を使うことはできません。 MVC 2 向けには ナオキにASP.NET（仮） : ASP.NET MVC 2 でカスタム属性の作成と、クライアントサイド検証のポイント だけ読んでおけば問題ないのですが、MVC 3 では IClientValidatable インターフェースが追加されて MVC 2 では必要だったアダプタクラスを作る必要が無くなりました。 IClientValidatable インターフェースに関しては ASP.NET MVC でアップロードされたファイルを検証する - しばやん雑記 で独自の検証属性を作成した時
画面をダブルクリックで縦書きと横書きを切り替えることができます。要素を指定して縦書きにしている場合は、次回アクセス時に同じ表示が引き継がれます。 どんなサイトでも縦書きにするブックマークレット。 ↓右クリックで「お気に入り」に保存するか、リンクをドラッグしてブックマークバーにドロップします。 「縦書きにする・iPhone 用リンク」 「縦書き可能にする・iPhone 用リンク」 「段組み縦書き可能にする・iPhone 用リンク」 iPhone に登録するには？ とりあえずこのページを共有ボタンからブックマーク。 iPhone 用リンク を長押ししてコピー。 ブックマークを開いて、追加したブックマークを「編集」。 名前を「縦書き可能にする」などに変更し、URL 欄に上記コードをペースト。 最初の「http://」を削除。 注意！ やや動作が重いです！ うまく変換できなかったときは、画面をダブ
In computing, a WYSIWYG editor is a system in which content (text and graphics) displayed onscreen during editing appears in a form closely corresponding to its appearance when printed or displayed as a finished product, which might be a printed document, web page, or slide presentation. WYSIWYG is an acronym for "what you see is what you get". WYSIWYG implies a user interface that allows the user
jQueryのfind()を利用した高速化 最近、jQueryのfind()のちょっとよろしくない使い方をチラホラと見かけるのでfind()の高速化について解説をします。 アンチパターン 最近、見かけたパターンとしては以下の様なものがあります。 $('.foo #bar') このセレクタをfind()を使って高速化する為に以下のように書きなおす。 $('.foo').find('#bar') というもの。これは、ケースによっては高速化が見込めるものの、多くのケースでは低速化されてしまいます。 また、以下の様なパターンも見かけました。 var $ul = $('ul'), $a = $ul.find('.a'), $b = $ul.find('.b'); $a.css('color', 'red'); $b.css('color', 'green').text('Hello'); こちらも、
JavaScriptおれおれAdvent Calendar 2013 – 02日目 チェック状態は$checkbox.attr('checked')ではなく$checkbox.prop('checked')で得る必要があります。 検証 初期状態で確認すると c1: attr=undefined prop=false c2: attr=checked prop=true チェックを入れ替えて確認すると c1: attr=undefined prop=true c2: attr=checked prop=false というわけで .attr() … 変わらない .prop() … 変わる（こっちを使う） 仕組み .attr()はattribute、つまり（HTMLの）属性を得るメソッドです。HTMLにのタグにchecked属性を記載したらその値checkedが得られます。していなければ、存在し
はじめに jQueryを使う時は、$(document).ready(handler)やその省略法である$(handler)でdom構築ができてからコードを実行することが多い。（handlerは無名関数などの関数オブジェクト） で、たまに複数のファイルで何度も$(handler)を呼び出すことがあるのだけれど、その際$()の引数に渡しているhandler内のthisやvar宣言について混乱しがちだったので整理しておく。ちなみに検証環境はChrome ver24、jQuery1.9.1。概念はES3を基準にする。 前提 書き方色々 以下の3つは同義（真ん中は推奨されない） $(document).ready(handler) $().ready(handler) //this is not recommended $(handler) http://api.jquery.com/ready/
通常のjQueryプラグインの定義では冗長になりがちな、イベント管理やサブメソッドの実装などなどをオブジェクト指向的にわかりやすく一貫性のある記述で実現できる(多分合ってる)、jQuery UIの$.widgetについての備忘録のようなものです。 はじめに まずは「jQuery UI 公式ページ」から.jsを入手します。 とりあえずのところは$.widgetが使えさえすればいいので、UI CoreのWidgetにだけチェックを入れてダウンロード。 ダウンロードした.zipにはjQuery本体も同梱されています。 テスト用に以下の環境を用意した想定で進めていきます。 ウィジェットの定義 jquery.test.myWidget.jsにウィジェットを定義していきます。 まずは以下のような即時関数パターンで、jQueryを引数に取って呼び出されるようにしておきます。 (function($) {
Multiple file upload: Allows to select multiple files at once and upload them simultaneously. Drag & Drop support: Allows to upload files by dragging them from your desktop or file manager and dropping them on your browser window. Upload progress bar: Shows a progress bar indicating the upload progress for individual files and for all uploads combined. Cancelable uploads: Individual file uploads c
２００６年、jQueryは先行していた先達に果敢に戦いを挑み、クールなチェーンメソッドとスリムなボディで多くのウェブデベロッパを魅了し、華やかに勝利した。その後のjQueryは挑戦者たちを退けつづけ、２０１１年暮れである現在も現在の地位を譲る気配はない。だが、そんなjQueryも継続的にメンテナンスされるソフトウェアなら誰もが苦しむジレンマに悩まされ無視できなくなってきた。 JavaScript Advent Calendar 2011 (フレームワークコース)の１０日目の記事です。 怒らないで聞いて欲しいのだが、私はかつての「YUI VS PrototypeJS VS jQuery」の時代にjQueryの目指すものこそ自分の求めていたものだと彼らに声援を送っていた。当時の私はYUIやPrototypeよりjQueryのほうがいかにWebデベロッパとWebサイトに適しているのかを熱心に語り
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
縦長テーブルをスクロール対応にするシンプルなjQueryプラグイン「Lightweight Scrollable Tables」 2011年05月17日- Lightweight Scrollable Tables | jQuery Plugins 縦長テーブルをスクロール対応にするシンプルなjQueryプラグイン「Lightweight Scrollable Tables」 $('table').scrollbarTable();のように呼び出すだけで簡単にスクロール化してくれます。 特に派手な演出はありませんが、シンプルで汎用的に使うことが出来ます。とかく長くなりがちなテーブルも１行で簡単にスクロール化できるというのは色々な場面で使えるでしょう。 $('table').scrollbarTable(100)のように引数を渡せば高さを100pxに指定出来ます。 デモページはこちら 関連エ
最近では、エントリーフォーム最適化（EFO）という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。 ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。 まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じせない事です。ストレスの原因となるものは大きく言うと 入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。 どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。 です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。 具体的なポイントは以下のような項目になります。 必須入力か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
