jQuery Mobileでサクッと作るスマートフォン向けWebアプリの基本 ─ ＠IT
大日本印刷 森川 裕美 2011/9/29 jQueryMobileを使って、スマートフォン向けのWebアプリケーションを手軽に作成する方法をおばかアプリを例に紹介します おばかアプリの開発にjQuery Mobileを使ってみました 先月8月20日に開催されました「第5回おばかアプリ選手権（見よ！ コレジャナーイアプリの数々を！）」にて、jQuery MobileとHTML5の要素を使用した、iPhoneのMobile Safariで動作するミニアプリiBooNを紹介させていただきました。本記事では、jQueryMobileを使って、お手軽にスマートフォン向けのWebアプリケーションを作成する方法をiBooNを例に紹介します。 iBooNは、iPhoneの傾きに応じて車の音が変わるミニアプリです。まず、Color Select画面から好きな色の車を選びます。ミニカーの画像が表示された画面
フォーム周りのエレメントのデザインを見やすいインターフェースに変更できるjQueryプラグイン・jNiceItと、似たようなやつ何個か
どこかで使いたいなと思ってメモ。フォーム で良く使うラジオボタンやチェックボックス などのデザインを割りと簡単に見やすいデザ インに変更できるjQueryプラグインです。 この手のプラグインは沢山あるので選択肢の 一つとして、ですが、個人的には使いやすい 印象でした。 昨日に続き、今日もフォームのスクリプト。今日はフォームデザインを変更できるやつです。IE6だけちょい崩れるけどそれ以外は共通したデザインに変更できます。 ラジオボタンとかチェックボックスを画像に置換するプラグインですかね。なので、デザインの変更は基本的に画像とCSSを少し変えるだけです。尚、画像の指定もcssで行います。 左が普通で、右がリア充ですね。シンプルでいい感じです。見た目がいいほうが愛されるんですねきっと。世知辛い世の中ですこと。 マークアップも特別なことはしなくて済むのも楽かも。デザインの変更は基本的に画像を変え
Re:一晩で覚えるjQueryの逆引き基礎サンプル7つ (でぃべろっぱーず・さいど)
一晩で覚えるjQueryの逆引き基礎サンプル7つ*ホームページを作る人のネタ帳 jQueryに書くとほってんとり入りできるらしいので便乗。というかリンク先で紹介されているサンプルコードにちょっと意義異議あり。 一個のサンプルは非常に単純な構造になっておりますゆえ、jQueryをすでにやったことがある人にとって必要ないものだということをあらかじめご了承くださいませ。 ということであれば、「jQueryらしい」書き方をした方が良いかなと思います。 で、僕ならこう書くってことで。 全般的に使われている$(document).ready(fn)は、$(fn)でショートカットできます。 $(document).ready(function(){alert('hoge');}) は、 $(function(){alert('hoge');}) こう書けると。 まあ、これはどうでもいいや。短く書けるって
SlickSpeed Selectors Test
speed/validity selectors test for frameworks. Every framework runs in his own iFrame, thus no conflicts can happen. Tests are run selector by selector, with an interval to prevent the browser from freeezing. Tests are run in a neutral environment, no library or framework is included in the main javascript test, to avoid favoritism. Tests are run against a local copy of this document. beta' src='s
jQuery UI API 1.8.4 日本語リファレンス - StackTrace
jQuery UI API 1.8.6 の日本語リファレンスです。 ソースコードを読み、jQuery UI(公式サイト)のドキュメントを参考に解説しました。 また、全ての解説に、実際に実行できるサンプルを付けました。 jQuery UIとは jQuery UIとは、jQueryライブラリ上に構築された強力なユーザインターフェースライブラリです。 jQuery UIの構成 jQuery UI 1.8.6 は、大きく分けて「インタラクション」「ウィジェット」「ユーティリティ」「ビジュアル効果」3つのカテゴリに分けることができます。 それぞれ、次の機能が提供されています。 インタラクション 対話型ユーザインターフェースを構築するためのライブラリ ライブラリ説明対応ファイル
画像を使わず、CSS+jQueryで絵文字を作れる・JQuery CSS Emoticonsがちょっと素敵だｗ
これはちょっと面白いｗ画像を使わず、cssとjQueryだけで顔文字を作ってしまったみたいです。発想が単純だったのでうまく応用出来れば楽しいものが出来あがりそうな予感もしますな。面白い事考える人がいますね・・ｗ CSS+jQuery（と、もちろんHTML）のみで、画像は一切使われていません。ちょっとこの発想なかったです。ユニークですけど、割と使い勝手がいい気がする・・気のせいかなｗ 一見よく見かけるアイコンだと思うんですけど、これ、全部cssとテキストとjsで作られています。 からくり こういう発想。単純だけど思いつきませんでしたｗなので、以下のようにテキストとして選択できます。 :Ｄとか:ｐを縦にして、グラデーションのかかった黄色い枠を作れば完成ですね。 コード<link href="stylesheets/jquery.cssemoticons.css" media="screen"
ベーシックで汎用性のありそうなjQueryイメージスライダー・The Lof JSiderNews
クロスブラウザに対応したベーシック で汎用性のありそうなスライダーを 実装出来るjQueryプラグインのご紹介。 The Lof JSiderNewsは派手な装飾も 無く、シンプルで欲しい機能は揃え てくれている印象です。 なかなか使いやすそうなので備忘録。派手なスライダーが結構多い印象ですが、結局普通のものが一番使いやすいですよね。派手なのもインパクトあって好きですけどｗ 今日のプラグインもクロスブラウザ対応でベーシックな、汎用性のあるスライダーです。コーポレートサイトと相性いいかもですね。 サムネイルがナビゲーションとして付きます。画像のスライドと共にサムネイルもアニメーションスライドします。デモサイトでは1つしかありませんけど、実装出来る形は6種類から選択できます。IE6でもIE7でも問題なく動作しました。※IE6の透過処理は別途必要です。 デザインは6種 例として2つキャプチャ撮り
Be happy with jGlycy [jGlycy]
jGlycyを使えば、スクリプトを記述する必要は一切ありません。 <div jg="cycle"> <img src="/jglycy/img/muuu_01.gif" width="200" height="200" /> <img src="/jglycy/img/muuu_02.gif" width="200" height="200" /> <img src="/jglycy/img/muuu_03.gif" width="200" height="200" /> </div> これだけ。 「コードを1行も書かずに、リッチなページを」 が、jGlycyの目指すところです。 バリエーションも自在。
PHP が使えると Ajax との合わせ技で jQuery が凄く楽しくなる
最近 EC サイトの制作をしておりまして、商品の追加の際にページ全部を読み込み直すのはサーバーにも負荷がかかるし、利用者もストレスがかかると思ったので、部分的に Ajax で読み込んでしまおうと思って、prototype.js でやろうと思ったんですが、jQuery でもひょっとしてできるのかな？と思って調べてみたらできるようです。 Javascript を前々からやってる人は以下の記事を読むと、jQuery がどれだけ凄いか分かります。 jQueryの魔法 – ［JavaScript］All About jQuery のわくわく感を伝えてくれる記事はこれです。 ニュータイプなJSライブラリjQueryを使ってみよう！ 今回使ったコードはこれだけです。
jQueryでGoogleカレンダーの予定を取得して自分のサイトに表示する
Posted: 2011.04.18 / Category: javascript / Tag: API, jQuery, json クライアント側でイベント情報などの予定をWeb上にのせたいとき、一からシステムを開発する他、最近ではGoogleカレンダーを自サイトに埋め込むという方法もありますね。 でもそれだとデザイン的にあれだよね。ということでjQueryを使用してお手軽にGoogleカレンダー予定を時系列順に表示する方法をご紹介します。 Googleカレンダーの設定 Googleカレンダーは初期設定だと自分しか見られない状態ですので、サイトに表示するためには設定を変更する必要があります。 Googleカレンダーにログインしたら左メニューから「アカウント名@gmail.com」の右の三角アイコンをクリックして、サブメニューから「カレンダー設定」を選択します。 設定画面で「このカレンダー
faviconをJavaScriptで指定して日付も表示できる「jQuery.favicon」
twitter facebook hatena google pocket ネタ的なJavaScriptですが、どこかで使えそうなので。 faviconをJavaScriptで指定でき、テキストも表示させられるjQuery favicon pluginです。 これを利用するとGoogleカレンダーみたいなアイコンにテキストを表示させられますね。 sponsors 使用方法 jQuery favicon pluginからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.favicon.js"></script> <script> $(function(){ jQuery.favicon('
第8回 Ajax編（前編）
連載目次 loadメソッドを利用することで、指定されたURL（引数url）の内容をカレント要素に反映させることができます。サーバ側から取得したコンテンツを、そのままページに反映させたいという場合に利用します。Ajax関連メソッドの中でも、最もシンプルなメソッドです。 さっそく具体的なサンプルを見てみましょう。以下では、［現在時刻］ボタンをクリックしたタイミングで、サーバサイド（.aspxファイル）から現在時刻を取得し、ページに反映します。
ファイルのダウンロード前にサイズや種類等を親切に表示できる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 で作るシンプルなツリー型メニューボックス
メニュー3-1 メニュー3-2 メニュー3-3 メニュー3-4 メニュー3-5 メニュー3-6 メニュー3-7 実装例の動作について 「 メニュー1 | ▼ 」をクリックすると、メニュー1のサブメニューが現れる。「 メニュー1 | ▼ 」を再びクリックすると、メニュー1のサブメニューが折りたたまれる。メニュー2、メニュー3についても同様。 ソースコード JavaScript <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $( function() { $( '#jquery-menu-1-title' ) . click( function() { $( "#jquery-menu-1-sub" ) . slideToggle( 'slow' );
jQuery逆引きリファレンス 【セレクタ編】 複数のセレクタをまとめて指定するには？ - 桂乃屋
複数のセレクタをまとめて指定するには、セレクタをカンマ（，）区切りで記述します。この場合、指定されたセレクタのいずれかに合致した要素が取り出されます。 以下の例では、<h2>タグであるか、class属性が「wings」である要素に対して、枠線（紫色で2px）を追加します。 <script type="text/javascript"> $(function() { $('h2, .wings').css('border', 'solid 2px #FF00FF'); }); </script> ……中略…… <h2 id="caption">お勧めの書籍</h2> <ul> <li><img src="http://www.wings.msn.to/books/978-4-7981-1957-1/978-4-7981-1957-1_logo.jpg" alt="ASP.NET" /></l
jQueryを使って外部のhtmlを読み込むTips
jQueryを使ってヘッダ、フッタなど共通部分のhtmlを本体のページに読み込むカンタンTipsです 共通で使いたいhtmlと、読み込む側のhtmlを用意する。共通部分にはheadタグとかbodyタグとかは不要です。 ほんとに部分的に抜き出したhtmlだけを用意します。 例えばヘッダ、フッタを共通にする場合は3つのファイルができることになります。 index.html 本体 header.html ヘッダー footer.html フッター jQueryを使うので、htmlの文字コードはUTF-8にしておきます。 jQueryをダウンロードするhttp://jquery.com/ 特に理由がなければ「Production」を使用します。 htmlでjQueryを呼び出し、共通htmlを読み込むまずjQueryを呼び出します。ふつーに。 ＜script type="text/javascri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryの魔法 [Javascript] All About![jQueryの魔法 [Javascript] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
5509.me
kadoyan.com
caraldo.net - it転職 リソースおよび情報