jquery - 通过单击轮播 Sharepoint 2010 中的超链接来隐藏/显示 Web 部件

Question

我正在尝试使用带有 jQuery 的标准轮播来隐藏或显示页面上的某些 webpart 区域。我在 Section1、Section2 等的 <li> 中添加了一个类，并希望当您单击 Section1 等时它顶部打开 WebPartWPQ5。

有人能指出我正确的方向吗？

这是我所拥有的：

<script type="text/javascript">

$(document).ready(function () {
    $('#MSOZoneCell_WebPartWPQ5').hide(); 

       $(".Section1").click(function(){
      $('#MSOZoneCell_WebPartWPQ5').toggle(); 
    });
  });
});
</script>

每个 li 都会在其下方打开一个最初隐藏的 Web 部件。

 <ul id="jtabs" class="jtabs"> 
 <li class="ShowSection1"><a href="#">Budget</a></li> 
 <li class="ShowSection2"><a href="#">Compensation</a></li> 
 </ul>

有 5 个 jTab 应该打开一个 Web 部件并在单击它时关闭任何打开的部件

 $(document).ready(function () { 
     $('#MSOZoneCell_WebPartWPQ5').hide();       
     $('#MSOZoneCell_WebPartWPQ6').hide(); 
         $("ul").on('click', 'li.ShowSection1', function(){     
         $('#MSOZoneCell_WebPartWPQ6').toggle(); }); 

         $("ul").on('click', 'li.ShowSection2', function(){    
         $('#MSOZoneCell_WebPartWPQ5').toggle(); 
   }); 
});

这是 Web 部件代码的示例。我认为可以使用 Web 部件 ID，因为它始终是唯一的 ID。

     <WebPartPages:ContentEditorWebPart runat="server" __MarkupType="xmlmarkup" WebPart="true" __WebPartId="{D0ADB7E7-8348-4604-96BA-6B22745C057F}" >
   <WebPart xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://schemas.microsoft.com/WebPart/v2">
   <Title>Content Editor</Title>
     <FrameType>None</FrameType>
     <Description>Allows authors to enter rich text content.</Description>
     <IsIncluded>true</IsIncluded>
     <PartOrder>8</PartOrder>
     <FrameState>Normal</FrameState>
     <Height />
     <Width />
     <AllowRemove>true</AllowRemove>
     <AllowZoneChange>true</AllowZoneChange>
     <AllowMinimize>true</AllowMinimize>
     <AllowConnect>true</AllowConnect>
     <AllowEdit>true</AllowEdit>
     <AllowHide>true</AllowHide>
     <IsVisible>true</IsVisible>
     <DetailLink />
     <HelpLink />
     <HelpMode>Modeless</HelpMode>
     <Dir>Default</Dir>
     <PartImageSmall />
     <MissingAssembly>Cannot import this Web Part.</MissingAssembly>
     <PartImageLarge>/_layouts/images/mscontl.gif</PartImageLarge>
     <IsIncludedFilter />
     <ExportControlledProperties>true</ExportControlledProperties>
     <ConnectionID>00000000-0000-0000-0000-000000000000</ConnectionID>
     <ID>g_7ac31086_17de_44c1_9a0b_44a01f67a452</ID>
     <ContentLink xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor">/sites/WSS001905/SiteAssets/Carousel/carousel.txt</ContentLink>
     <Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" />
     <PartStorage xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" />
   </WebPart>
   </WebPartPages:ContentEditorWebPart>

这是完整的轮播文件：

