チェックボックスをshiftキーで範囲指定してまとめてチェックするjQueryプラグイン｜株式会社エン・ＰＣサービス
範囲指定でチェックするjQueryプラグイン Windowsのような操作で、チェックボックスをshiftキー範囲指定でまとめてチェック/解除できるjQueryプラグインです。 概要 複数あるチェックボックスを、WindowsのようにShiftキーで範囲選択&チェック出来るJavascriptです。jQueryが必要です。 ベースは SANsoft様サイトにて公開されていたものです。 チェックボックスの塊（グループ）が１つであれば動作したのですが、グループが複数あるときにうまく動作しなかったので、それを改良したものです。 範囲選択の挙動が若干しっくりこなかったので、そこも改良しています。 まずは、次のサンプルで動作をご確認下さい。 動作サンプル グループ１ グループ1-1 グループ1-2 グループ1-3 グループ1-4 グループ1-5 グループ1-6 グループ1-7 グループ1-8 グループ
Fancybox on iPad/iPhone | ohsomuchwork
if (currentOpts.overlayShow) { overlay.css({ 'background-color' : currentOpts.overlayColor, 'opacity' : currentOpts.overlayOpacity, 'cursor' : currentOpts.hideOnOverlayClick ? 'pointer' : 'auto', 'height' : $(document).height(), 'width' : $(document).width() }); } _get_viewport = function() { /*return [ $(window).width() - (currentOpts.margin * 2), $(window).height() - (currentOpts.margin * 2), $(
iPhoneでiframeのようにスクロール
知人から、 ・ヘッダーとフッターは固定で表示 ・PCでもiPhoneでもiframeのようにスクロールバーでコンテンツ部分をスクロールさせたい という相談を受けたので、iframeで良いのでは？と思ったけど、iPhoneでは「iframeは非推奨」との事。 なのでいつも通り、Google先生に聞いてみたところ良いJavaScriptライブラリがあった。 Dragdealer JS ブログ：http://blog.ovidiu.ch/dragdealer-js ドキュメント：http://code.ovidiu.ch/dragdealer/ このライブラリで出来る事は、スクロールバー・写真のスライドショー・コンテンツをドラッグでスライドなど。 IEでもSafariでもiPhoneのSafariでも問題無く動作しました。 使いかたは簡単。今回は知人の要望通り「スクロールバー」を実装してみる。
データを扱うテーブルなどにインクリメンタルサーチをjQueryを利用して実装する :: 5509
返ってくる結果が膨大になりがちな検索結果(特に管理画面など)などでは、そこからさらにデータを絞り込みを行いたい場合もあるかと思います。毎回ページの遷移があったのではユーザーの負担になりがちです。 そこでjQueryを利用してインクリメンタルサーチを実装する方法をメモもかねて紹介します。 サンプル サンプルファイルのダウンロード テーブルのデータでインクリメンタルサーチを行う 考え方 今回は「A B C D ….」のように単語を半スペースで区切ることを前提に考えます。 考え方は簡単で、 半スペースで区切られた単語を配列(value=[])に保存する。 まず最初の単語(value[0])が含まれているTDをmatchで検索する。 含んでいない場合は親のTRを非表示にする。 さらに2つ目以降の単語(value[1〜x])が存在すれば value[1]からvalue[x]までを順番にmatchで検
jQueryで.postしようと思ったらfileはpostできない件 - Maesan blog
今更ながらjQueryにハマってまして、今日も画面遷移なしで画像がアップロードできるスクリプトを書こうとしたのですが、Javascriptではfileをpostできないことに気付いた＞＜ で、画面遷移なしでファイルをアップロードしようと思ったらiframeを使ったりするらしい。Ajaxではないけど、Ajaxっぽい動きですな。 ということでサクっと書いてみた アップロード用ページ upload.html <html> <head> <style> #dummy{ /* display:none; するとSafariだとおかしくなるらしい？ */ border:0px; width:0px; height:0px; } #image{ display:none; max-width:480px; } </style> </head> <body> <iframe name="dummy" id
最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ | バニデザノート
ウェブデザインのなかで、 jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが 定番になりつつありますね。 ふわっと、ポップアップみたいに浮き上がってくるウインドウ、 画像やテキストのスライドなど 最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。 要素をスライドさせるならJquery.cycle.plugin 画像や、テキストなど、 非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。 上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。 シンプルなdemo Even More Demosもオススメです。 オプション一覧はこちら → jquery.cycle.plugin ページ内ポップアップ、lightbox風表現ならfa
データ可視化のためのグラフ描画JavaScriptライブラリ20選 | ゆっくりと…
SixRevisionsでオンラインでグラフを描画する場合に活躍しそうなJavaScriptライブラリの特集がありましたので、紹介します。個人サイトではあまり役に立たないかもしれませんが、観ているだけで楽しくなります。元記事に敬意を表し、なるべく趣旨が異ならずかつ変な日本語にならないよう心がけたつもりですが、訳に間違えがありましたら容赦願います。 2010年1月17日 by Jacob Gube 退屈な数値データを美麗かつインタラクティブに解り易く可視化するためのJavaScriptライブラリは数多くあります。通常はHTMLテーブルで表現するデータを、JavaScriptを使って可視化し美しく見せる事ができればあなたのデータはアクセシビリティーの優れたものとなるでしょう。私は2008年にデータのグラフ化＆チャート化のためのJavaScriptを書き上げましたが、今回再び単なるデータに生命を
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ - Shinichi Nishikawa's
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ 2011 10/11 グラフを描画してくれるjQueryプラグインを紹介します。 グラフを動的に作ってくれるものとしては、他のjQueryプラグインやGoogle Chartというサービスなどがあります。 が、今回の”jQuery Visualize”は、中でも一番使いやすそうでしたので、ご紹介します。 他のプラグインについては、【jQuery】IEでも使えるグラフ描画ツール | 岡山のWebプログラマーがつぶやくブログ | 神歌.blogでまとめて紹介されています。 作れるグラフの種類 グラフは以下のものを使うことができます。 棒グラフ 線グラフ 線グラフで線の下を薄く塗れるやつ 円グラフ デザインは二種類 冒頭写真の黒っぽいCoolなのと別に、白っぽいのも用意されています。 また、背景画
FullCalendar で Ajax なカレンダーを作成する - エンジニアきまぐれTips
Googleカレンダーのような、jQuery ベースのカレンダー。 http://arshaw.com/fullcalendar/ カレンダーは月表示だけでなく週表示や日表示にも対応している。 サンプルの "json.html" は、"json-events.php" からイベントを取得している。 json-events.php が呼ばれるときに必ず start, end パラメータが付与されるので、 そのパラメータを元に期間を指定してイベントを出力してあげればいい。 デフォルトでは英語表記だが、日本語表記にカスタマイズすることも出来た。 今まで知らなかったけどこれはすごくいいものかも。 追記： FullCalendar を日本語表記にする FullCalendar で色を変えるには FullCalendar と PHP との連携 FullCalendar で日本の祝日を表示する Full
Templates – jQuery API
These documentation topics concern the jQuery Templates plugin (jquery-tmpl), which can be downloaded from: http://github.com/jquery/jquery-tmpl. A template contains markup with binding expressions. The template is applied to data objects or arrays, and rendered into the HTML DOM. jQuery.tmpl()Render the specified HTML content as a template, using the specified data. jQuery.tmplItem()Return the tm
スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインいろいろ:phpspot開発日誌
8 Best jQuery Mobile Plugins | ZoomZum スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインがまとまっていましたのでご紹介。 １から作るとかなり大変そうな機能もライブラリで瞬間的に実装できます。一通りチェックした上でご紹介。 Drag And Scale For IOS ブロック要素をピンチイン、アウトによって拡大、回転させることも可能です。これでiPhone向けのWEBサイトといってもアプリのような自由度が得られます（デモ）。 こんなことできるんっ、という声が出てしまうかも（Androidはドラッグのみ） jQuery Mobile Photo Album リッチなフォトアルバム実装が可能 Jquery Mobile Device Drag And Drop 要素のドラッグ＆ドロップが可能 Jquery Swipe スワイプイベン
ここ最近、お仕事でJQueryMobileでiPhone, Android他向け… « 渋谷でサボるエンジニアの日記
Recent tags RSS JQueryMobile ( 1 ) RSS CakePHP ( 4 ) RSS Google ( 1 ) RSS メディア ( 1 ) RSS WEB ( 1 ) RSS 男の子牧場 ( 1 ) RSS ゴミ箱 ( 1 ) RSS 商品 ( 1 ) RSS 統計 ( 2 ) RSS 婚活 ( 1 ) RSS WordPress ( 4 ) RSS キャッシュ ( 1 ) RSS アクセス解析 ( 2 ) RSS 動向 ( 1 ) RSS モバイル ( 3 ) RSS Ktai Library 0.0.1 ( 1 ) RSS 酒 ( 1 ) RSS タコ ( 1 ) RSS php ( 5 ) RSS perl ( 1 ) RSS 汲み取り屋 ( 1 ) RSS チートシ
iPhone風のレイアウトを実装するためのjQueryプラグイン｜jQuery plugin｜Ajax｜PHP & JavaScript Room
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-eq
jQueryデザインブック 仕事で絶対に使うプロのテクニック
近年のWeb制作において、もはや欠かせない存在となったjQuery。CSSとの親和性が高く、文法もシンプルなので、Webデザイナーやマークアップエンジニアにとっても非常に扱いやすいJavaScriptライブラリといえるでしょう。ただし、本当にjQueryを使いこなすためには、「実際の業務ではどのようなコードが書かれているのか」を理解して、さまざまなコーディングのセオリーや技法を自分の中に蓄積していく作業が必須です。 本書は、そのようなWeb制作の現場で使われるjQueryのコードをステップ・バイ・ステップ形式で解説したテクニック集です。ユーザビリティを向上するナビゲーションの制作方法から、ユーザーに新鮮な驚きを与えるエフェクト、SNSとの連携やjQuery Mobileによるスマートフォンサイト制作など、jQueryの多彩な用途を網羅しています。掲載サンプルもダウンロードできるので、解説を
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
jQuery Mobile が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。 ってことで、まずはjQuery Mobileを理解せねば！ jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 本家サイト jQuery Mobile Gallery http://w
text() - jQuery 日本語リファレンス
<div>click <span>hrer</span> to show the result of text().</div> <div>The result is a string that contains the combined text contents of <strong>all</strong> matched elements. </div> <p>Hrer is a paragraph.</p> <div>This method works on both <strong>HTML</strong> and <b>XML</b> documents.<div>Even if it is XHTML as well</div></div> $(document.body).click(function(){ alert($("div").text()); });
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
stefanoverna.com