Скрыть / показать веб-часть, щелкнув гиперссылку в карусели Sharepoint 2010

Question

Скрыть / показать веб-часть, щелкнув гиперссылку в карусели Sharepoint 2010

0

Я пытаюсь использовать стандартную карусель с jQuery, чтобы скрыть или показать определенные веб-страницы на странице. У меня есть класс, добавленный в <li> раздела 1, раздел2 и т.д., И он хотел бы, чтобы он открывал WebPartWPQ5, когда вы нажимаете Section1 и т.д.

Кто-нибудь сможет указать мне в правильном направлении?

Вот что я имею:

<script type="text/javascript">

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

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

Каждый li откроет веб-часть под ней, которая сначала скрыта.

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

Есть 5 jTabs. Это должно открыть одну веб-часть и закрыть любую открытую, когда она будет нажата.

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

Ниже приведен пример кода веб-части. Я бы подумал, что идентификатор веб-части можно использовать, потому что это всегда уникальный идентификатор.

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

Код, который вы предоставили, изменит изображение, но не скроет или не покажет веб-части. вот полная карусель, которая проскакивает и громко открывает ссылки, если это необходимо, но она должна показать веб-часть на странице под ней. Я ценю всю помощь, которую вы оказали до сих пор, но все равно не уходите.

ahdrum87 20 сен. 2013, в 22:07

Источник

Теги:

jquery

sharepoint

web-parts

1 ответ

Ещё вопросы

Vlad · Answer 1 · 2013-09-20T18-16-00.000Z

0

У вас есть дополнительный '}); в вашем коде. Кроме того, если вы хотите иметь возможность щелкнуть по любому разделу, убедитесь, что вы сделали свой класс более универсальным. Как у вас есть, кажется, что вы хотите, чтобы "# MSOZoneCell_WebPartWPQ5" отображался, если вы щелкните раздел 1.

Как насчет чего-то вроде этого:

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.

EDIT После просмотра изображений визуализированного 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();
  });
});

Vlad 20 сен. 2013, в 18:16

0

Влад, это хорошо работает для одной веб-части, но у ul есть 5 li, которые должны открывать одну, когда она закрывает другую. Я ошибаюсь, думая, что это должно быть петлей?
ahdrum87 23 сен. 2013, в 14:41
0

Таким образом, каждый ли должен открыть разные? веб-часть? Было бы полезно, если бы вы включили html своих веб-частей, чтобы мы могли видеть, как отношение ul к веб-частям и есть ли какие-либо классы и так далее.
Vlad 23 сен. 2013, в 15:17
0

Да, сэр, каждый LI будет открывать веб-часть под ней, которая изначально скрыта. <ul id = "jtabs" class = "jtabs"> <li class = "ShowSection1"> <a href="#"> Бюджет </a> </ li> <li class = "ShowSection2"> <a href = "#"> Компенсация </a> </ li> </ ul> $ (документ) .ready (function () {$ ('# MSOZoneCell_WebPartWPQ5'). Hide (); $ ('# MSOZoneCell_WebPartWPQ6'). Hide ( ); $ ("ul"). on ('click', 'li.ShowSection5', function () {$ ('# MSOZoneCell_WebPartWPQ6'). toggle ();}); $ ("ul"). on (' нажмите кнопку ',' li.ShowSection5 ', function () {$ (' # MSOZoneCell_WebPartWPQ5 '). toggle ();});});
ahdrum87 23 сен. 2013, в 15:44
0

Ха! пожалуйста, укажите это в своем вопросе, чтобы мы могли прочитать его.
Vlad 23 сен. 2013, в 15:48
0

Готово, извините за это
ahdrum87 23 сен. 2013, в 19:02
0

Можете ли вы добавить классы в веб-части и атрибуты для каждого li? Я до сих пор не знаю, как выглядит html веб-частей, и сложно написать простое решение, не зная структуры html.
Vlad 23 сен. 2013, в 19:22
0

Если вы можете добавить классы и атрибуты, то это станет красиво и просто. Вы добавляете событие click в ul и скрываете все веб-части, кроме той, которая связана с li, путем скрытия класса, а затем отображаете веб-часть, связанную с li, через атрибут типа `data-web_part = '# MSOZoneCell_WebPartWPQ5'.
Vlad 23 сен. 2013, в 19:26
0

Я попытался добавить класс к самому XSL для веб-части, и это, казалось, нанесло ущерб дизайну. Тогда не будет отображаться карусель или какие-либо веб-части. Вот почему я думаю, что использование идентификатора веб-части может работать, но я не уверен, что знаю, как ссылаться на него.
ahdrum87 24 сен. 2013, в 13:30
0

Хорошо, если вы не можете добавлять классы, тогда идентификатор должен работать. Это просто означает немного больше кода. Можете ли вы добавить атрибуты в LI, которые вы хотите щелкнуть? Если мы можем добавить атрибут data-webpart_id = "# MSOZoneCell_WebPartWPQ5" и т. Д., Мы можем использовать его, чтобы определить, какая li будет переключать какую веб-часть.
Vlad 24 сен. 2013, в 14:21
0

У меня все еще есть проблемы, вот ссылки на то, как это выглядит и как выглядит код для HTML. Может быть, это поможет что-то определить. Я в недоумении. imgur.com/zhhmi8C imgur.com/a/hVsxr#5DVWMST
ahdrum87 24 сен. 2013, в 16:56
0

@ ahdrum87 Я обновил пример, основанный на ваших изображениях. В будущем вы должны включить этот HTML в свой вопрос.
Vlad 24 сен. 2013, в 19:27
0

Простите за это. Я обновил полный текстовый файл, который я использую. Страницу нужно скрыть или показать, что веб-часть не работает с изображениями (это уже сделано), спасибо Влад!
ahdrum87 25 сен. 2013, в 18:25
0

Я сдаюсь! Надеюсь, кто-то еще может помочь вам.
Vlad 25 сен. 2013, в 19:00
0

Влад, я искренне ценю твою помощь. Кто-нибудь еще хочет нанести удар?
ahdrum87 26 сен. 2013, в 18:00

Показать ещё 12 комментариев