Question

如果网站上的某个地方存在这个问题的答案，我很抱歉 - 我找不到有助于我解决问题的内容。

我很想弄清楚我在ASP.Net Web Forms 4.5项目中对jQuery和jQuery主题的正确实现有什么误解。我用NuGet下载了JQuery，JQuery.UI.Combined和JQuery Flick主题。然后我尝试实现一个日期选择器，并且没有应用轻弹主题。

NuGet下载将jQuery css基本主题放入Content \ themes \ base，将Flick主题放入Content \ themes \ flick。

我进入了Bundle.config并为轻弹主题添加了一个styleBundle标签，所以它看起来像这样：

<?xml version="1.0" encoding="utf-8" ?>
<bundles version="1.0">
  <styleBundle path="~/Content/css">
    <include path="~/Content/Site.css" />
  </styleBundle>
  <styleBundle path="~/Content/themes/base/css">
    <include path="~/Content/themes/base/jquery.ui.core.css" />
    <include path="~/Content/themes/base/jquery.ui.resizable.css" />
    <include path="~/Content/themes/base/jquery.ui.selectable.css" />
    <include path="~/Content/themes/base/jquery.ui.accordion.css" />
    <include path="~/Content/themes/base/jquery.ui.autocomplete.css" />
    <include path="~/Content/themes/base/jquery.ui.button.css" />
    <include path="~/Content/themes/base/jquery.ui.dialog.css" />
    <include path="~/Content/themes/base/jquery.ui.slider.css" />
    <include path="~/Content/themes/base/jquery.ui.tabs.css" />
    <include path="~/Content/themes/base/jquery.ui.datepicker.css" />
    <include path="~/Content/themes/base/jquery.ui.progressbar.css" />
    <include path="~/Content/themes/base/jquery.ui.theme.css" />    
  </styleBundle>
  <styleBundle path="~/Content/themes/flick/css">
    <include path="~/Content/themes/flick/jquery.ui.flick.css" />
  </styleBundle>
</bundles>

我进入Site.Master页面并将其添加到Placeholder标记中：＆lt;％：Styles.Render（“〜/ Content / themes / base / css”，“〜/ Content / themes / flick / css”，“〜/ Content / css”）％＆gt;

在测试页面上，我添加了这样的控件：

    <input type="text" id="txtFromDate" style="width: 5em;" />

并且在脚本标记中我有这个代码在页面加载时运行：

    $(function () { $("#txtFromDate").datepicker(); });

测试应用程序显示datepicker正在运行，但根本没有样式。它出现在页面上，单词“Previous”和“Next”，后跟月份名称和日期;但是，所有文本都显示在页面上的所有其他内容之后，根本没有颜色。

那么，我怎么不理解捆绑应该如何实现呢？

C＃BundleConfig代码：

    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
              "~/Scripts/WebForms/WebForms.js",
              "~/Scripts/WebForms/WebUIValidation.js",
              "~/Scripts/WebForms/MenuStandards.js",
              "~/Scripts/WebForms/Focus.js",
              "~/Scripts/WebForms/GridView.js",
              "~/Scripts/WebForms/DetailsView.js",
              "~/Scripts/WebForms/TreeView.js",
              "~/Scripts/WebForms/WebParts.js"));

        bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
            "~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
            "~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
            "~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
            "~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));

        // Use the Development version of Modernizr to develop with and learn from. Then, when you’re
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
            "~/Scripts/modernizr-*"));
}

找到解决方案 - 在C＃RegisterBundles（）函数中添加以下内容：

            bundles.Add(new Bundle("~/mycss").Include(
            "~/content/site.css",
            "~/content/themes/base/accordion.css", 
            "~/content/themes/base/all.css", 
            "~/content/themes/base/autocomplete.css", 
            "~/content/themes/base/base.css", 
            "~/content/themes/base/button.css", 
            "~/content/themes/base/core.css", 
            "~/content/themes/base/datepicker.css", 
            "~/content/themes/base/dialog.css", 
            "~/content/themes/base/draggable.css", 
            "~/content/themes/base/menu.css", 
            "~/content/themes/base/progressbar.css", 
            "~/content/themes/base/resizable.css", 
            "~/content/themes/base/selectmenu.css", 
            "~/content/themes/base/slider.css", 
            "~/content/themes/base/sortable.css", 
            "~/content/themes/base/spinner.css", 
            "~/content/themes/base/tabs.css", 
            "~/content/themes/base/theme.css", 
            "~/content/themes/base/tooltip.css"));

然后将其添加到Site.Master页面：

<%: Styles.Render("~/mycss") %>

捆绑JQuery主题似乎不起作用

0 个答案: