jquery.mobile.forpc-0.1.2.js is Published - Firefox4でのbackground-imageのズレを修正しました。

以前公開した、jQuery Mobileで作成したページをPC向けに表示するためのライブラリ
『 jQuery Mobile for PC 』をFirefox4に対応版を公開しました。

jQuery Mobileで作成したページをPC向けに表示するためのライブラリ『 jQuery Mobile for PC 』を公開しました | 諸葛亮孔明もびっくりですわのブログ

jquery.mobile.forpcの紹介エントリです。

修正内容

背景画像の横幅がFirefox4では画像の横幅に依存する状態になっていましたが
これをDocumentの幅に合わせるよう修正しました。

jquery.mobile.forpの使い方

上記のエントリに詳しいです。
ご興味ありましたらご一読いただけますと幸いです。

ソースコード

下記の内容でGitHubに公開しています。

amazedkoumei / jquery.mobile.forpc | GitHUB

ライセンスはMITライセンスとしていますので、私のコピーライト表示を含んだヘッダを維持したままであれば再配布も変更も自由にしていただいてかまいません。

jquery.mobile.forpc-0.1.2.js

/*!
 * jquery.mobile.forpc JavaScript Library v0.1.1
 *
 * Copyright (c) 2011 amazedkoumei (Twitter: @amazedkoumei, Blog:http://blog.amazedkoumei.com)
 * Licensed under the MIT license + "keep this comment block even if you modify it".
 *
 * History:
 *  04-11-2011 Published as jquery.mobile.forpc-0.1.0.js
 *  04-12-2011 bug fixed: stylesheet is not applied for external html as jquery.mobile.forpc-0.1.1.js
 *  24-05-2011 Published: matching document width to background-image width on Firefox4 as jquery.mobile.forpc-0.1.2.js
 */
var iPhoneImage = {
 // set your iPhone image path
 PATH : "/core/css/images/background-iphone.png",
 // set Integer, how many px far from left side you would like to show iPhone image
 // null means centering
 POSITION_LEFT : null,
 
 WIDTH : 396,
 HEIGHT : 744,
 INNER_WIDTH : 320,
 INNER_HEIGHT : 460,
 MAGIN_LEFT : 37,
 MAGIN_TOP : 145,
 isLoading : true
}; // end iPhoneImage

$(function(){
 if( navigator.userAgent.indexOf('Linux; U; Android ') == -1 &&
  navigator.userAgent.indexOf('iPhone; U') == -1 &&
  navigator.userAgent.indexOf('iPad; U') == -1){
  
  $('div[data-role="page"]').live('pagebeforeshow',function(event, ui){
   if(!jQuery.support.checkOn){
    // for web-kit page transition
    $('.background-iphone').show();
   }
  });
  $('div[data-role="page"]').live('pageshow',function(event, ui){
   $('.background-iphone').hide();
   $('.' + $.mobile.activePageClass).closest('.background-iphone').show();
  });
  $('div[data-role="page"]').live('pagecreate',function(event){
   var resizeRate =  iPhoneImage.HEIGHT / $(window).height();
   if(iPhoneImage.POSITION_LEFT == null) {
    iPhoneImage.POSITION_LEFT = ($(window).width() - iPhoneImage.INNER_WIDTH)/2;
   }
   $(this).css("overflow-y", "auto");
   $(this).css("overflow-x", "hidden");
   $(this).css("height", iPhoneImage.INNER_HEIGHT + "px");
   $(this).css("width", iPhoneImage.INNER_WIDTH + "px");
   $(this).css("margin-top", iPhoneImage.MAGIN_TOP + "px");
   $(this).css("margin-left", iPhoneImage.POSITION_LEFT + iPhoneImage.MAGIN_LEFT + "px");
   $(this).wrap('');
   $(this).closest('.background-iphone').prepend('');
   $(this).closest('.background-iphone').css("padding-left", iPhoneImage.POSITION_LEFT + "px");
   $(this).closest('.background-iphone').css("height", $(document).height() + "px");
   $(this).closest('.background-iphone').css("background-size", "100% 100%");
   $(this).closest('.background-iphone').css("font-size", resizeRate*100 + "%");
   $(this).closest('.background-iphone').css("position", "relative");
   $(this).closest('.background-iphone-img').css("height", resizeRate*100 + "%");
  });
  $('div[data-role="page"]').live('pagebeforecreate',function(event){
   $(this).find('div[data-position="fixed"]').each(function(index, div) {
    $(div).attr("data-position", "inline");
   });
  });
 }
}); // end onload

最後に

iPhone向け英単語学習サイト『eWords』でもjquery.mobile.forpcを使用しています。
単語ページで左右にスワイプすることで単語を切り替えられます。

eWords

すきま時間の有効活用！英語マスタへの道は単語から！

2011/05/24

jquery.mobile.forpc-0.1.2.js is Published - Firefox4でのbackground-imageのズレを修正しました。

修正内容

jquery.mobile.forpの使い方

ソースコード

最後に

Comments