サンプル

jQ.Mobiのサンプルです。jQ.Mobiは、モバイルにあわせて作られたjQueryライクなライブラリです。互換性はまだ掴めていません。

jQ.Mobi

jQ.Mobiは、HTML5対応ブラウザ向けに最適化された高速なjsライブラリです。



クリックイベント動作サンプル

オブジェクト取得

コンテンツ取得
Div 1 (class="jqm2")
Div 2 (class="jqm2")
Div 3 (class="jqm2")
Div 4 (class="jqm4")

jqmというclass名のアイテムの数を返します
$("#div").find("li") find動作サンプル

li要素の数を返します

$("#div").html() 動作サンプル

This is some content


Get | Set
$("#div").text() 動作サンプル

テキストその1 テキストその2


Get | Set
$("#div").css() 動作サンプル

サンプルテキスト


背景を取得
緑に変える
$("#div").empty() 動作サンプル

サンプルテキスト


$().empty()で要素を削除
$("#div").hide() 動作サンプル

サンプルテキスト

divを非表示にする
$("#div").show() 動作サンプル


divを表示する
$("#div").toggle() 動作サンプル

サンプルテキスト


divの表示/非表示
$("#div").val() 動作サンプル



Get
Set
$("#div").attr() 動作サンプル

data-test属性として"foo"という名を設定しています


Get
Set
$("#div").removeAttr() 動作サンプル

data-test属性として"foo"という名を設定しています

Get
Remove
$("#div").remove() 動作サンプル

サンプルテキスト

Remove
$("#div").addClass() 動作サンプル

サンプルテキスト


class="class16"を加える
$("#div").removeClass() 動作サンプル

サンプルテキスト

class="class16"を削除
$("#div").hassClass() 動作サンプル

サンプルテキスト

class="class16"があるかチェック
$("#div").bind() 動作サンプル

bindイベント用のダミーリンクです

Bind Event
$("#div").unbind() 動作サンプル

サンプルテキスト

Bind Event
Unbind Event
$("#div").trigger() 動作サンプル

クリックテスト

Triggerイベント
$("#div").append() 動作サンプル

<hr>の後にコンテンツを追加します


追加する
$("#div").prepend() 動作サンプル

<hr>より前にコンテンツを追加します


追加する
$("#div").offset() 動作サンプル

Get
$("#div").get() 動作サンプル

Get
$.jsonP(url:"URL", success:function(){}, timeout:"1000", error:function(){} ) - makes a jsonP call for cross domain scripting

$.jsonPサンプル


jsonP call
$.ajax(url:"URL", success:function(){}, timeout:"1000", error:function(){} ) - makes an Ajax call

$.ajaxサンプル


Ajax Call
$.get(url:"URL", success:function(){}, timeout:"1000", error:function(){} ) - makes an Ajax call

$.getサンプル


Get
$.post(url,data:{foo:"bar"}, success:function(){}, timeout:"1000",error: function(){} ) - makes an Ajax call

$.postサンプル


Post
$.getJSON(url,data,success); サンプル

Returned

GetJson
$.serialize() サンプル

var obj= {foo:"foo",bar:"bar"};

サンプルテキスト


Serialize
$.parseJSON() サンプル

var obj='{"foo":"bar"}'; JSONデータをパースする
$.os - デバイスのブラウザ別の振る舞い一覧

	$.os.webkit  = 
	$.os.android = 
	$.os.ipad = 
	$.os.iphone = 
	$.os.ios = 
	$.os.webos = 
	$.os.touchpad =
$.isArray(param) サンプル / パラメーターが配列の場合

	var notArrayTest="foo";
	var isArrayTest=[];

notArrayテスト
isArrayテスト
$.isFunction(param) サンプル / パラメーターが関数の場合

	var notFunctionTest="foo";
	var isFunctionTest=function(){};

notFunctionテスト
isFunctionテスト
$.useViewport(portrait,landscape) ビューポートの設定 


	$.useViewport(320,480) //phone
	$.useViewport(768,1024) //tablet

jQ.Ui

jQ.Uiはモバイルアプリケーション向けのUXライブラリです。アニメーションやトランジジョンはHTML5/CSS3を使っています。
* ナビゲーション固定
* 自動スクロールパネル
* オプションとしてフッターにアプリセグメントを配置

フィールドエレメント








