MVC 4 jqueryスタイルテーマの使い方(ケース)

開発ツール:VS 2012
MVCバージョン:MVC 4
MVC 4はすでにjqueryを持参しており、新しいプロジェクトは、基本的に何も追加せずに実行でき、プロジェクトを走ることができます.(あんなにたくさんのものを統合して、jquery、modernizr、持参したデフォルトの権限、生成したテンプレート、しかし1つの統一したドキュメントあるいは何がすでに統合したものを紹介することに欠けて、どのようにいろいろな使い方の百科)
ステップ1:
[プロジェクト]-[NuGetパッケージの管理]をクリックしてjquery uiを入力し、jquery uiプラグインを最新バージョンに更新します.
ステップ2:
プロジェクトにおける[view]-[Shared]-[_Layout.cshtml]共通インタフェースの統一参照は後で修正するのに便利である.

	 @Scripts.Render("~/bundles/jquery")        @*jquery   *@
         @Scripts.Render("~/bundles/jqueryui")      @*jquery ui   *@
         @Scripts.Render("~/bundles/jqueryZh");     @*jquery     *@
         <link href="~/Content/themes/css/redmond/jquery-ui-1.10.3.custom.css" rel="stylesheet" />  @*jquerui     *@

@Styles.Renderは、参照項目-[App_Start]-[BundleConfig.cs]で定義されている参照パスを次のように使用します.
以下は私が自分で決めた例です.もし欠けているものがあれば、jquery公式にダウンロードしてもいいです.

	public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));


            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));


            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));


            //     
            bundles.Add(new ScriptBundle("~/bundles/jqueryZh").Include(
                        "~/Content/themes/base/i18n/jquery.ui.datepicker-zh-CN.js"));


            bundles.Add(new ScriptBundle("~/bundles/jquerythemes").Include(
                        "~/Content/themes/css/redmond/jquery-ui-1.10.3.custom.css"));


            //    Modernizr               。  ，    
            //      ，    http://modernizr.com                。
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));


            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));


            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery-ui.css",
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }

このような利点は、スタイル、スクリプトを複数パッケージ参照することと同様に、パフォーマンスを向上させることである.(ロード、アクセス)
Bundlingの詳細については、http://go.microsoft.com/fwlink/?LinkId=254725
ステップ3:
インタフェース呼び出しJSの設定方法は簡単です
$(「呼び出すコントロールのIDが必要」).datepicker();のように

<script>
    $(function () {
        $("#dateReceiptTenders_T").datepicker();
    });


</script>

インタフェースコントロール

<div class="editor-label">
            @Html.LabelFor(model => model.dateReceiptTenders_T)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.dateReceiptTenders_T)
            @Html.ValidationMessageFor(model => model.dateReceiptTenders_T)
        </div>

その後、プロジェクトを実行すればよい.
备注:补充第2のいくつかのテーマのスタイルは公式にダウンロードするため、公式は英语の助けの下で、E文はあまりよくなくて、基础のしっかりしていない子供です.
www.jqueryuiと入力します.com
左側に「Widgets」、すなわちコンポーネント、コントロールが表示されます.
次はコントロールです.日付コントロールを使うので、「Datepicker」日付セレクタをクリックします.
次に、view source(ソースコードを表示する)をクリックする最も簡単な方法は、コードをコピーし、新しい文書を作成してコードを入れ、接尾辞名を変更することです.htmlで効果が見られます
公式のタッチと同じ
トピックの使用方法:
タブ「themes」をクリック
左の図库galleryをクリックして自分の好きなスタイルを选んでローカルにダウンロードします
jquery-ui-1.10.3.custom\css\redmond\jquery-ui-1.10.3.custom.cssをプロジェクトにコピーして参照

<link href="~/Content/themes/css/redmond/jquery-ui-1.10.3.custom.css" rel="stylesheet" />  @*jquerui     *@ 

効果が表示されます
その他の使用方法については、ダウンロードしたトピックパッケージのルートディレクトリの下に
index.htmlクリックすると使用方法やヘルプドキュメントが表示されますので、ゆっくり翻訳してください.