none
jquery accordian - with a list

    Pergunta

  • Found this script and it works perfect on the left menu :

    <script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    jQuery(function($) {
        $('.s4-ql li ul').hide();
        $('.s4-ql ul li').hover(function() {
            $(this).find('a:first').next().slideToggle();
        }, function() {
            $(this).find('a:first').next().slideToggle();
        }).find('ul').each(function(index) {
            var $this = $(this);
            $this.parent().find('a:first .menu-item-text').append(['<span style=\'float:right;font-size:0.8em;\'>(', $this.children().length, ')</span>'].join(''));
        });
    });
    </script>

    how can I make it work with a specific list and it's items? (not a programmer) 

     
    terça-feira, 17 de abril de 2012 11:48

Respostas

  • Hi JamesAtk,

    I built this query based on the below listed Jquery references and the link mentioned by Kunal Govani above.  http://sharepoint-comments.com/2011/03/11/jquery-getting-data-from-a-sharepoint-list/

    Using the above link, I got the list content and with the jquery references and i have attached classes to the html i got from SOAP Service. I still couldnt get the panel slide when you click on Annoucement 2 and 3 here... the headers are clickable, but i was not able to get them slide. May be I need to write some function which I couldnt get it working. If  you find it let me know.

    jQueryAccordionSPList

    (1) Below code goes in CEWP and change the site url. html i built is based on ID's of announcement list. Actual image is Announcement shrinked.

    <link href="/jquery-ui-1.8.20.custom/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet"/><script src="/jquery-ui-1.8.20.custom/development-bundle/ui/jquery.ui.core.js"></script><script src="/jquery-ui-1.8.20.custom/development-bundle/ui/jquery.ui.widget.js"></script><script src="/jquery-ui-1.8.20.custom/development-bundle/ui/jquery.ui.accordion.js"></script><link href="/jquery-ui-1.8.20.custom/development-bundle/demos/demos.css" rel="stylesheet"/><script src="/siteassets/jquery-1.7.2.min.js"></script><script language="javascript">


     function GetAnnouncementData()
     {
     var soapPacket = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
        <soapenv:Body> \
         <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
          <listName>Announcements</listName> \
          <viewFields> \
           <ViewFields> \
      <FieldRef Name='Title' /> \
      <FieldRef Name='Body' /> \
      <FieldRef Name='Expires' /> \
           </ViewFields> \
          </viewFields> \
         </GetListItems> \
        </soapenv:Body> \
       </soapenv:Envelope>";
     jQuery.ajax({
       url: "http://servername/site/_vti_bin/lists.asmx",
       type: "POST",
       dataType: "xml",
       data: soapPacket,
       complete: processResult,
       contentType: "text/xml; charset=\"utf-8\""
      });
     }
     
    function processResult(xData, status) {


      jQuery(xData.responseXML).find("z\\:row").each(function() {
     
      if( $(this).attr("ows_ID") == 1 )
      {
        $("<h3 tabindex=\"0\" class=\"ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top\" role=\"tab\" aria-expanded=\"true\" aria-selected=\"true\"><span class=\"ui-icon ui-icon-triangle-1-s\" /><a tabindex=\"-1\" href=\"#\">" + $(this).attr("ows_Title")  
    + "</a></h3>" + "<div class=\"ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active\"  role=\"tabpanel\" style=\"height: 200px;\"><p>" +  $(this).attr("ows_Body") + "</p>"  + "</div>").appendTo("#accordion");
      }

    else
    {
    $("<h3 tabindex=\"-1\" class=\"ui-accordion-header ui-helper-reset ui-state-default ui-corner-all\" role=\"tab\" aria-expanded=\"false\" aria-selected=\"false\"><span class=\"ui-icon ui-icon-triangle-1-e\" /><a tabindex=\"-1\" href=\"#\">" + $(this).attr("ows_Title")  
    + "</a></h3>" + "<div class=\"ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom\"  role=\"tabpanel\" style=\"height: 80px;display: none;\"><p>" +  $(this).attr("ows_Body") + "</p>"  + "</div>").appendTo("#accordion");
    }

     }); //end jQuery XData function


     }//end ProcessResult


    $(document).ready( function(){
            GetAnnouncementData();
     }); //end document ready

     </script>

    <div class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" id="accordion"></div>

    • Marcado como Resposta JmATK sábado, 16 de junho de 2012 06:13
    • Não Marcado como Resposta JmATK quarta-feira, 20 de junho de 2012 08:36
    • Marcado como Resposta JmATK sexta-feira, 10 de agosto de 2012 20:14
    sexta-feira, 15 de junho de 2012 19:44

