2013-10-04 27 views
2

我正在開發一個ASP主頁和ContentPages的VB.NET應用程序。 我需要有一個固定的頂部頭,但要能夠在x軸 橫向滾動我已經找到了解決我的問題在這裏Solution i'd like having without the red left borderjquery,JavaScript,vb net固定在y和可滾動x標頭

但我真正的問題是,我不知道在哪裏把事實這個代碼,因爲我使用Masterpages和內容網頁

$(document).ready(function() { 
$('#parent') 
.bind('jsp-scroll-y', 
    function(event, scrollPositionY, isAtTop, isAtBottom) { 
    $(".header").css("top", scrollPositionY); 
    } 
) 
    .bind('jsp-scroll-x', 
    function(event, scrollPositionX, isAtLeft, isAtRight) { 
    $(".lefter").css("left", scrollPositionX); 
    } 
) 
    .jScrollPane(); 
}); 

現在我有它在我的Site.Master頁上,當我運行的應用程序沒有任何反應

我的頭位於contentpage

這是我的內容頁面: <%@ Page Title =「」Language =「vb」AutoEventWireup =「false」MasterPageFile =「〜/ Site.Master」CodeBehind =「TestPage.aspx.vb」Inherits =「Test.WebForm1 「%>

<p>Test</p> 
    <div id="parent"> 
<div class="headerx">header</div> 
    <div class="wrapper"> 
<div class="lefter">leftpane</div> 
<div class="content">mycontent</div> 
    </div> 
    <div class="scrollarea"> 

    </div> 
    </div> 

    </asp:Content> 

這是我背後

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="Test.Site" %> 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head runat="server"> 
<title>APPLICATION WEB POUR TESTER</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> 
    $(document).ready(function() { 
    $('#parent') 
     .bind('jsp-scroll-y', 
      function(event, scrollPositionY, isAtTop, isAtBottom) { 
       $(".header").css("top", scrollPositionY); 
    } 
     ) 
     .bind('jsp-scroll-x', 
      function(event, scrollPositionX, isAtLeft, isAtRight) { 
       $(".lefter").css("left", scrollPositionX); 
    } 
    ) 
    .jScrollPane(); 
    }); 

</script> 
    <script type="text/javascript"> 
     function invokeMeMaster() { 
      alert('I was invoked from Master'); 
     } 
    </script> 



    <script type="text/javascript"> 
    function invokeMeMasterOnclick() { 
     alert('I was invoked from a ButtonClick'); 
    } 
    </script> 
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> 

    <asp:ContentPlaceHolder ID="HeadContent" runat="server"> 
    </asp:ContentPlaceHolder> 
     </head> 
    <body> 

在哪裏,如何無碼主page.aspx我應該叫JScript的?我已經通過紐金特安裝JScrollPane的

預先感謝您

回答

0

我設法找到了解決方案:

我不得不添加我的腳本在內容頁面中搜索Maincontent 並在同一時間,我是缺少

 <!-- styles needed by jScrollPane --> 
    <link type="text/css" href="Styles/jquery.jscrollpane.css" rel="stylesheet" media="all" /> 

    <!-- latest jQuery direct from google's CDN --> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 
    </script> 

    <!-- the mousewheel plugin - optional to provide mousewheel support --> 
    <script type="text/javascript" src="Scripts/jquery.mousewheel.js"></script> 

     <!-- the jScrollPane script --> 
    <script type="text/javascript" src="Scripts/jquery.jscrollpane.min.js"></script> 

的劇本聲明下方添加像這樣

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#parent') 
     .bind('jsp-scroll-y', 
      function (event, scrollPositionY, isAtTop, isAtBottom) { 
       $(".header").css("top", scrollPositionY); 
      } 
     ) 
     .bind('jsp-scroll-x', 
      function (event, scrollPositionX, isAtLeft, isAtRight) { 
       $(".lefter").css("left", scrollPositionX); 
      } 
    ) 
    .jScrollPane(); 
    }); 
    alert('I was invoked at the end of the script'); 
</script> 
<script type="text/javascript"> 
    function invokeMeMaster() { 
     alert('I was invoked from Master'); 
    } 
    </script>