在SharePoint 2013上响应旋转横幅

时间:2014-04-07 11:51:45

标签: sharepoint layout responsive-design

是否有任何工具或webPart可以向sharepoint 2013添加支持响应的横幅?

1 个答案:

答案 0 :(得分:3)

您不需要SP特定的任何内容。我过去曾使用过flexslider来获取SP和其他内容。只需使用REST从列表中填充并在ajax成功回调中调用flexslider。

(评论太长了)我在我的另一台机器上做 - 这是一个2010年的例子,我使用SPServices做同样的事情。相同的概念 - 使用响应数据生成标记,并在填充标记后应用flexslider。

                $(document).ready(function() {
                  $().SPServices({
                    operation: "GetListItems",
                    async: false,
                    webURL: "/",
                    listName: "Home Slider",
                    CAMLViewFields: "<ViewFields><FieldRef Name='ImageLink' /><FieldRef Name='Title' /><FieldRef Name='SubTitle' />"
                        + "<FieldRef Name='LinkText' /><FieldRef Name='LinkURL' /><FieldRef Name='Description' />"
                        + "</ViewFields>",
                    completefunc: function (xData, Status) {
                      var myslider;
                      var liHtml = "";
                      $(xData.responseXML).SPFilterNode("z:row").each(function() {
                         liHtml  += "<li style='background:url(" + $(this).attr("ows_ImageLink") + ") no-repeat center top;'>"
                                + "<div class='slideWrap'><div class='slideInnerWrap'>" 
                                + "<h2>" + $(this).attr("ows_Title")        + "</h2>"
                                + "<a href='" + $(this).attr("ows_LinkURL")     + "' class='btn btnOrange btnLarge' >"
                                + $(this).attr("ows_LinkText") + "</a>"
                            + "</div></div>"
                            + "</li>";                                                                                  
                      });
                      $("#sliders").append("<ul class='slides'>" + liHtml + "</ul>");
                      $('.flexslider').flexslider({
                        directionNav: true,
                        animation: "slide"
                      });
                    }
                  });
                });