jQuery Mobile 1.3β公開。レスポンシブなテーブル、グリッド、追加コンポーネントなど大幅強化
HTML5のマークアップだけでモバイル対応のWebアプリが構築できるJavaScriptフレームワークのjQuery Mobile。レスポンシブWebデザインにフォーカスし大幅に強化された新バージョンjQuery Mobile 1.3βが公開されました。 jQuery Mobile 1.3では、表示幅に対応して自動的にフォーマットが変化する「Responsive tables」や「Responsive grids」、1つのスライダーで値を2つ設定できる「Range Slider」、新しいウィジェットの「Panel」をはじめ、多くの機能追加が行われています。 ブログでは、今回のバージョンでレスポンシブWebデザインにフォーカスする経緯について、以下のように説明しています。 We’ve seen the question “What should I use: RWD or jQuery Mo
モバイルアプリ向けJavaScriptフレームワーク「Junior」、Backbone、Zeptoなどを採用し、ネイティブのルック＆フィールを持つ
Juniorは、Justin Martin氏が開発したフレームワーク。Martin氏は“My holiday project”としてJuniorを開発したとツイートしています。 Juniorの特徴は、モバイルに最適化したCSSトランジションによるスムーズな画像効果、zeptoやbackbone.jsなど多数のライブラリに依存していることなど。UIコンポーネントはRatchetを利用しているようで、モバイルネイティブのルック＆フィールを備えていると説明されてます。 modernizr、zepto、backboneなどに依存 Juniorが依存しているライブラリは以下。 modernizr（ブラウザごとに異なる実装を調べて、対応するコードを書きやすくする） zepto（jQuery互換のミニマルなライブラリ） zepto flickable（zeptoのタッチ対応プラグイン） lodash（U
カレンダーコントロールを使う - jQuery Mobile メモ - オレスタ
スマートフォンで日付を入力するなら、年月日ごとにセレクトボックスを作るより、カレンダーでかっこよく選択できるようにしたいものです。 jQuery Mobileにカレンダーコントロール プラグインの DateBoxがあるので試してみました。 その再、jQueryを読み込んだ後、スクリプトをはさみ、その後jQuery Mobileなどを読み込むようにします。正確な理由はわかりませんが、chromeでこの指定をしないと上下のスクロールバーがでました。 <script src="scripts/jquery-1.6.2.js"></script> <script type="text/javascript"> $( document ).bind( "mobileinit", function(){ $.mobile.page.prototype.options.degradeInputs.dat
jQueryMobile - DateBox Demo
jQuery-Mobile-DateBox DateBox is a small, android-esk date picker, using as many of the native jQueryMobile controls as possible. This is based in part on the work of Todd M. Horst, and his Android Like Date Picker 2 DateBox Features Auto-parses text entered into form element on open [any valid date string in your browsers locale, uses javascript:Date()] Input items on DateBox are directly editabl
jQuery Mobileでjsからダイアログを開く方法 - ハードコイルド・ワンダーランド
jQueryMobileのダイアログはアンカーリンクに"data-rel='dialog'"を追加するだけなのでとても簡単だ。 しかし、ひとつ欠点がある。アンカーリンクを仕込める場所にしか作れないのだ。 それに加えて以下のような制約がある。 window.open(url)が使えない jquery-ui-dialogはクラスの名前空間が衝突するらしく、使えない そのため、javascriptからダイアログを開きたいという要請に上手く答えることができない。 苦肉の策として以下のページの用な対応方法がある。 Dialog _ jQuerymobile -stackoverflow 回答の一つ目はどうしても動作しなかった。二つ目の回答は僕の環境でも動作した。 たしかに、書き方は良くないかもしれないが、とりあえず動くようだ。 <!DOCTYPE html> <html> <head> <scrip
サンプルで学ぶjQuery Mobileまとめ（後編） (1/5)
前編、中編に続き、jQuery Mobileの機能について解説します。 グリッドレイアウト スマートフォンはPCに比べて画面幅が狭いので、1ページを複数カラムに分割するレイアウトはスマートフォンサイトに向きません。しかし、タブナビゲーションを実装する場合など、複数カラムに分割したい場合もあります。jQuery Mobileでは要素を均等に分割して並べる「グリッドレイアウト」の機能が用意されています。 2カラム 2カラムにしたい場合は、class属性「ui-grid-a」を付けた要素の内側に、class属性「ui-block-a」とclass属性「ui-block-b」を付けた要素をそれぞれ配置します。 ■サンプル01[HTML] <div class="ui-grid-a"> <div class="ui-block-a"><strong>I'm Block A</strong></div
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
マニフェスト Tips
RADWIMPSじゃなくてHTML5のキャッシュ。 やっとmanifestファイルを使ったキャッシュを組み込めました。 Offline resources in Firefox - MDC Doc Center Safari Client-Side Storage and Offline Applications Programming Guide: HTML 5 Offline Application Cache 前回のエントリでjQuery Mobileを使ったぐっと来た.ccの話をしましたが、その時はmanifestが簡単に組み込めなくて断念してたんですが、移動中だとやっぱり遅さが気になるんです。 どうすれば簡単にmanifestを使ったキャッシュを使えるのか、ASP.NET MVCのアプリケーションに組み込めるのか、悩ましいところでしたが、なんとかかんとかキャッシュできました。 ロ
これからのスマホサイトは、jQueryMobileで作成しよう！
最近は、スマートフォン対応のサイトが結構増えてきて HTML5/CSS3などで作ろうとか、流行ってきています。 みなさんは、「jQueryMobile」って聞いたことありますか？ jQueryMobileは、スマートフォンやタブレット向けのプラットフォームで 簡単にiPhoneアプリのような、インターフェイスがWebで実現できる技術です。 先日リリースをした、スマホ向け安否確認「Mobile Perfect SP」でも jQueryMobileのフレームワークを活用しています。 http://jquerymobile.com/ 簡単なHTMLを記述するだけで、タッチパネル向けの インターフェイスが作れます！ jQueryMobileのサイトには、分かりやすいドキュメントも サンプル付きであるので、HTMLがかける知識があれば すぐに始めることが出来ます。 http://jquerymobi
jQuery mobileはじめの一歩！「jQuery mobileで簡単なページを作成してみる」のまとめ | jQeryMobileでサイトをつくろう
jQuery Mobileの概要 jQuery Mobileは、jQueryをベースとした、スマートフォン向けのフレームワーク※1です。 スマートフォン向けの直観的かつ使いやすいUIを瞬時に作成できます。 ※1フレームワーク：アプリケーション制作の土台を作ってくれるソフトウェアのこと デザイナー好みの「手軽さ」と「自由さ」を兼ね備え、デベロッパーが求める「リッチなヴィジュアル」のスマートフォンUIが作成できます。 指定した形式でHTMLを書くことで、自動的にスマートフォン向けにデザインされたネイティブアプリケーションさながらのページが瞬時にしてできあがります。（jQuery Mobileが作成できるのは、ウェブアプリケーションです。） 2010年10月にアルファ版がリリースされ、2011年11月ついにjQuery Mobile1.0正式版が公開されました。現在も、jQueryの開発者で
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速 jQuery Mobileと同様に、HTML5のマークアップでモバイルアプリケーション開発を実現するオープンソースのJavaScriptフレームワーク「jqMobi」のβ版が公開されています。 jqMobiのコンセプトは、jQueryとjQuery Mobileの機能のサブセットを、iOSとAndroid向けに最適化したものといえるでしょう。 すでにjQueryやjQuery Mobile、あるいはSencha Touchなど、さまざまなモバイル向けHTML5/JavaScriptフレームワークが登場する中で、jqMobiの特徴はどこにあるのか、ブログで次のように説明しています。 jQuery - still focuses on the desktop.
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
jQuery Mobileのビジュアルデザインが自由に！ Theme Rollerついにリリース
Announcing ThemeRoller for jQuery Mobile! Learn more: http://t.co/LvFkbfwp or try it now: http://t.co/AeDhxKnbFri Oct 28 12:29:55 via Twitter for Macjquerymobile jquerymobile 正直なところ，正式版のリリースまで出る出る詐欺で進行するかと思っていたのですが，jQuery MobileのTheme Rollerがついにリリースされました． ThemeRoller | jQuery Mobile Announcing ThemeRoller for Mobile (beta) | jQuery Mobile 普通にカスタマイズしようと思うと，何かと面倒くさいオリジナルのカラーテーマの作成を，Webインターフェースで簡単に作れ
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プラグインいろいろ: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 スワイプイベン
jQuery Mobileを触りながら覚えよう！ [Japanese Version Only] - jsdo.it - Share JavaScript, HTML5 and CSS
サンプルを用意しました！フォークしてjQuery Mobileを体験してみよう！ スマートフォンサイトをプレビューするには、エディタ画面の「Smart Phone Preview」ボタンをクリックしてください。 こんなことを試してみるとオススメ！ aタグに data-transition 属性を付加するとトランジションのエフェクトを選ぶことができます。 Footer要素を画面下に固定することができます。data-position="fixed" フォーム周りの要素もjQuery Mobileで表示できます！ そもそもjQuery Mobileってなんだっけ？ jQuery Mobileはモバイルサイト構築のためのフレームワークです。 スマートフォンサイトやWebアプリを作成する際に利用します。 非常に手軽に利用でき、少し勉強するだけでそれなりのものが作れてしまうんですよ！ ということで、j
jQuery Mobileを使ったシンプルなHTMLファイルを作成→ダウンロード出来るWebサービス・mobjectify - かちびと.net
なかなか良かったのでご紹介。jQuery Mobileを使ったスマフォ向けのHTML ファイルをオンラインで作成出来る シンプルなWebサービス・mobjectifyで す。直感のみで作成することが出来ま す。ユーザー登録も不要なのはいいですね。 jQuery Mobileのサンプルを自作してダウンロード出来ます。いくつか似たようなサービスがあった気がしますけど・・これはこれで覚えておいて損は無さそうです。 [note]因みに当サイトでもjQuery Mobileのサンプルを配布していますので宜しければどうぞ。[/note] jQueryMobileを使ったHTMLファイルをダウンロード出来るのですが、諸事情でモックアップとして使うしか無さそうですが、ユーザー登録も不要で手軽に使えるので。 以下に使い方を少しご紹介。 Pageを作成 Try Nowをクリックしてスタート。まずはPageをク
jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します - かちびと.net
簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日本語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[jQuery]jQuery-Mobile-DateBoxを日本語化して少しカスタマイズ - MEKEKEMORA
YappoLogs: jQuery Mobile 所感