Question

我在这里使用基本主题的标准开箱即用MVC4应用程序。

我也有一个Themeroller拉链。

如何将自定义jqueryui主题应用于我的应用以代替股票主题？一步一步的说明以及解释为什么每个步骤的完成都将受到高度赞赏，并为我提升MVC4的主题雾。

（我知道问题11892182，我完全没有遇到成功。现在已经有一年了，我希望jQueryUI和MVC4之间的事情变得更好）

戴夫

Answer 1

Jquery UI默认嵌入在您的新asp.net mvc4互联网模板项目中。为了使用默认主题。

打开_Layout.cshtml文件。（Views =＆gt; Shared =＆gt; Layout.cshtml）
在标题部分中，替换该行 @Styles.Render("~/Content/css") 有了这个 @Styles.Render("~/Content/themes/base/css")
在@Scripts.Render("~/bundles/jqueryui")

@Scripts.Render("~/bundles/jquery")

现在开始使用您的jqueryUI小部件和主题，它们将正确显示。

要使用自定义下载主题，您需要修改BundleConfig.cs文件（App_Start =＆gt; BundleConfig.cs）

如果您拥有包含单独文件的jqueryUI的完整源代码。只需用您的自定义主题文件替换基本文件夹（Content =＆gt; theme =＆gt; base）中的当前基本主题文件。

如果你有一个javascript和css的单个文件。修改BundleConfig.cs代码。取代

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/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"));

以便include部分保存自定义css文件的路径，例如

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery-ui-1.10.3.custom.css");

Answer 2

sherwaniusman，我尝试了你的建议，我只是完全打破了我自己的CSS。我必须遗漏一些东西。我以为我理解发生了什么，但显然不是。

让我们尝试不同的东西。这就是我做的。你能告诉我哪里出错了吗？

从http://jqueryui.com/themeroller/
打开zip并将js文件夹中的三个文件复制到我的MVC4应用程序的Scripts文件夹中。这三个文件是：jquery-1.9.1.js，jquery-ui-1.10.3.custom.js和jquery-ui-1.10.3.custom.min.js
将zip中的'le-frog'文件夹复制到我应用的Content / themes文件夹中，以创建Content / themes / le-frog文件夹。 le-frog文件夹包含两个文件和一个图像子文件夹。这两个文件是jquery-ui-1.10.3.custom.css和jquery-ui-1.10.3.custom.min.css
编辑_Layout.cshtml，将其作为
中唯一的Styles.Render
@ Styles.Render（ “〜内容/主题/ LE-青蛙/ CSS”）

这是

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

编辑BundleConfig.cs，将每个符号指向正确的目的地：

bundles.Add（new ScriptBundle（“〜/ bundles / jquery”）。包括（ “〜/脚本/ jQuery的1.9.1.js”））;

bundles.Add（new ScriptBundle（“〜/ bundles / jqueryui”）。包含（
“〜/脚本/ jquery的-UI-1.10.3.custom.js”））;

bundles.Add（new StyleBundle（“〜/ Content / themes / le-frog / css”）。Include（“〜/ Content / themes / le-frog / jquery-ui-1.10.3.custom.css” ））;

在我看来这应该可行，但我得到一个没有CSS样式的页面。

请......我在这里缺少什么？

戴夫

Answer 3

同样使用le-frog，目前还不清楚哪个文件在哪里。 “内容”下没有“css”文件夹，看起来版本之间的文件夹结构已经改变。

令人沮丧 - 添加一个主题应该比实施拖拽更难（也不需要花费更多时间）在WinForm下。

如何使用jQueryUI主题的MVC4 Web应用程序中的“基本”主题

3 个答案: