7.4. 応用（ リンク機能のある画面アイテムを作成する ）¶
ここでは、リンク機能のある画面アイテムの実装方法について説明します。リンク機能では、メインページ（コンテンツエリア）に配置された画面アイテムから別画面を表示します。
注意
jQuery Mobileの内部ページ遷移を利用して、別画面を表示します。
そのため、別画面はメインページと同一のHTML上の要素として生成されます。
7.4.1. リンク元の画面を実装する¶
遷移元の画面では、遷移先の内部ページのid属性へのリンクを作成します。遷移方法は、data-transition=’slidefade’で指定します。
sp_view (html/js)¶
<div style="width: 100%; text-align: center;"> <a href='#<imart type="string" value=$properties.item_id />_page' data-transition='slidefade'> <img src='<imart type="string" value=$properties.image_src_temp border="0" escapeJs="false" />' style="max-width: 60%; max-height: 15em;" /> </a> </div>
7.4.2. リンク先の画面を実装する¶
遷移先の画面はsp_view_ex (html/js)という専用のjsspにて実装します。遷移先の画面は、data-role=”page”属性を指定します。id指定は必須です。
注意
遷移先の画面に関しては、製品としては以下のUIデザインを推奨しています。
- ヘッダー部分のUIを用意し、ヘッダーの左ボタンはメインページに戻るボタンにします。
- 親画面と同一のテーマを適用するために、page要素にdata-theme=”%DATA-THEME%”を設定します。
sp_view_ex.js¶
遷移先画面を出力するスクリプト開発モデルのファンクション・コンテナ ファイルです。
- プレゼンテーション・ページにバインドするための前処理を実装します。
- 画面表示リクエストの情報が引数として取得できます。
var $properties; function init(args){ var component = args.setting; var data = args.data; $properties = { item_id : component.item_id, image_src_temp : createSrc(data.imfr_application_id, component.item_properties.image_src) }; }
注意
1度の画面表示リクエストに対して、配置されている画面アイテムのインスタンス分、この処理が実行されます。
そのため、処理時間が長い場合、画面表示レスポンスを劣化させる可能性があります。
sp_view_ex.html¶
遷移先画面を出力するスクリプト開発モデルのプレゼンテーション・ページ ファイルです。
- モバイルフレームワークで提供されているUIコンポーネントを利用して画面UIを実装します。
<div data-role="page" id='<imart type="string" value=$properties.item_id escapeJs="false" />_page' data-theme="%DATA-THEME%"> <div data-role="header" data-position="fixed" data-tap-toggle="false"> <a href="#bis_page" class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-delete ui-mini" data-rel="back">閉じる</a> </div> <div role="main" class="ui-content"> <div style="width: 100%; overflow-x: auto; overflow-y: hidden; margin-bottom: 0.5em;"> <img src='<imart type="string" value=$properties.image_src_temp border="0" escapeJs="false" />' /> </div> </div> </div>
注意
画面アイテムのインスタンス分、このHTMLが出力されるため、重複して出力する必要のない要素は記述しないでください。
特にイベント処理は、クライアントサイド・ファイル sp_%アイテムタイプ%.jsに記述してください。
7.4.3. リンク機能を有効にする¶
type.jsの関数を実装し、リンク機能が利用できるようにシステムに登録します。
type.js¶
type.jsのinit関数の戻り値にて、spSwitchPageプロパティがtrueとなるように返却することで、リンク機能を有効にします。function init(){ return { id : 'product_72_image', icon : 'forma-icon-image-sunset', title : 'MSG.I.FORMA.ITEM.IMAGE.TITLE', preload : false, defaultStyle : { height : '120px', width : '120px' }, hasImage : true, mobileFriendly : true, // リンク機能対応 spSwitchPage : true }; }