Jquery 通过单击旋转木马Sharepoint 2010中的超链接隐藏/显示Web部件_Jquery_Sharepoint_Web Parts

Jquery 通过单击旋转木马Sharepoint 2010中的超链接隐藏/显示Web部件

jquery sharepoint

Jquery 通过单击旋转木马Sharepoint 2010中的超链接隐藏/显示Web部件,jquery,sharepoint,web-parts,Jquery,Sharepoint,Web Parts,我正在尝试使用带有jQuery的标准旋转木马来隐藏或显示页面上的某些Web部件区域。我有一个类添加到第1节、第2节等的，希望在单击第1节等时将其顶部打开WebPartWPQ5 有人能给我指出正确的方向吗以下是我所拥有的： <script type="text/javascript"> $(document).ready(function () { $('#MSOZoneCell_WebPartWPQ5').hide(); $(".Section1").c

我正在尝试使用带有jQuery的标准旋转木马来隐藏或显示页面上的某些Web部件区域。我有一个类添加到第1节、第2节等的

，希望在单击第1节等时将其顶部打开WebPartWPQ5

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

以下是我所拥有的：

<script type="text/javascript">

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

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

下面是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>


内容编辑器
没有一个
允许作者输入富文本内容。
真的
8.
正常的
Lorem ipsum dolor sit amet，是一位杰出的献身者。马萨岛的库拉比图尔。



这是一个很好的例子。塞德·梅特斯·努克、马蒂斯·非发酵食品公司、维韦拉非发酵食品公司。


罗勒姆·马萨，劳里特·维韦拉·欧盟，奥特里斯坐在阿米特·自由女神的位子上。奥雷姆·多洛（Curabitur lorem dolor）、阿迪皮斯（Adipising）和维尼那提斯（venenatis a）、法雷特拉（pharetra ac nisi）。努克·拉奥里特·波苏尔·福西布斯。


Phasellus nec nunc est。克拉斯·埃利特·阿库、马莱苏阿达·内克·维尼纳蒂斯·阿库、马格纳的索利西图丁。


这是我的侵权行为。努克·多洛·莫里斯、萨吉蒂·劳里特·农、秃鹫·萨皮恩。









（函数（$）{
$（document）.ready（function（）{//statand变量
$（“#按钮”）。单击（函数（）{
$（'.jslideshow'）.jslideshow（'updateSlideshow'）{
'effectType'：$（“#effectType”）.val（），
'间隔'：$（“#intervalSpeed”）.val（），
'animationspeed'：$（“#animationspeed”）.val（）
//“slidedown”：“element.slidedown（plugin.settings.animationspeed，easing）；”
})；//调用init方法
返回false；
});
});
})（jQuery）；
幻灯片放映控件
效应类型
淡入（Jquery核心）
显示（Jquery核心）
向下滑动（Jquery核心）
盲（jqueryui）
剪辑（jqueryui）
Drop（jqueryui）
淡入淡出（jqueryui）
折叠（jqueryui）
Puff（jQueryUI）
幻灯片（jqueryui）
自定义动画（jqueryui）
间歇速度
500毫秒
600毫秒
700毫秒
800毫秒
900毫秒
1000毫秒
1500毫秒
2000ms
2500毫秒
3000毫秒
动画速度
200毫秒
300毫秒
400毫秒
500毫秒
600毫秒
700毫秒
800毫秒
900毫秒
1000毫秒
1500毫秒
2000ms
2500毫秒
3000毫秒
运行效应
jQuery.noConflict（）；
（函数（$）{
$（函数（）{
$（document）.ready（function（）{//statand变量
$（'.jslideshow'）.jslideshow({
“间隔”：“4000”，
“动画速度”：“1000”，
“效应类型”：“jqueryui_幻灯片”
})；//调用init方法
});
});
})（jQuery）；

您提供的代码将更改图像，但不会隐藏或显示web部件。这是一个完整的旋转木马，它可以浏览，如果需要的话可以打开链接，但是它需要在下面的页面上显示web部件。我感谢你迄今为止所给予的一切帮助，但仍然没有成功。

你还有一个额外的`}）；'在你的代码中。此外，如果您希望能够单击任何部分，那么请确保使您的类更通用。正如您所看到的，如果单击第1节，您似乎只希望显示“#MSOZoneCell_WebPartWPQ5”

像这样的怎么样：

HTML

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

我将类“section”放在每个

li

上，以防它们包含其他

li

编辑在看到呈现的HTML的图像后，以下操作应该可以正常工作。我已经包括了一个jsbin示例：

您有一个额外的

}）

在Thereflad中，这对一个web部件很有效，但是ul有5个li，当它关闭另一个web部件时，应该打开一个web部件。我认为这应该是一个循环，这是错误的吗？所以每个li应该打开一个不同的循环？web部件？如果您能将web部件的html包含在内，这将非常有用，这样我们可以看到ul与web部件之间的关系以及是否存在任何类等。是的，先生，每个LI都会在其下方打开一个web部件，该部件最初是隐藏的

$（文档）。准备好（函数（）{$（''MSOZoneCell_WebPartWPQ5'）。隐藏（）$（'MSOZoneCell_WebPartWPQ6'）。隐藏（）$（'ul”）。打开（'click'，'li.ShowSection5'，函数（）{（'MSOZoneCell"WebPartWPQ6'）。切换（）（'click'、'li.ShowSection5'，function（）{$（'#MSOZoneCell_WebPartWPQ5'）.toggle（）；}）；完成，很抱歉，您可以为web部件添加类并为每个li添加属性吗？我仍然不知道web部件html是什么样子，如果不知道html结构，很难编写简单的解决方案。

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

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

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

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

$(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();
  });
});