Subscribed unsubscribe Subscribe Subscribe

Kengo's blog

Technical articles about original projects, JVM, Static Analysis and JavaScript.

I've remade my personal site by jQuery mobile (updated)


My site, hosted by GitHub Pages, is remade by jQuery mobile. It's my 1st case to use this framework, but it's easy for me to learn because it's similar to jQTouch. So I've finished it in only 3 hours.
GitHub Pagesで運営している個人用のサイトをjQuery mobileで書き換えました。jQuery mobileを使うのは初めてだったのですが、jQTouchに似ていたので学習は容易でした。所要時間約3時間。

why I wrote it in English

I wrote it in English because the greater part of the engineers around me speaks it, not Japanese. I'll shift this blog to English or same reason. Adapting to the environment is important to use the web as a communication tool.

points to use jQuery mobile

put navbar in header

I put navbar in footer at first, but it cause bad UX because jumping to the top of the page occurred when buttons are clicked. So I put it in header at last.
Navbar in header looks inconvenience to click at finished to read page, but it's no problem because the iPhone has a feature to scroll fast to top I think.

highlighting the button for current page

Highlighting the button for current page is good UI because it enables user knows 'where am I', I think. But jQuery mobile doesn't handle navigation button's state, so we should handle it by own. I used 'ui-btn-active' class to highlight buttons.
今いるページがどこなのかを明示するために、今いるページのボタンをハイライト表示するのが有効だと考えています。jQuery mobileにはこうした機能がまだなさそうなので、自分でコードを書いてこれを実現しました。'ui-btn-active'クラスでボタンをハイライト表示できます。

$(document).bind('pagebeforechange', function (e, data) {
			.filter('[href="#' + data.toPage[0].id + '"]').addClass('ui-btn-active');