なんとなくメモ

2012年7月21日土曜日

モックアップ作りに便利そう

https://moqups.com/

2012年7月13日金曜日

画面全体をマスクするサンプル（作りかけ）

http://www.whims-d.com/archives/223　
を参考にしてみました。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script>

            function mask(){
                    var mask = $('<div id="top-mask"></div>');
                    mask.css({
                            'position':     'absolute',
                            'top':             0,
                            'left':            0,
                            'width':        $(document).width(),
                            'height':        $(document).height(),
                            'color':        '#ffffff',
                            'background':    '#000000',
                            'display':        'none',
                            'opacity':        0,
                            'zIndex':        9999
                    });
                    mask.click(function(e) {
            $('#top-mask').css({zIndex:$.browser.msie?0:null}).fadeOut("fast");
                    });
                    //    同IDのマスクが存在しない場合にマスクDOMを追加
                    if(! $('#top-mask').size()) {
                            $('body').append(mask);
                    }
                    $('#top-mask').css({'opacity':0,'display':'block'}).fadeTo('fast', 0.5);
            }


        </script>
    </head>
    <body>
        <div><input type="button" value="mask" onclick="javascript:mask();"/></div>
    </body>
</html>

2012年6月12日火曜日

HTML5+CSSでMac OS X Lion?

すごい。

http://www.alessioatzeni.com/mac-osx-lion-css3/

2012年5月9日水曜日

WEBアプリ開発基盤「Meteor」

Note.jsベースのMeteorという開発ツールがあるみたい。
興味ありなので、なんとなくメモ。

Titanium Mobile　2.0リリース

javascriptでAndroid,iPhone向けのネイティブアプリが作れるTitanium Mobile　2.0リリースされたみたい。
興味ありなので、なんとなくメモ。

2012年4月30日月曜日

IE系で旧バージョンのブラウザ互換表示してもらうためのおまじない

IE系は、バージョンによって、レンダリングがずいぶんと異なる。

IE8以降ではどのドキュメントモードでレンダリングするか、ドキュメントで任意に指定できるようなので、とりあえずメモ。

ヘッダー部で以下のメタタグを記述する。

以下は、IE9の場合は、IE9で、IE8の場合はIE7モードで動作させる場合の鬼才。

<!--　ここから -->

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">

<!-- ここまで -->

ExtJS4 (その１）　extjsライブラリの読み込み指定方法

ExtJS４を使うことになったので、久々に、なんとくなくメモ。

ExtJS４はここからダウンロード

ダウンロードファイルを展開したディレクトリをext-4.0としたとすると、ext-4.0と同じ階層にHTMLファイルがあるとするとHTMLファイルの記述は以下のようになる。

-----ここから-----
<!DOCTYPE html>

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css"/>
        
         <link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all-gray.css"/>-->
        
        <script src="ext-4.0/bootstrap.js" charset="utf8"></script>
        
        <script src="ext-4.0/locale/ext-lang-ja.js" charset="utf8"></script>
        <script>
            /* IE用にs.gifを読み込み */
            Ext.BLANK_IMAGE_URL="./s.gif";
            Ext.onReady(
                function(){
   //処理内容
}
);
        </script>
       </head>
       <body>
        </body>
</html>
-----ここまで-----

ExtJS3系は使わなかったけど、ExtJS2.xとの違いは、ext-all.jsを直接読み込まないで、bootstrap.jsを読み込んでいるところ。

bootstrap.jsを使用せずに、ext-all.jsを直接読み込んでもOK。
bootstrap.jsを使うと、ローカルで扱うときや、localhostで検証する時は、ext-all-debug.jsで、その他の場合は,ext-all.jsに切り替えてくれる。