JP::HSJ::Junknews::HatenaSide

東京地下鉄の路線図を利用したTitanium Mobile ScrollViewのサンプル

Titanium

Publickeyさんのこの記事をみて、ポンと膝を打ったので早速ネタをぱくらせていただきます。

http://www.publickey1.jp/blog/11/html5ipodiphone.html

表示する対象はCCで公開されている東京の路線図です。

http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Tokyo_metro_map.png

実行したところはこんな感じ。

var win1 = Titanium.UI.createWindow({
    fullscreen: true
});
var scrollview = Titanium.UI.createScrollView({
    contentWidth:'auto',
    contentHeight:'auto',
    top:0,
    bottom:40,
    showVerticalScrollIndicator:true,
    showHorizontalScrollIndicator:true
});
var toolbar = Titanium.UI.createToolbar({
    bottom:0,
    height:40,
    items:[
	Titanium.UI.createButton({
	    systemButton:Titanium.UI.iPhone.SystemButton.FIXED_SPACE,
	    width: '40'
	}),
	Titanium.UI.createButton({
            systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
	}),
	(function(){
	    var button = Titanium.UI.createButton({
		systemButton:Titanium.UI.iPhone.SystemButton.REFRESH
	    });
	    button.addEventListener('click',function(e){
		scrollview.scrollTo(1600,1200);		
	    });
	    return button;
	})(),
	Titanium.UI.createButton({
            systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
	}),
	(function(){
	    var button = Titanium.UI.createButton({
		systemButton:Titanium.UI.iPhone.SystemButton.INFO_LIGHT
	    });
	    button.addEventListener('click',function(e){
		Titanium.Platform.openURL('http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Tokyo_metro_map.png');
	    });
	    return button;
	})()	
    ]
});
scrollview.add(Titanium.UI.createImageView({
    // http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Tokyo_metro_map.png
    image: 'Tokyo_metro_map.png',
    width:4000,
    height:3000
}));
scrollview.scrollTo(1600,1200);
win1.add(scrollview);
win1.add(toolbar);
win1.open();

Permalink | コメント(0) | トラックバック(0)