2013-09-27 116 views
2

我正在嘗試將主題應用於jqGrid。我搜索了信息,但是我找不到一個可以逐步解釋的網站。那麼有人可以告訴我如何做到這一點? 我的項目是在asp.net mvc4,jquery和jqGrid中開發的。將主題應用於jqGrid

第一次嘗試:

我已經下載了微軟的主題,我已經把它放在我mvc4 asp.net項目下的\ Content文件夾。雷德蒙文件夾中包含一個文件夾,圖片和根,三個css文件象下面這樣:

\Content 
    \redmond 
     \images 
     jquery-ui.css 
     jquery-ui.min.css 
     jquery.ui.theme.css 

所以爲了我的母版頁使用的主題,在頭標記我做的:

<head> 

    ... 

     <link href="@Url.Content("~/Content/redmond/jquery-ui.css")" rel="stylesheet" type="text/css" media="all" /> 

     <link href="@Url.Content("~/Content/redmond/jquery-ui.min.css")" rel="stylesheet" type="text/css" media="all" /> 

     <link href="@Url.Content("~/Content/redmond/jquery.ui.theme.css")" rel="stylesheet" type="text/css" media="all" /> 

    ... 
</head> 

和在母版頁的正文以及我做的:

(...) 

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


     @Content.Script("jquery-1.10.2.min.js", Url) 
     @Content.Script("jquery-ui-1.10.3.min.js", Url) 
     @Content.Script("jquery.unobtrusive-ajax.min.js", Url) 
     @Content.Script("jquery.dd.js", Url) 
     @Content.Script("grid.locale-en.js", Url)   
     @Content.Script("jquery.jqGrid.min.js", Url) 

     @RenderSection("scripts", required: false) 
    </body> 

(...) 

注意,我指的是@Content,這是一個CSHTML文件在我的\ App_Code文件夾及其內容是:

@using System.Web.Mvc; 
@helper Script(string scriptName, UrlHelper url) 
{ 
    <script src="@url.Content(string.Format("~/Scripts/{0}", scriptName))" type="text/javascript"></script> 
} 

現在主題應用於我的jqGrid,但主題應用後,包含它的所有我的頁面,甚至主頁面被屏蔽(禁用,灰色),並在下面的頁面底部顯示(一個警告窗口,俗話說:請選擇行):

http://snag.gy/AgUvM.jpg

什麼happenning?有任何想法嗎?

解決方案:

我使用的是下拉腳本文件jQuery的dd.js,但我忘了加上CSS樣式爲它的頭部標籤在我的母版頁(還我忘了包括CSS文件爲jqGrid):

<link href="@Url.Content("~/Content/dd.css")" rel="stylesheet" type="text/css" /> 
<link href="@Url.Content("~/Content/ui.jqGrid.css")" rel="stylesheet" type="text/css" media="all"/> 

回答

2

這是構建您的jQuery主題的有用鏈接。 jQuery UI。你需要做的是選擇你想要的主題,並從頁面底部的鏈接下載文件。在你的asp.net-mvc應用程序中使用它。希望這會有所幫助..

+0

好的,請下載壓縮文件(主題鏈接在底部),然後將所需的主題文件夾放在我的\ Content文件夾右邊?我已經看到,根目錄中只有一個包含很多gif,png和一些css文件的圖像文件夾。我想jquery-ui-xxx.js用於加載它們(在我的腳本文件夾中)? – user1624552

+1

是的你是對的。我希望你選擇了你的主題。你需要做的是調用主題中的css文件並添加最新的jquery和jquery-ui js文件。你會得到的。 –

+0

我已經做到了,現在應用了主題,但是當應用所有頁面時,甚至主頁面都會被阻止(禁用),並在頁面底部顯示一個窗口,提示「請選擇一行」。請查看我更新的帖子。 – user1624552

2

如果你選擇了一個主題(我假設一個jQuery UI主題),你可以將它保存在一個可訪問的文件夾(/ Content/Themes/etc)中。

之後,它應該像添加主題到您的視圖或佈局一樣簡單。

例:

<link href="@Url.Content("~/Content/themes/redmond/jquery-ui-1.10.3.custom.css")" rel="stylesheet" type="text/css" /> 

(在這個例子中,我選擇了「微軟」的主題,並有jQuery用戶界面的定製版本1.10.3)

然後,只需確保你的觀點,當你加載它實際上可以訪問你已經鏈接的CSS文件。

+0

我已經做到了,主題現在已經被應用,但是當應用所有頁面時,甚至主頁面都被阻止(禁用),並在頁面底部出現一個窗口,說:「請,選擇一行「。請查看我更新的帖子。 – user1624552