iPhone UI 使ってみた - とあるプログラマの備忘録

ダウンロードは以下のサイト
http://code.google.com/p/jquery-iphone-ui/downloads/list

使い方は人それぞれだと思うので後で適当に書きますけど、
簡単なのはaptcheのパスが通っている箇所に、解凍してできた「iphone」
ってフォルダを移動させてindex.htmlを開けばそれなりに動いてくれます。

そのindex.htmlを見ると、これヘッダー部がぱねーっす。
こんなんベタで複製してたらやる気が80％ダウンな気がする。
ので、ちょっとSmartyでincludeしてみた。

    <link rel="stylesheet" href="{$smarty.const.BASE_URI}/iphone/css/style.css" type='text/css' media='all' />
    <link rel="stylesheet" href="{$smarty.const.BASE_URI}/iphone/css/iphone.css" type='text/css' media='all' />
    <link rel="stylesheet" href="{$smarty.const.BASE_URI}/iphone/css/iphone-480.css" type='text/css' media='only screen and (max-device-width: 480px)' />
    <script type="text/javascript" src="{$smarty.const.BASE_URI}/iphone/js/jquery.js"></script>
    <script type="text/javascript" src="{$smarty.const.BASE_URI}/iphone/js/jquery-ui.js"></script>
    <script type="text/javascript" src="{$smarty.const.BASE_URI}/iphone/js/jquery.iphone.js"></script>
    <script type="text/javascript" src="{$smarty.const.BASE_URI}/iphone/js/other/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="{$smarty.const.BASE_URI}/iphone/js/other/jquery.disable.text.select.js"></script>
    <script type="text/javascript" src="{$smarty.const.BASE_URI}/iphone/js/other/jquery.backgroundPosition.js"></script>	
    <script type="text/javascript" src="{$smarty.const.BASE_URI}/iphone/js/other/jquery.dPassword.js"></script>
    <script type="text/javascript" src="{$smarty.const.BASE_URI}/iphone/js/ui/ui.iMenu.js"></script>
    <script type="text/javascript" src="{$smarty.const.BASE_URI}/iphone/js/ui/ui.iMenuManager.js"></script>
    <script type="text/javascript" src="{$smarty.const.BASE_URI}/iphone/js/ui/ui.iTabs.js"></script>
    <script type="text/javascript" src="{$smarty.const.BASE_URI}/iphone/js/ui/ui.iInput.js"></script>
    <script type="text/javascript" src="{$smarty.const.BASE_URI}/iphone/js/ui/ui.iPassword.js"></script>
    <script type="text/javascript" src="{$smarty.const.BASE_URI}/iphone/js/ui/ui.iCheckBox.js"></script>
    <script type="text/javascript" src="{$smarty.const.BASE_URI}/iphone/js/ui/ui.iRadioButton.js"></script>
    <script type="text/javascript" src="{$smarty.const.BASE_URI}/iphone/js/ui/ui.iSelect.js"></script>
    <script type="text/javascript" src="{$smarty.const.BASE_URI}/iphone/js/ui/ui.iGallery.js"></script>
    <script type="text/javascript" src="{$smarty.const.BASE_URI}/iphone/js/ui/ui.iScroll.js"></script>
    {literal}
    <script type="text/javascript">
    $(document).ready(function(){
        $('.display').iMenuManager({
            link   : 'a[href!=#]:not(.external):not(.bigbutton)', // selector for bind goTo event
            content: '.display',    // what content load from target URL - default is body
            title  : '.titlebar',  // where widget can found title - default is title
            back   : '.titlebar'
            });
    });
    </script>
    {/literal}
    </head>
    <body>
    <div class="iphone vertical">
        <div class="phone">
        <div class="display">
            <div class="screen">

iphone_footer.tpl

            </div>
        </div>
        </div>
        <a href="http://iphone.hohli.com" class="bigbutton">Exit</a>
    </div>
{literal}
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7269638-10");
pageTracker._trackPageview();
} catch(err) {}</script>
{/literal}

これで適当にindex.tpl作ってphpと動かせるならサイトを作るときに結構面白いかもしれないっすねー。
つかこうゆうの作ってる人には素直に尊敬するなー。
index.tpl

{**
 * login
 *}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" dir="ltr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        
        
    <!--iphone_headerをinclude-->
    {include file="iphone_header.tpl"}
    
        <div class="titlebar">
            とあるプログラマの備忘録♪
        </div>
        <div class="scroll iscroll">
            <ul class="imenu">
                <li>
                     Test Menu
                </li>
            </ul>
            <ul class="imenu">
                <li>
                     Test Menu
                </li>
            </ul>
            <ul class="imenu">
                <li>
                     Test Menu
                </li>
            </ul>
        </div>

    <!--iphone_headerをinclude-->
    {include file="iphone_footer.tpl"}

これを使えばPCで見たときもiPhone,もちろんiPhoneで見たときには枠が消えるということ・・
まだバグとか残ってるらしいのですが、でもフルで使ったら面白そうですねー