MVC4 jquery Style Theme usage (case)

MVC4 has come with jquery, the new project, basically nothing to add to run, run the project. (Integration of so many things, JQUERY,MODERNIZR, comes with default permissions, generated templates, but lack of a unified document or anything to introduce what has been integrated, how to use a variety of encyclopedia)

   First step:  [project]-[Manage NuGet packages] Click Update Input jquery UI and then update the jquery UI plugin to the latest version    the second step:  in the project [view]-[ Shared]-[_layout.cshtml] Common Interface Unified Reference makes it easy to modify the .  @Scripts later. Render ("~/bundles/jquery")        @* jquery references *@          @Scripts. Render ("~/bundles/jqueryui")      @*jquery UI Reference *@& nbsp         @Scripts. Render ("~/bundles/jqueryzh");     @*jquery Chinese conversion class *@         <link href= "~/content/themes/css/redmond/ Jquery-ui-1.10.3.custom.css "rel=" stylesheet "/>  @*jquerui style theme *@ @Styles. Render usage is reference project-[app_start]-[ The referenced paths defined in BundleConfig.cs] are as follows    the following is my own set of examples: if the missing can go to the official jquery to download  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* ") &nbsp ;            //Chinese language             bundles. ADD (New Scriptbundle ("~/bundles/jqueryzh"). Include (                        "~/CONTENT/THEMES/BASE/I18N/JQ Uery.ui.datepicker-zh-cn.js "));              bundles. ADD (New Scriptbundle ("~/buNdles/jquerythemes "). Include (                        "~/content/themes/css/redmond/ Jquery-ui-1.10.3.custom.css "));             //Use the development version of MODERNIZR to develop and understand the information. Then, when you're ready for            //production preparation, use the build tool on http://modernizr.com to select only the tests you want.             bundles. ADD (New Scriptbundle ("~/bundles/modernizr"). Include (                        "~/scripts/modernizr-*"); &nbs p;             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 ",                &NBSp       "~/content/themes/base/jquery.ui.core.css",                and nbsp       ' ~/content/themes/base/jquery.ui.resizable.css ',              & nbsp         "~/content/themes/base/jquery.ui.selectable.css",            & nbsp           "~/content/themes/base/jquery.ui.accordion.css",          & nbsp             "~/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.slid Er.css ",                        "~/content/themes/base/jquery.ui.tabs.css",  & nbsp                     "~/content/themes/base/jquery.ui.datepicker.css", & nbsp                       "~/content/themes/base/jquery.ui.progressbar . css ",                       " ~/content/themes/base/jquery.ui . Theme.css ");       } The advantage of doing this is that it can be similar to multiple packaged references with styles, scripts that can improve performance in this way. (load, Access)   For more information about bundling, please visit http://go.microsoft.com/fwlink/? linkid=254725   The third step:  interface Call JS Setting method is very simple  $ ("The ID of the control that needs to be called"). DatePicker ();  <script>     $ (function () {        $ ("#dateReceiptTenders_T"). DatePicker ();   });   </script> interface Controls  <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> then run the project .   notes: Supplement because the second some theme style to go to official download, the official is English with the help of the E-text is not very good, and the foundation of a non-solid child .  Input www.jqueryui.com  See "Widgets" on the left as part, control   then here is the control, we're going to use a date control so point "Datepicker" date selector    then here's the Case, click View Source (view sources)   The easiest way is to copy the code, and then create a new text document to put the code in, the suffix named. html can see the effect   and the official touch of the same     Theme Usage:  Click on the tab "Themes"    click on the Left Gallery Gallery Choose your favorite style and download to local   will jquery-ui-1.10.3.custom\css\redmond\ JQUERY-UI-1.10.3.CUSTOM.CSS copied to the project and referenced  <link href= "~/content/themes/css/redmond/ Jquery-ui-1.10.3.custom.css "rel=" stylesheet "/>  @*jquerui style theme *@ to see effects     other usage instructions, Download the theme package under the root directory there are &NBSp;index.html Click to see the usage and help documents used, and then slowly translate