iPhone用サイト作成ライブラリ「iui.js」を便利に拡張する
iPhone用に提供している便利リンク集サイト
では、サイトの作成に「iui.js」を利用しています。
HTMLをあるルールに従って記述することで、iPhoneに適した画面を構成してくれる便利ライブラリですが、どうしても実装したい機能が1つありました。
画面の最下部に常に配置されるフッターを実装する方法がありませんでしたので、苦心して実装してみました。
//idがfooterのdivを設置する。 <div id="footer" style="display:none;"> <div> 掲載・修正依頼は<a href="mailto:info@labolo.net">こちら</a>にメールをお願いします。<br/> iPhone!JAPAN - <a href="http://d.hatena.ne.jp/yositosi/">運営ブログ</a> </div> </div>
function updatePage(page, fromPage) { if (!page.id) page.id = "__" + (++newPageCount) + "__"; //updatePageのfunction内に次の2行を追加 $("footer").style.top = (page.clientHeight + 45) + "px"; $("footer").style.display = ""; function slidePages(fromPage, toPage, backwards) //slidePagesのfunction内に次の1行を追加 $("footer").style.display = "none";
上記に加えてiui.cssにも手を加えています。cssハックだらけのひどいcssで、手を加えるのに苦労しました。
これらの結果、上のサイトではフッターの部分に常にgoogleアドセンスを張ることが出来ています。
興味を持っていただけた方は、該当のサイトからソースを持ってきて利用してみてください。cssについては利用方法に応じて修正が必要だと思います。