Todas as Respostas

  • If you want to represent your list items using jquery, you can go with the following approaches,

    1. Use the Content Query webpart & create your custom <xsl:template> which applies your required jquery functions.

    2. Use the content editor webpart, using the SOAP envelop service, please refer the example in the below post this should serve your purpose,

    http://sharepoint-comments.com/2011/03/11/jquery-getting-data-from-a-sharepoint-list/


    Please Mark Post as Answer once you get the solution for your issues.

    Thanks,
    Kunal Govani

    quarta-feira, 18 de abril de 2012 05:10
  • I just want to have the same function as the script I pasted - just with the data from a list and not the left quick menu 

    quarta-feira, 18 de abril de 2012 05:58
  • No one that can assist ? 
    sexta-feira, 11 de maio de 2012 05:35
  • Hi JamesAtk,

    I built this query based on the below listed Jquery references and the link mentioned by Kunal Govani above.  http://sharepoint-comments.com/2011/03/11/jquery-getting-data-from-a-sharepoint-list/

    Using the above link, I got the list content and with the jquery references and i have attached classes to the html i got from SOAP Service. I still couldnt get the panel slide when you click on Annoucement 2 and 3 here... the headers are clickable, but i was not able to get them slide. May be I need to write some function which I couldnt get it working. If  you find it let me know.

    jQueryAccordionSPList

    (1) Below code goes in CEWP and change the site url. html i built is based on ID's of announcement list. Actual image is Announcement shrinked.

    <link href="/jquery-ui-1.8.20.custom/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet"/><script src="/jquery-ui-1.8.20.custom/development-bundle/ui/jquery.ui.core.js"></script><script src="/jquery-ui-1.8.20.custom/development-bundle/ui/jquery.ui.widget.js"></script><script src="/jquery-ui-1.8.20.custom/development-bundle/ui/jquery.ui.accordion.js"></script><link href="/jquery-ui-1.8.20.custom/development-bundle/demos/demos.css" rel="stylesheet"/><script src="/siteassets/jquery-1.7.2.min.js"></script><script language="javascript">


     function GetAnnouncementData()
     {
     var soapPacket = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
        <soapenv:Body> \
         <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
          <listName>Announcements</listName> \
          <viewFields> \
           <ViewFields> \
      <FieldRef Name='Title' /> \
      <FieldRef Name='Body' /> \
      <FieldRef Name='Expires' /> \
           </ViewFields> \
          </viewFields> \
         </GetListItems> \
        </soapenv:Body> \
       </soapenv:Envelope>";
     jQuery.ajax({
       url: "http://servername/site/_vti_bin/lists.asmx",
       type: "POST",
       dataType: "xml",
       data: soapPacket,
       complete: processResult,
       contentType: "text/xml; charset=\"utf-8\""
      });
     }
     
    function processResult(xData, status) {


      jQuery(xData.responseXML).find("z\\:row").each(function() {
     
      if( $(this).attr("ows_ID") == 1 )
      {
        $("<h3 tabindex=\"0\" class=\"ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top\" role=\"tab\" aria-expanded=\"true\" aria-selected=\"true\"><span class=\"ui-icon ui-icon-triangle-1-s\" /><a tabindex=\"-1\" href=\"#\">" + $(this).attr("ows_Title")  
    + "</a></h3>" + "<div class=\"ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active\"  role=\"tabpanel\" style=\"height: 200px;\"><p>" +  $(this).attr("ows_Body") + "</p>"  + "</div>").appendTo("#accordion");
      }

    else
    {
    $("<h3 tabindex=\"-1\" class=\"ui-accordion-header ui-helper-reset ui-state-default ui-corner-all\" role=\"tab\" aria-expanded=\"false\" aria-selected=\"false\"><span class=\"ui-icon ui-icon-triangle-1-e\" /><a tabindex=\"-1\" href=\"#\">" + $(this).attr("ows_Title")  
    + "</a></h3>" + "<div class=\"ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom\"  role=\"tabpanel\" style=\"height: 80px;display: none;\"><p>" +  $(this).attr("ows_Body") + "</p>"  + "</div>").appendTo("#accordion");
    }

     }); //end jQuery XData function


     }//end ProcessResult


    $(document).ready( function(){
            GetAnnouncementData();
     }); //end document ready

     </script>

    <div class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" id="accordion"></div>

    • Marcado como Resposta JmATK sábado, 16 de junho de 2012 06:13
    • Não Marcado como Resposta JmATK quarta-feira, 20 de junho de 2012 08:36
    • Marcado como Resposta JmATK sexta-feira, 10 de agosto de 2012 20:14
    sexta-feira, 15 de junho de 2012 19:44
  • Hi James,

    Is that slide working for you, when you click on second and third announcements, I couldnt get it working.

    segunda-feira, 18 de junho de 2012 16:32
  • no it's not working at all... ;0/
    quarta-feira, 20 de junho de 2012 08:41