かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

NuGetでjQuery UIを入れる時の注意点

前回の記事jQuery UIを入れてウハウハしてました。ただ、コメントで指摘があるようにjQueryのバージョンが最新ではなかったようです。jQueryの公式サイトで確認すると現時点での最新バージョンは1.7.1です。前回の記事では1.4.4を使ってたので古いのもいいところといった感じでした。
別途NuGetからjQueryをインストールすることでjQuery 1.7.1が入ってきました。めでたしめでたし。

ということで、NuGetを使ってjQuery UIを入れるときには、きちんとjQueryのほうもインストールしましょうということでした!メモメモ。

因みに昨日のコードは、jQuery1.7.1に更新しても動きました!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
    <link href="Content/themes/base/minified/jquery.ui.all.min.css" rel="stylesheet"
        type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("#tabhost").tabs();
            // idがnaviのタグの下にあるh4のクリックイベントで
            $("#navi > h4").click(function () {
                // h4タグの次の要素を展開/折畳みをする
                $(this).next().slideToggle("slow");
            });
        });
    </script>
    <title></title>
</head>
<body>
    <div id="tabhost">
        <!-- タブのタグ?の部分 -->
        <ul>
            <li><a href="#tab1">タブ1</a></li>
            <li><a href="#tab2">タブ2</a></li>
            <li><a href="#tab3">タブ3</a></li>
        </ul>
        <div id="tab1">
            <div id="navi">
                <h4>
                    学ぶ</h4>
                <ul>
                    <li>初級</li>
                    <li>中級</li>
                    <li>上級</li>
                </ul>
                <h4>
                    学ばない!</h4>
                <ul>
                    <li>ほげほげ</li>
                    <li>ふー</li>
                    <li>ヴぁー</li>
                </ul>
            </div>
        </div>
        <div id="tab2">
            <p>
                タブ2のコンテンツをここに書く</p>
        </div>
        <div id="tab3">
            <p>
                タブ3のコンテンツをここに書く</p>
        </div>
    </div>
</body>
</html>

それにしても、Visual StudioのHTMLのエディタのコードフォーマットは、もうすこし賢くなってくれてもいいような気がする今日この頃でした。