2

我正在使用母版页和 ContentPages 在 vb 中开发 ASP .NET 应用程序。我需要有一个固定的顶部标题但能够在 x 轴上横向滚动我在这里找到了解决我的问题的解决方案我希望没有红色的左边框

但我真正的问题是我不知道把这段代码放在哪里,因为我正在使用 Masterpages 和 contentpages

 $(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 页面上有它,当我运行应用程序时没有任何反应

我的标题位于内容页面中

这是我的内容页:<%@ 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>

这是我的母版 page.aspx,后面没有代码

  <%@ 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>

我应该在哪里以及如何调用 jscript?我已经通过 nugent 安装了 jscrollpane

先感谢您

4

1 回答 1

0

我设法找到了解决方案:

我不得不在主要内容的内容页面中添加我的脚本同时我失踪了

     <!-- 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>
于 2013-10-04T18:24:09.967 回答