最近気になってきたjQueryについて色々調べてみました - もとまか日記
最近、「jQuery」というキーワードをよく見かけます。 これって何だろ？と思ったので調べてみたら、JavaScriptのライブラリのようで。 てことで、最近ちょっと気になってたJQueryについて調べてみました。 jQueryの概要 まずは難しいことは抜きにして、以下を読んでみると分かりやすいです。 はじめてのjQuery jQuery仕様関連 一応ですが、仕様について。 jQuery 日本語リファレンス 必要に応じてみればいいかな？と思ってるので、まだ細かくは見てません。 初心者向けの基礎知識、基礎講座 最初は初心者向けの記事を読んでみると良さそうです。 ASCII.jp：40分で覚える！jQuery速習講座一晩で覚えるjQueryの逆引き基礎サンプル7つjQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみるjQuery 開発者向けメモ サンプル、プラグイン 調べてて
[JS]リリースしたばかりのjQuery1.5対応のチートシート -jQuery 1.5 Visual Cheat Sheet
jQuery 1.5 Visual Cheat Sheet [ad#ad-2] jQuery 1.5のリリース情報は下記を参考ください。 jQuery: » jQuery 1.5 Released また、先日jQuery 1.5rc1がリリースされました。 jQuery: »jQuery 1.5.1 RC 1 Released jQuery 1.5対応のチートシートは他のVisual Cheat Sheetシリーズと同様に実用的で、簡潔に美しく仕上がっています。
jQuery Mobile使用時によく使いそうなマークアップのリストと動作サンプル
自分用に備忘録。そろそろチートシート が出てくる頃じゃないかと思うので、そう 焦ることも無い情報だと思いますが、近々 使いそうなのでその時に面倒な事になら ないようによく使いそうなマークアップを リストとしてメモしておきます。 ちゃんとしたデモは本家で確認して下さい。ここにあるサンプルは僕のいい加減なサンプルです。尚、マークアップが見やすい様にするだけの為にコメントアウト入れていますが気にしないで下さい。 [note]追記 もう少し増やして見やすくしたものをダウンロード出来るようにしました。 [/note] プラグイン読み込み<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script type="text/javascript" src="h
jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる
人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本
jQueryモバイル用のコードをPHPで簡単ジェネレートできる「jqmPhp」:phpspot開発日誌
jqmPhp | HTML Code Generator for jQuery Mobile Framework | jqmPhp jQueryモバイル用のコードをPHPで簡単ジェネレートできる「jqmPhp」。 次のようなコードにより、簡単にjQueryモバイルのページを作れます。 <?php include 'lib/jqmPhp.php'; $j = new jqmPhp(); $j->addBasicPage('', 'Hello World', 'It's works!'); echo $j; ?> addBasicPageメソッドによって、jQueryモバイルでのページを簡単作成可能。 単にページの追加だけではなく、ボタンを追加したり、各種コントロールの追加がPHPで出来るところが特徴です。 以下、jqmPhpで作ったページデモ。実際に動作するデモページはこちら このスマートフ
リストにフィルタを掛けてソート出来る、わずか2KBの軽量jQueryプラグイン・MobilySelect
以前にも同じようなものがありましたが、 こちらのほうが良かったのでメモ。リスト （デモでは画像を使っています）にフィルタ リングしてソート出来るjQueryプラグイン。 わずか2KBと軽量で、クロスブラウザ対応 です。便利そうなのでどこかで使いたい ですね。 以前ご紹介したFilter Image Viewも良かったのですが、IE6で表示が微妙でしたが、MobilySelectは問題なく、しかも軽量です。 機能はFilter Image Viewと同様で、ボタンを押すと、そのボタン以外のリストを非表示にする、というフィルタリング。 上記は「名刺」のみの表示にした状態。 完璧に同じ挙動、とは行きませんが、IE6でもちゃんとフィルタリングしてくれます。上記はIETesterでのキャプチャ。 マークアップ<div class="selecter selecter1"> <div class="s
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
サイトの使い方をその場でアニメーションしてチュートリアルさせられる凄いjQueryプラグイン「Embedded Help System」:phpspot開発日誌
サイトの使い方をその場でアニメーションしてチョートリアルさせられる凄いjQueryプラグイン「Embedded Help System」 2011年01月20日- Embedded Help System サイトの使い方をその場でアニメーションしてチョートリアルさせられる凄いjQueryプラグイン「Embedded Help System」。 これはかなり便利かもしれません。クリックすると、その場でマウスポインタが現れ、アニメーションと吹き出しでサイトの使い方を教えてくれちゃいます。 普通は、こうして次にああして、と文書での説明になりますが、これだとビジュアルに視覚的に分かるということで非常に分かりやすいものが作れますね。 デモページで左カラムの「How to...」の下にあるメニューをクリックで確認してみましょう。 更に、アニメーションだけではなく、ＵＩの上に、[ 1 ] [ 2 ] [
フォームで離脱させないためのjQueryプラグイン50選｜designaholic -Creative Column-
最近では、エントリーフォーム最適化（EFO）という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。 ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。 まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じせない事です。ストレスの原因となるものは大きく言うと 入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。 どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。 です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。 具体的なポイントは以下のような項目になります。 必須入力か
テーブルのセル間をフォーカス移動できるようにする jQuery exTable Focus - Cyokodog :: Diary
先日、現物とドキュメントの乖離に嫌気がさし、テーブル定義書の和名や説明文を、ＤＢのメタ情報として保存できるようにする Web アプリを作りました。（オラクルのデータディクショナリを利用してます） テーブル定義書イメージな画面から Ajax + In-Place-Editor で直接編集できるようにしたのですが、編集量が多い時など、キー操作による上下左右のフォーカス移動ができないとどうにも不便だったので、これを可能にする jQuery プラグインを書いてみました。 機能概要 テーブル要素内の INPUT、TEXTAREA、SELECT、A のいづれかの要素にフォーカスした状態で、[Shift] + 移動したい方向の[矢印キー]の入力で、セルを跨いだフォーカス移動ができます。 Opera の空間ナビゲーション機能 Opera にはもともと テーブル要素に限定せず、同様のキー操作でフォーカス移動
jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
jQuery作者が明かす「jQuery Mobile」の魅力
JavaScriptをWebデザイナーでも扱える身近な存在に変えた「jQuery」。世界中の有名サイトで使われている人気フレームワークの作者＝ジョン・レッシグ（John Resig）氏が次に注目したのが「モバイル」です。2010年10月に最初のアルファ版がリリースされた「jQuery Mobile」は、モバイルWebアプリケーションフレームワークの本命として、多くの開発者の関心を集めています。 本稿では、11月13日に開幕するWeb Directions East 2010に合わせて来日予定のジョン・レッシグ氏が、jQuery Mobileの魅力（の一部）を紹介します。（編集部） クロスブラウザーやブラウザー固有の問題を避け、高いインタラクションを手軽に組み込むには jQueryのようなJavaScriptライブラリーの利用が欠かせません。jQueryはDOMへアクセスしたり、イベントを付
コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」:phpspot開発日誌
コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」 2010年10月29日- DivGrow jQuery Plugin ? Easily make your DIV containers expandable & collapsable (with animation) HibboBlog コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」。 ブログの記事の概要なんかを次のように画像の横に表示させるとして、このプラグインを使うことでピッチリと画像の高さをあわせてデザインをスッキリさせることが可能です。 通常こういうことをやろうとすると結構めんどくさいですがjQueryプラグインなので高さを渡してあげるだけで綺麗にそろいます。 で、「Show More」という部分
[JS]実装のロジックを理解して、自分に適したツールチップを作成するチュートリアル
ツールチップのスクリプトやプラグインは、数多くリリースされています。 ここではjQueryを使用したツールチップをどのようなロジックで実装するかを解説したチュートリアルを紹介します。 Simple Tooltip w/ jQuery & CSS デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 1. マークアップ -HTML 2. スタイル -CSS 3. エフェクト -jQuery 4. スクリプトのロジック 5. 注意点 1. マークアップ -HTML マークアップをする際に気をつけることは可能な限りシンプルするのと同時に、さまざまなシナリオに対応できるよう柔軟にすることです。 メインとなるa要素にはツールチップを表示するために、class名「tip_trigger」を記述します。また、ツールチップのコンテンツを配置するspan要素には、class名「tip」を記述
Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」:phpspot開発日誌
jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-
Twitterのつぶやきをサイトへクールに表示させるjQueryプラグイン「EmTweet」
ブログやサイトにTwitterでの自分のつぶやきや、検索結果を表示させているサイトが増えてきていますよね。 そのため、他とは違う物がよいとか、邪魔にならない部分へ表示させたいといったニーズもあるはず。 そんなことを実現してくれるjQueryプラグインをご紹介。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! Twitterのつぶやきをサイトへクールに表示する「EmTweet」「emTweet」は、サイト上にTwitterユーザー名で絞り込んだつぶやきや、検索結果の最新のつぶやきをサイトの右上の部分に表示してくれるjQuery プラグイン。 いくつかの項目を設定するだけで、カンタンにjQueryのコードを発行してくれます。 表示サンプル ↑このページにも表示させていますが、画像のように最近のつぶやき
jQueryを使ってiframe要素の中身にアクセスする | バシャログ。
残暑の蒸し暑さから、涼しさを通り越して、寒いと感じる今日この頃、tanakaです。 今日はjQueryでiframe要素の中にアクセスして、情報を取得したり、改変したりする方法を紹介します。 jQueryは、Webページに対するアクセスを簡潔に表現できるライブラリですが、iframe内の文書にまで、 $('div iframe p') といった感じでアクセスすることはできません。ドキュメントが違うからでしょうか？正しい理由はわかりませんが、同時に2つのページをまたいで処理するのは混乱しそうなのでこれはこれでいいと思います。で、そういったときにアクセスする方法があるのでご紹介します。 [追記 2010/09/27]注意点として、親フレームとiframe内ドキュメントのドメインが異なる場合はアクセスできません。 iframe内のドキュメントにアクセスするにはcontents() $(...).
jQuery API 1.4.4 日本語リファレンス - StackTrace
add(expr) 要素集合に、条件式にマッチした要素集合を追加します。 add(expr, context) 要素集合に、指定されたコンテキストの条件式にマッチした要素集合を追加します。 addClass(class) 要素のクラスに、指定した CSS クラスを追加します。 addClass(fn) 要素のクラス属性に、指定した関数が返す CSS クラスを追加します。 after(content) マッチした要素の後（弟要素）に、指定した内容を追加します。 after(fn) マッチした要素の後（弟要素）に、指定した関数の内容を追加します。 jQuery.ajax(settings) HTTPリクエストを使用してデータを取得します。 ajaxComplete(handler) Ajaxリクエストが完了した時に実行するコールバック関数を登録します。 ajaxError(handler) A
jQuery ソースコードを読むための参考資料一覧 - mollifier delta blog
2010/09/26(日) に京都で Kanasan.JS jQuery コードリーディング #2 が行われる(告知ページ)。みんなで jQuery のソースコードを読むイベントで、今回が2回目だ。参加者募集中です。 jQuery はファイル1つだけのライブラリなのですごい環境とかもってなくても大丈夫なんだけど、読むうえで参考になるサイトとかをまとめてみた。この辺の準備をしておくと理解が深まると思う。 ソースコード http://code.jquery.com/jquery-1.4.2.js http://github.com/jquery/jquery まずは jQuery のソースコードを取ってこないと始まらない。今回はバージョン 1.4.2 を使用する。jQuery の公式サイトから圧縮していないコードをダウンロードしよう。 それと、jQuery ソースコードは Git で管理されて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me