jQTouchの使い方とclass指定による挙動のまとめ - アークウェブシステム開発SandBox
第10回 今すぐできる！ユーザビリティを向上させるフォーム操作実践（2）：プラグインを使わずにバリデーションを実装 | gihyo.jp
もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き） 第10回今すぐできる！ユーザビリティを向上させるフォーム操作実践（2）：プラグインを使わずにバリデーションを実装 バリデーションをプラグインを使わずに実装する フォームは主にコンバージョンに直結する場合が多いと思いますので、ユーザビリティを向上させる、つまりユーザーに最後まで入力してもらえるようなフォーム作りはとても重要です。 どのような機能を持って使いやすくするのか、にはそのサイト自体のターゲットユーザー層を認識した上で盛り込む必要がありますが、どんな方法で使いやすくできるのかは知っておいて損はありません。 前回は、ラベル要素を利用して、直感的に分かりやすくする方法を紹介しましたが、今回・次回にかけては少し突っ込んでJavaScriptで行うバリデーション（※1）を実装してみたいと思います。 入力された文字列をチェックす
jqueryで属性を変更させる方法
属性とはhtmlでいうと要素で設定しているいろいろな値、 例えば：<a href="index.html"></a> 属性：href、属性値：index.html、要素：a 属性を変更できると、画像を入れ替えたり、urlを変更したり、大きさを変えたり、ホームページでの表現の幅が広がります。 attr 属性値を変更する場合 $("セレクタ").attr("変更したい属性の名前","変更後の属性値"); 例えば、 属性srcをa.jpg→b.jpgに変更する場合。 jquery $("img").attr("src","b.jpg"); html 変更前：<img src="a.jpg"> 変更後：<img src="b.jpg"> さらにたくさんの属性を変更したい時 $("セレクタ").attr({"属性名":"変更後の属性値","属性名2":"変更後の属性値"}); が使えます。 例えば、
jQueryのプラグイン33+1選 -2011年9月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Loupe 画像の一部を拡大します、多彩なオプションが便利。 Slicebox 画像をダイナミックに3Dスライスするギャラリー。 E
jQuery：リンクのクリック領域をブロック全体にする簡単なスクリプト
そうか、こんなスクリプトでもいいのかと気づいた時は、驚いたり感動したりするのですが、今回のスクリプトもそんな一つ。リンクのクリック領域を親要素全体に適応する方法なのですが、「そうか、こんな考え方もできるのか！」なんて思ってしまったスクリプトです。 ネタ元：Useful and Handy jQuery Tips and Tricks 今回使うHTML <ul> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> </ul> 単純にliをCSSでブロックに見せて作ったサンプルです。 同じウィンドウ内に開く ■スクリプト $("div#test1 li").click(function(){ window.location=$(this).find("a").attr("h
ファイルのダウンロード前にサイズや種類等を親切に表示できるjQueryプラグイン「jDownload」:phpspot開発日誌
ファイルのダウンロード前にサイズや種類等を親切に表示できるjQueryプラグイン「jDownload」 2010年06月08日- jDownload - A jQuery plugin to assist file downloads ファイルのダウンロード前にサイズや種類等を親切に表示できるjQueryプラグイン「jDownload」。 ファイルのダウンロードというと、ブラウザによってはいきなりダウンロードが始まったりするブラウザもありますが、ｊDownloadを使えば、ダウンロードの前に、ファイル名/MIMEタイプ/ファイルサイズをダイアログで表示して、確認後にダウンロードを実施してもらうということが出来ます。UIとしては次のような感じで、ちょっぴりクールなダイアログになってます。 タグ的には、「<a href="ファイル" class="download">ダウンロードはこちら</a
『[jQuery] 外部JavaScriptファイル読込みに関する考察』
前回の「GO2WEB20のTwitterバッチをAmebloにつけてみた。と、IE対策方法 」に端を発してjQueryを使って外部のJavaScriptのソースを読み込む際の様々なやり方の検証をしてみる。 jQueryのappend()を使ってタグを追加できますのでこれでscriptタグを追加してみます。 <script> $(document).ready(function(){ var script_tag = document.createElement("script"); script_tag.type = "text/javascript"; script_tag.src = "hoge.js"; script_tag.charset = "utf-8"; $("body").append(script_tag); }) </script> function foo() { a
![『[jQuery] 外部JavaScriptファイル読込みに関する考察』](https://cdn-ak-scissors.b.st-hatena.com/image/square/2bb5c9a7f0f0387772ea0883b607b831f5fbe695/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fstat.ameba.jp%2Fuser_images%2F20100402%2F00%2Fitboy%2F60%2F00%2Fj%2Fo0687039310477745699.jpg)
jQueryを使ってキーボードからの操作でイベントを実行させる方法｜BLACKFLAG
先日ここでも紹介した、Webページ内のコンテンツをキーボードから操作させる 「ASCENSOR.js」jQueryプラグインと同じ様に、 jQueryを使って、キーボードからのキー操作でページ上でイベントを実行させる 簡単なサンプルを作ってみたので紹介してみます。 「ASCENSOR.js」プラグインのように大掛かりなものではなく 今回のサンプルではキーボードの矢印キー「←」「→」「↑」「↓」を クリックしてそれぞれ個別のアクションを実行させる、という方法です。 キーボードのキーには個別にキーコードというものが割り当てられています。 矢印キーのそれぞれキーコードは —————————— 「→」・・・39 「←」・・・37 「↑」・・・38 「↓」・・・40 —————————— となっているのでこれらの値を元にアクションを実行させます。 jQueryでのキーボード操作のイベントは「keyu
データ可視化のためのグラフ描画JavaScriptライブラリ20選 | ゆっくりと…
SixRevisionsでオンラインでグラフを描画する場合に活躍しそうなJavaScriptライブラリの特集がありましたので、紹介します。個人サイトではあまり役に立たないかもしれませんが、観ているだけで楽しくなります。元記事に敬意を表し、なるべく趣旨が異ならずかつ変な日本語にならないよう心がけたつもりですが、訳に間違えがありましたら容赦願います。 2010年1月17日 by Jacob Gube 退屈な数値データを美麗かつインタラクティブに解り易く可視化するためのJavaScriptライブラリは数多くあります。通常はHTMLテーブルで表現するデータを、JavaScriptを使って可視化し美しく見せる事ができればあなたのデータはアクセシビリティーの優れたものとなるでしょう。私は2008年にデータのグラフ化＆チャート化のためのJavaScriptを書き上げましたが、今回再び単なるデータに生命を
ハイクオリティのグラフ生成JavaScript「Highcharts」
twitter facebook hatena google pocket JavaScriptライブラリのjQueryを利用してハイクオリティのグラフを生成できる「Highcharts - Interactive JavaScript charts for your webpage」を紹介します。 ※非商用にて無償です。 sponsors 使用方法 Highcharts - Interactive JavaScript charts for your webpageからファイルをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="highcharts.js"></script> <!--[if IE]> <script t
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
jQuery Clip - jQueryのプラグインをまとめました。
jQueryの便利で実用的なイメージスライダーやレスポンシブ対応のプラグインをタグやカテゴリで見やすくまとめました。
タブやアコーディオンなど、様々なUI構築用のjQueryプラグイン30個以上をセットにしたフレームワーク・ jQuery EasyUI - かちびと.net
普段からよく見かけるjQueryによる タブやアコーディオンなどのUIの構築 を簡略化するためのフレームワーク・ jQuery EasyUIのご紹介です。プラグ インは30個以上あり、どれもシンプル なものになっています。 数じゃ敵いませんけど、Ext JSのjQuery依存型みたいな印象です。結構昔からあるみたいなので知ってる方も多いかもですけど・・・恥ずかしながら最近知ったので、僕と同様にまだ知らない方向けにシェア。 jQueryを使ったシンプルなユーザーインターフェースを構築する為のプラグイン30数個をワンセットにしているフレームワークです。余計な機能が付いていないものばかりなのでカスタムしやすいのでは。 コードはドキュメントに全部書いてありますので割愛します。 プラグインの一部をご紹介します。 Accordion 開閉するアコーディオン Menu シンプルなメニュー Panel パ
スマートフォン向けのJSフレームワーク・Wink Toolkitがバージョンアップしてより素敵になったよ
以前ご紹介した、スマートフォン向けの JavaScriptフレームワーク、Wink Toolkit がバージョンアップしたんだぜ、と開発者 さんからわざわざお問い合わせ頂いたの でご紹介。以前もかなり豊富なUIでとても 有意義なフレームワークだと感じましたが、 今回はUI面が特にパワーアップ。 Wink Toolkitがバージョン1.3になって機能もいくつか追加されました。3ヶ月間、UIの改善にかなり力を入れてくれたようで、スマフォにかなり合わせてくれましたよ。 jQuery Mobileライクなインターフェースになりました。もともとUIエフェクトの評価は高かったWink Toolkitですが、全体的なデザインが見直されてかなり垢抜けた感じです。 尚、以前の機能やUIは過去記事をご参照下さい。 Wink Toolkitが割と良かったので日本語サンプル作った Demo 前回はほぼ全てのデモを
jquery.tablefix.js
»Download jquery.tablefix.js は、Excel のウィンドウ枠固定のように、テーブルのヘッダや左側を固定して、残りの部分をスクロールさせるための、jQuery プラグインです。 JavaScript 無効時はただのテーブルとして普通にそのまま表示される点と、他の類似品と違ってソート変更などの高度な機能がない代わりに、すでにデザイン済みの任意のテーブルにそのまま適用出来る点が特徴です。 読み込むのはプラグインだけで、追加の css や画像ファイルは必要ありません。 使い方 普通にテーブルをデザインする jQuery とプラグインを読み込む jQuery のセレクタでテーブルを選択して、プラグインを呼び出す これだけで、あとはプラグインがよかれにやってくれます。 プラグインの呼び出し方 $('tableSelector').tablefix({width: 600,
jQueryで見栄えのいいグラフが描ける「jqPlot」 (1/3)
証券会社のサイトの株式相場グラフ、ショッピングサイトの価格変動グラフなど、Webサイト上に変動するデータをもとに、動的にグラフを表示したいことがあります。従来は、Flashを使うことが多かったですが、最近はAjax/JavaScript人気もあって、「JavaScriptでグラフも作成したい」というニーズも強くなっています。 以前、本誌では、HTML5のCanvasを使った図形のサンプルとして、グラフの描画方法を紹介しましたが（関連記事）、今回はグラフ描画に特化した専用ライブラリ「jqPlot」を使って、もっと簡単に見栄えのいいグラフを作成する手順を紹介します。 グラフに特化したjQueryプラグイン「jqPlot」 「jqPlot」はクリス・レオネロ氏が開発しているJavaScriptライブラリで、jQueryのプラグインとして動作します。HTML5のCanvasを応用してグラフを描く仕
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
opensocial-jquery - Google Code
jQuery逆引きリファレンス － ＠IT
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