<head>
<link rel="stylesheet" href="../SiteAssets/Carousel/core.css" type="text/css" media="screen">
<link rel="stylesheet" href="../SiteAssets/Carousel/jslideshow.css" type="text/css" media="screen">
<script type="text/javascript" src="../SiteAssets/Libraries/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../SiteAssets/Libraries/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="../SiteAssets/Libraries/jslideshow-1.0.0.js"></script>
<style type="text/css">
body{ margin: 0px;}
h1{font-size: 24px; margin-bottom: 20px;}
p{font-size: 14px;}
/* clean gray
*******************************************************************************/
button.clean-gray {
  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(top, #eeeeee, #cccccc);
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  color: #333;
  font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  line-height: 1;
  padding: 8px 0;
  text-align: center;
  text-shadow: 0 1px 0 #eee;
  width: 150px; }
  button.clean-gray:hover {
    background-color: #dddddd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
    /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(top, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd; }
  button.clean-gray:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; }
    .controls{
    border: 1px solid #d8d8d8; margin-top: 10px; padding: 10px;
    width: 604px;
    }
    .controls h2{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    }
    .container{
    border: 1px solid #dddddd;
    width: 624px; margin: 0 auto;
    padding: 0px;
    background: #f7f7f7;
    z-index:-1;
    }
    .footer{
    padding: 10px 0 0;
    text-align: right;
    font-size: 11px;
    }
    .download{
    text-align: center;
    padding: 10px 0;
    }
    .cc{
    text-align: center;
    padding: 10px 0;
    border: solid #d8d8d8;
    border-width: 1px 0;
    }
    </style>
</head>

<body>

<div class="container">
    <div class="jslideshow">
    <ul class="jslides">
        <li>
            <div class="carousel-image"><img src="../SiteAssets/Carousel/budget.JPG" width="440" height="300" alt="Budget Image"></div>

            <div class="carousel-description">
                <h2 class="ShowSection1"><a  href="#">Budget</a></h2>&nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in massa ipsum. <a href="#">&raquo; Find out more</a>
            </div>
        </li>

        <li>
            <div class="carousel-image"><img src="../SiteAssets/Carousel/comp.JPG" width="440" height="300" alt="Budget Image"></div>

            <div class="carousel-description">
                <h2><a href="#">Compensation</a></h2>&nbsp; Fusce fringilla nibh ut nibh sodales vehicula. Sed metus nunc, mattis non fermentum quis, viverra non est. <a href="#">&raquo; Find out more</a>
            </div>
        </li>

        <li>
            <div class="carousel-image"><img src="../SiteAssets/Carousel/expenses.JPG" width="440" height="300" alt="JQuery Carousel Example Image 3"></div>

            <div class="carousel-description">
                <h2><a href="#">Expenses</a></h2>&nbsp; Sed lorem massa, laoreet sed viverra eu, ultrices sit amet libero. Curabitur lorem dolor, adipiscing et venenatis a, pharetra ac nisi. Nunc laoreet posuere faucibus. <a href="#">&raquo; Find out more</a>
            </div>
        </li>

        <li>
            <div class="carousel-image"><img src="../SiteAssets/Carousel/FinResults.JPG" width="440" height="300" alt="JQuery Carousel Example Image 4"></div>

            <div class="carousel-description">
                <h2><a href="#">Results</a></h2>&nbsp; Phasellus nec nunc est. Cras elit arcu, malesuada nec venenatis ac, sollicitudin in magna. <a href="#">&raquo; Find out more</a>
            </div>
        </li>

        <li>
            <div class="carousel-image"><img src="../SiteAssets/Carousel/Misc.JPG" width="440" height="300" alt="JQuery Carousel Example Image 5"></div>

            <div class="carousel-description">
                <h2><a href="#">Miscellaneous</a></h2>&nbsp; Quisque sit amet tortor eu tellus suscipit pretium. Nunc dolor mauris, sagittis ut laoreet non, vulputate ut sapien. <a href="#">&raquo; Find out more</a>
            </div>
        </li>
    </ul>

    <ul id="jtabs" class="jtabs">

        <li class="ShowSection1"><a href="#">Budget</a></li>

        <li class="ShowSection2"><a href="#">Compensation</a></li>

        <li class="ShowSection3"><a href="#">Expenses</a></li>

        <li class="ShowSection4"><a href="#">Results</a></li>

        <li class="ShowSection5"><a href="#">Miscellaneous</a></li>

    </ul>
</div><script type="text/javascript">
(function($) {
    $(document).ready(function() { //Standand variables
        $( "#button" ).click(function() {
            $('.jslideshow').jslideshow('updateSlideshow', {
            'effectType' : $( "#effectTypes" ).val(),
            'interval' : $( "#intervalSpeed" ).val(),
            'animationspeed' : $( "#animationSpeed" ).val()
            //'slidedown': "element.slideDown(plugin.settings.animationspeed, easing);"
         }); // calls the init method
    return false;
    });
    });
    })(jQuery);

</script>
<div class="controls" style="display:none">
<h2>Slideshow Controls</h2>
<label for="effectTypes">Effect Type</label>
<select name="effectTypes" id="effectTypes">
    <option value="core_fadein">
        Fade In (Jquery Core)
    </option>

    <option value="core_show">
        Show (Jquery Core)
    </option>

    <option value="core_slidedown">
        Slide Down (Jquery Core)
    </option>

    <option value="jqueryui_blind">
        Blind (Jquery UI)
    </option>

    <option value="jqueryui_clip">
        Clip (Jquery UI)
    </option>

    <option value="jqueryui_drop">
        Drop (Jquery UI)
    </option>

    <option value="jqueryui_fade">
        Fade (Jquery UI)
    </option>

    <option value="jqueryui_fold">
        Fold (Jquery UI)
    </option>

    <option value="jqueryui_puff">
        Puff (Jquery UI)
    </option>

    <option value="jqueryui_slide">
        Slide (Jquery UI)
    </option>

    <option value="custom_animate_1">
        Custom Animation (Jquery UI)
    </option>

</select> 
<label for="intervalSpeed">Interval Speed</label>
<select name="intervalSpeed" id="intervalSpeed">
    <option value="500">
        500ms
    </option>

    <option value="600">
        600ms
    </option>

    <option value="700">
        700ms
    </option>

    <option value="800">
        800ms
    </option>

    <option value="900">
        900ms
    </option>

    <option value="1000">
        1000ms
    </option>
    <option value="1500">
        1500ms
    </option>
    <option value="2000">
        2000ms
    </option>
    <option value="2500">
        2500ms
    </option>
    <option value="3000">
        3000ms
    </option>
</select>
<label for="animationSpeed">Animation Speed</label>
    <select name="animationSpeed" id="animationSpeed">
    <option value="200">
        200ms
    </option>

    <option value="300">
        300ms
    </option>

    <option value="400">
        400ms
    </option>

    <option value="500">
        500ms
    </option>

    <option value="600">
        600ms
    </option>

    <option value="700">
        700ms
    </option>

    <option value="800">
        800ms
    </option>

    <option value="900">
        900ms
    </option>

    <option value="1000">
        1000ms
    </option>
    <option value="1500">
        1500ms
    </option>
    <option value="2000">
        2000ms
    </option>
    <option value="2500">
        2500ms
    </option>
    <option value="3000">
        3000ms
    </option>
</select>
<div style="text-align: center; margin-top: 10px;">
<button href="#" id="button" class="clean-gray">Run Effect</button>
</div>
<script type="text/javascript">
jQuery.noConflict();
(function($) {
$(function() {
    $(document).ready(function() { //Standand variables

$('.jslideshow').jslideshow({
    'interval' : '4000',
    'animationspeed' : '1000',
    'effectType' : 'jqueryui_slide'
}); // calls the init method


});
});
})(jQuery);
</script>
</div>
</div>
<br/>
<hr>
</body>

您提供的代码将更改图像，但不会隐藏或显示 Web 部件。这是完整的轮播，如果需要，它会循环并打开链接，但它需要在其下方的页面上显示 Web 部件。感谢您迄今为止提供的所有帮助，但仍然没有成功。

score 0 · Accepted Answer

你有一个额外的 `});' 在你的代码中。此外，如果您希望能够单击任何部分，请确保您的课程更通用。正如您所拥有的，如果您单击第 1 部分，您似乎只希望显示“#MSOZoneCell_WebPartWPQ5”。

像这样的东西怎么样：

HTML

<ul>
  <li class='section'>Section1</li>
  <li class='section'>Section2</li>
</ul>

JS

$(document).ready(function () {
  $('#MSOZoneCell_WebPartWPQ5').hide(); 

  $("ul").on('click', 'li.section', function(){
    $('#MSOZoneCell_WebPartWPQ5').toggle(); 
  });
});

我将类“部分”放在每个li上，以防它们包含其他li.

编辑在看到呈现的 HTML 的图像后，以下应该可以工作。我已经包含了一个示例 jsbin：http: //jsbin.com/oBEgEpe/1/edit

$(document).ready(function() {
  var slides = $('.jslides li');

  // Hide all but the first
  $(slides).hide();
  $(slides).eq(0).show();

  $('#jtabs').on('click', 'li a', function(e) {
    e.preventDefault();
    var slide_number = $(this).closest('li').index();
    $(slides).hide();
    $(slides).eq(slide_number).show();
  });
});

jquery - 通过单击轮播 Sharepoint 2010 中的超链接来隐藏/显示 Web 部件

1 回答 1

Related

Reference