MdN Design｜総合情報サイト
スマートフォン 01-03 jQuery Mobileとは いまやスマートフォン向けのフレームワークとしてなくてはならない存在になったjQuery Mobileとはどういったものなのか？ jQuery Mobileを利用してどのようにスマートフォンサイトが作成できるのか紹介しよう。 制作・文／野崎侑士（ユージック） BROWSER iOS Andoroid jQuery Mobileの概要 jQuery Mobileは、jQueryコアおよび jQuery UIをベースにして開発されたモバ イルデバイス向けのフレームワークだ。 スマートフォンのみならずタブレットデ バイスや電子リーダ、デスクトップまで 幅広いプラットフォームに対して、 HTML5技術をベースとしたUIを提供する ことを目的として開発されている。 2012年5月時点では2011年11月に初 となる正式版（バージョン1.0）が
PhotoSwipe
What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';
CSSを追加してjQuery Mobileのデザインをカスタマイズ！ | Lab by engineering@dwango.jp
こんにちは初めまして、石崎と申します。 今回は jQuery Mobile シリーズ3回目！ということで、jQuery Mobile デザイン編です！ jQuery Mobile には 標準のテーマ（色見本）が5つ用意されています。この標準のテーマを使用してアプリを作ることも可能です。しかし、アプリやサイトにはそれぞれのデザインやブランドイメージがあり、標準のテーマとは違うイメージのものを作りたい場合があります。 そんな時のために、今回は CSS などをカスタマイズして独自のデザインをいれていくノウハウについて説明します。 対象読者 CSS3, HTML5 の知識がある方 jQuery Mobile の仕組み 今回は jQuery Mobile のバージョン 1.0 RC2 を扱います。 先ほど述べたように、jQuery Mobile には標準のテーマが5つ用意されています。data-th
jQueryMobile リンク、ページ遷移について
jQueryMobileでスマートフォンサイトを作ろう！第2回目はリンクやページ遷移についてです。 jQueryMobileではページ遷移は大きく分けて２つあり、 ページ内リンクと別ページへの遷移です。 それではさっそく見てみましょう。 (なお、今回からマークアップはHTML5のみとなります。) jQueryMobileページ内リンクの遷移 まずはページ内リンクについてです。前回作ったnew.htmlを複製して、下記のように書き換えてください。data-role=”page”と指定されたsectionタグで囲われた部分が1ページあたりの表示になります。 マークアップ <!--first_page --> <section id="page1" data-role="page"> <header data-role="header"><h1>jQuery Mobile</h1></heade
jQuery Mobileでシンプルなイメージギャラリーを実装する為のプラグイン・ImageFlip
JQM向けのイメージギャラリーを 実装する為のjQueryプラグイン です。フリック操作で進める事 が出来ます。特に変わったエフ ェクトも無いのでシンプルで使 いやすい印象でした。 jQuery Mobile向けのシンプルなイメージギャラリーを実装する為のプラグインです。 フリック操作に対応したイメージギャラリーです。スマフォ向けなので凝ったエフェクトもなく、なかなか軽量なライブラリとなっています。JQM自体軽量とは言えないのでこういったスクリプトは軽量であって欲しいトコロです。 JQMに準じたカスタムデータ属性を含むDOM要素を生成したりswipeleftメソッドで送ったり、みたいな感じっぽいです。良く見てませんけど。 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="jquer
Twitter BootstrapをjQuery Mobileで使ったデザインテーマ集・jQuery-Mobile-Bootstrap-Theme - かちびと.net
なかなか良かったので備忘録です。 Twitter Bootstrapのデザインを、 jQuery Mobileのテーマに起用した サンプルソースが公開されていま した。フレームワーク的にも使える かもしれない。 Twitter Bootstrap × jQuery Mobileです。既出ですけど良かったので。 JQMのデザイン変更用リソースです。ThemeRollerでもいいんですけどどうも微妙というか、肌に合わないのです。最初から作った方が早い気がしましたが、こうして変更されたものがあるならこれを元に変えると効率的になりそうです。同じ手法でbootswatchで配布されてるBootstrapテーマを起用しても良さそうですね。 Sample サンプルのQRコードです。↓ 何故かフォームのデザイン変更できなかったけど・・・まぁ自分で作ればいいかなｗ ご利用は以下よりどうぞ。 jQuery-M
jQuery Mobileのリストでデフォルトの高さのリストにサムネイルを高さ一杯に含める - かちびと.net
ちょっと意味不明なタイトルですが。 jQuery Mobileでリストを書くときの Tipsです。昨日ちょっと個人的に話題 に上がったのでメモ的に記事にします。 最近はすっかりJQMの話題が減っていた ので丁度いいですね。 というわけで備忘録的な記事。jQuery Mobileの話です。触ったことがある方向けですかね。普通のリストの高さに合わせてサムネイルを含めます。正しい方法かどうかは知りません。 これが普通のリストです。このマークアップは以下のような感じ。 <ul data-role="listview"> <li><a href="example01.html">foo</a></li> <li><a href="example02.html">bar</a></li> </ul> listviewというルール名をdata属性に与えればリスト化します。 画像付きにしたい・・けど こ
jQuery Mobileを使った国内スマホサイトまとめ (1/3)
jQuery Mobileの採用が国内でも進んでいる。jQuery Mobileは、iPhone/Android、WindowsPhoneやBlackBerryなど、主要なスマートフォンに対応したUIフレームワーク。HTMLに簡単な記述を追加するだけで、スマートフォンに最適化したサイトやWebアプリケーションを制作できる、注目のフレームワークだ。 昨年11月には、待望の「jQuery Mobile 1.0」正式版がリリースされ、実務でも本格的に利用しやすくなった。今後、ますます増えそうなjQuery Mobileを使ったスマートフォンサイトの事例をチェックしておこう。 ※商品紹介／キャンペーンサイトに、「太鼓の達人学園（太鼓の達人×AKB48キャンペーンサイト）」を追加しました。（2012年3月1日16時更新） ※ネットサービスに、「一休.com」「recbike」を追加しました。（201
jQuery Mobileを使う際に知っておくと役立ちそうなTipsや情報のまとめ - かちびと.net
jQuery Mobileに関して少し整理したいので まとめました。JQMを使うときに知っておくと 便利そうなTipsとか情報とか。いくつか自分 の記事も含まれているのが若干アレなんです が、ご了承ください。内容はコードのみ、では なく、参考サイトなど一貫性無い感じですが。 整理するのが下手なもので一貫性に欠ける内容で申し訳ないですけど、jQuery Mibileを使ったWebサイト構築時のちょっとしたTipsや役に立つ情報などのまとめです。 ページ移動にAjaxを使わないようにする プラグインの前に記述。リンク単位でならマークアップでrel=”external”を、フォームはdata-ajax=”false”を加える。 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery Mobileカスタマイズ自由自在
builwing.info
StudioMino.com is for sale | HugeDomains
連載インデックス「jQuery Mobileでスマホ向け企業サイト構築」 - ＠IT