2012-03-19 59 views
0

時失去跟蹤的圖像文件夾的這是我和它的工作原理:MVC局部視圖使用jQuery

$(function(){ 
$('.slide-out-div').tabSlideOut({ 
     tabHandle: '.handle',      //class of the element that will become your tab 
     pathToTabImage: 'http://mhmiisdev2/images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css 
     imageHeight: '122px',      //height of tab image   //Optionally can be set using css 
     imageWidth: '40px',      //width of tab image   //Optionally can be set using css 
     tabLocation: 'right',      //side of screen where tab lives, top, right, bottom, or left 
     speed: 300,        //speed of animation 
     action: 'click',       //options: 'click' or 'hover', action to trigger animation 
     topPos: '200px',       //position from the top/ use if tabLocation is left or right 
     leftPos: '20px',       //position from left/ use if tabLocation is bottom or top 
     fixedPosition: true      //options: true makes it stick(fixed position) on scroll 
    }); 
}); 

這就是我想要的東西,當我從一個控制器切換到另一個控制器,它不工作。請注意圖片的路徑不是絕對

$(function(){ 
    $('.slide-out-div').tabSlideOut({ 
     tabHandle: '.handle',      //class of the element that will become your tab 
     pathToTabImage: '/images/contact_tab.gif', //path to the image for the tab //Optionally can be set using css 
     imageHeight: '122px',      //height of tab image   //Optionally can be set using css 
     imageWidth: '40px',      //width of tab image   //Optionally can be set using css 
     tabLocation: 'right',      //side of screen where tab lives, top, right, bottom, or left 
     speed: 300,        //speed of animation 
     action: 'click',       //options: 'click' or 'hover', action to trigger animation 
     topPos: '200px',       //position from the top/ use if tabLocation is left or right 
     leftPos: '20px',       //position from left/ use if tabLocation is bottom or top 
     fixedPosition: true      //options: true makes it stick(fixed position) on scroll 
    }); 
}); 

的HTML完整性....

<div class="slide-out-div"> 
    <a class="handle" href="http://link-for-non-js-users.html">Content</a> 
    <h3>Medical Variance Reports</h3> 
    <div> 
     <ul> 
      <li><a href="http://mhmssrs2/Reports/Pages/Report.aspx?" target="_blank">Individual Medicines</a></li> 
     </ul> 
    </div> 
</div> 

我懷疑某種程度上pathToTabImage: /images/contact_tab.gif'瀏覽throught控制器時,失去了它的背景。瀏覽throught控制器時/images/contact_tab.gif」失去它 方面:幫助我理解......

+0

是否有一個jQuery相當於MVC到@urlcontent? – hidden 2012-03-19 23:17:01

+0

你的圖像在哪裏搜索?在控制檯或「資源」頁面中,您應該可以看到圖像已被搜索的位置。 – 2012-03-19 23:22:31

回答

2

我懷疑莫名其妙pathToTabImage。

哦,是的,你是對的。處理ASP.NET MVC中的URL時,始終使用url助手:

pathToTabImage: '@Url.Content("~/images/contact_tab.gif")' 

從不像您在代碼中那樣硬編碼urls。這將確保您的應用程序在您將其部署在虛擬目錄下的IIS中時工作。

+1

哇我知道你可以使用js裏面的@ url.content,這是瘋狂的! – hidden 2012-03-20 14:23:27

+0

當我使用@ Url.Content鏈接說%22/images/report_tab.gif找不到圖像我想知道爲什麼? – hidden 2012-03-20 14:35:18

0

只需使用輔助Url.Content()功能的JS裏面像這樣

pathToTabImage: @Url.Content("~/images/contact_tab.gif")

如果你的JS是內外部JavaScript文件,你得到的只是指向一個變量,它是全球性的。

在視圖的頂部:

變種mypath中= @ Url.Content( 「〜/圖像/」);

內外部JS文件: pathToTabImage: myPath + "contact_tab.gif"

+0

不適用於我,因爲我正在發送該URL路徑到處理URL的JavaScript API。 – hidden 2012-03-20 21:32:46

0

這裏是我做過什麼

alert(UrlContent("/hdd/images.gif")); //for debugging purposes 
alert(UrlContent("~/hdd/images.gif")); 
alert(UrlContent("hdd/images.jpg"); 
//they all return the correct url 

function UrlContent(url) { 



// first lets take care of users that are smart 

url = $.trim(url.replace("~/", "")); //this should take care of smart users! 
if (url.charAt(0) == "/") { 
    url=url.substring(1,url.length) 
} 
//now that we have taken care of smart users lets form the url 

var UrlPath = location.protocol + '//' + location.hostname +location.port+'/'+url 

return UrlPath 

}

+0

我不得不這樣做的原因是因爲@UrlContent在單獨的js文件中沒有正常工作。也許有人有更好的答案? – hidden 2012-03-20 16:03:59