ラジオボタンとチェックボックス

性別:


好きなものを選択してください:


無効と事前チェック

ラジオボタン:


チェックボックス:


スライダー

性別:

好きなものを選択してください:




jQ.ui

jq.ui トランジジョン ページ推移におけるエフェクトのサンプルです。トランジジョンはdata-transition属性を利用します。
(e.g.)data-transition="slide"



「前に戻る」を可能にします。 
	$.ui.goBack()
Go Back
スタックをクリアする関数です 
	$.ui.clearHistory()
Clear History
div要素を追加する為のコードサンプルです 
	$.ui.addContentDiv(id, content,title
	, pullToRefresh, refreshFunc)
Divを追加
コンテンツのループとアンカーの解析を行います
	$.ui.updateAnchors(div,resetHistory)
現在のページのページタイトルを設定します。 
	$.ui.setTitle('Title Change');
Title変更
「戻るボタン」を設定できます。 
	$.ui.setBackButtonText('戻ります');

	$.ui.backButtonText="バック！" //オーバーライド
ローディングのマスクを表示します 
	$.ui.showMask();
Show
ローディングのマスクを非表示にします 
	$.ui.hideMask();
Show | Hide
コンテンツのロードに使用する関数です 
	$.ui.loadContent()
フリップで「$.ui API」ページをロードする
上に戻るスクロールを実装します 
	$.ui.scrollToTop(div_id)


下に進んでください



下に進んでください



下に進んでください



下に進んでください



下に進んでください



下に進んでください



あとちょっと



あとちょっと



あとちょっと



間もなくです



いよいよです



上に戻る！！！！

スライド推移
スライドアップ推移
スライドダウン推移
ポップ推移
フリップ推移
フェード推移
モーダルウィンドウ

jQ.plugins

これは、モバイルアプリ開発をサポートするためのプラグインライブラリです。



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta, lorem sit amet feugiat lacinia, mi dui sodales eros, id lacinia mauris urna eu est. Proin pulvinar, augue sed convallis elementum, magna diam pharetra magna, id vestibulum est eros vitae ante. Ut auctor erat a tellus venenatis eu fermentum lorem scelerisque. Cras dignissim leo ornare massa sollicitudin sit amet pulvinar turpis hendrerit. Morbi hendrerit nunc eget turpis luctus id ultricies lorem consequat. Donec eu lacus sed mauris sollicitudin laoreet. Cras vitae sodales diam. Donec mollis, libero ut pellentesque dignissim, risus orci ornare nisi, sed eleifend enim purus malesuada neque. Nulla tellus sem, scelerisque sed sagittis id, eleifend venenatis ligula. Vivamus placerat neque sit amet metus ultricies facilisis. Nulla a odio magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed commodo quam eu enim lacinia vitae ultrices nulla mollis. Aenean eget lectus turpis, at ultrices leo. Nulla vehicula magna in risus ornare vestibulum. Integer gravida magna quam. Donec augue ante, fringilla non congue eu, aliquam lacinia nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas nisl ante, suscipit ut suscipit nec, dictum sit amet orci. Maecenas fermentum sapien turpis, sit amet eleifend justo. Aenean auctor interdum sem sed tincidunt. Aliquam ullamcorper malesuada fermentum. Nunc consectetur, ipsum et pulvinar ultrices, lorem nibh egestas sapien, at egestas lorem metus sit amet lacus. Maecenas non feugiat orci. Curabitur imperdiet tempus lacus, volutpat fermentum diam convallis a. In hac habitasse platea dictumst. Pellentesque nec ipsum diam, at consectetur elit. Duis feugiat ullamcorper libero tincidunt aliquet. Sed leo nisl, iaculis non pellentesque nec, scelerisque vel felis
スワイプ
アンドロイドのWebkitにおけるCSS3 Transform3Dのバグを修正








フィルターコンテンツ

フィルターコンテンツ

フィルターコンテンツ

アンドロイドのWebkitにおけるCSS3 Transform3Dのバグを修正するためにカスタムコントロールを使用してパスワードボックスに置き換えます。また、パスワードを表示/非表示にもできます。


1回動かす | 2回動かす | キューを使う


通知バーのようなプルダウン

コンテンツ

コンテンツ

コンテンツ

コンテンツ

プルダウン
プルアップ


プルアップの状態です！