2010-05-09 50 views
2

最近,我試圖將一些基於jQuery的菜單原型化到ASP.NET MVC中。僅舉兩個例子在這裏:ASP.NET MVC下的JQuery菜單插件似乎只在Chrome中工作,但IE和FireFox中沒有。

  1. plugins.jquery.com/project/columnview

  2. www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

他們的演示頁面看上去很不錯,但是當我將他們的示例代碼整合到MVC中時,該腳本不再適用於IE和FireFox,但在谷歌瀏覽器中似乎工作得很好。有人能夠指出我錯過了什麼嗎?我會在這裏誠實。我還是JavaScript的新手,所以對我來說這仍然是一個學習階段,所以任何幫助都非常感謝。

我已經把我的VS2010解壓縮文件的副本@http://db.tt/0UNDkN

這裏是我做的。 在的Site.Master,我有一些像

<body> 
<div class="page">{truncated...}</div> 

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> 
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" /> 
</body> 

,並查看文件裏面,我已經

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<div id="original"> 
{some demo block, copied from javascript demo} 
</div> 
</asp:Content> 

<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server"> 
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.columnview.js") %>" /> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#original').columnview(); 
    }); 
</script> 
</asp:Content> 

編譯的代碼和IE瀏覽器下運行它下面。理想情況下,它應該像www.christianyates.com/blog/jquery/finder-column-view-hierarchical-lists-jquery中的演示一樣工作,但實際上,它僅以普通視圖顯示無序列表。 (如果您下載解決方案文件並運行它,則應該也可以重新制作這個文件)。接下來,嘗試使用FireFox,無法使用,與IE相同。最後,當我在Google Chrome 4.1(最新版本)下試用它時,腳本顯示得很好。實在令人費解的位置: -/

感謝您閱讀:d

回答

1

史詩失敗.. 事實證明,它有事情做與XHTML驗證

ASP.Net MVC默認情況下有以下的DocType

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

在原來的代碼,我有

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.columnview.js") %>" /> 

原來,IE & FireFox不喜歡結束標籤。它更喜歡

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.columnview.js") %>"></script> 

結束標記</script>是原因。

+0

原來,有一個單獨的討論原因@ http://stackoverflow.com/questions/69913/why-dont-self-closing-script-tags-work 總是學習新的東西:D – Antony 2010-05-09 18:07:57

0

沒有多少,我可以離開這裏看到你沒有在你的Site.Master定義的「搜索Maincontent」的ContentPlaceHolder的事實。

只需確保#original DIV存在:)

+0

本,感謝您對此進行調查。感謝您指出我沒有在原始問題中包含所有內容。在網站內。Master,「」包含在

(這是MVC在我開始新項目時發生的事情) 至於#original div,它存在於查看頁面(如MainContent中的原始帖子所示) 但是,今天我又看了一遍..我終於找出原因。將在一秒內發佈答案。 – Antony 2010-05-09 17:46:09

相關問題