Question

我正在尝试扩展由AutoSponge撰写的代码http://www.endusersharepoint.com/2008/12/22/jquery-for-everyone-cleaning-windows-pt2/

我没有使用<input type="checkbox" ... />来触发事件，而是尝试使用

<input type="image" class="toggleClass" id="LeftRight" 
       value="tr:lt(9)" src="../../img/topcollapse.jpg" />

和

<input type="image" class="toggleClass" id="UpDown" 
       value="#TitleAreaImageCell, #LeftNavigationAreaCell" 
       src="../../img/leftcollapse.jpg" />

触发功能。崩溃函数有效，但img源不会改变。我认为我没有正确地说出来，但我无法弄清楚原因。提前感谢您对此的任何帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script type="text/javascript">

         //initialize checkboxes  

         $(function () {

             $("input.toggleClass:image").each(function (i, e) {

                 var v = e.value;
                 var g = GetCookie(v); //SP function
                 var src = ($("#UpDown").attr("src") === "img/up_arrow.bmp")

                 if (g == "1") {    
                     e.checked = true;
                     $(v).hide();
                 }
             });
         });

         //set cookie on click and hide element  

         $(function () {

             $("input.toggleClass:image").click(function (e) {

                 var v = $(e.target).val();
                 var g = GetCookie(v);
                 if (g == "1") {
                     $(v).show();
                     SetCookie(v, "", "/"); //SP function  
                 } else {
                     $(v).hide();
                     SetCookie(v, "1", "/");
                 }
             });
         });

        $(document).ready(function () {
            $("#UpDown").bind("click", function () {
                var src = ($("#UpDown").attr("src") === "../../img/topcollapse.jpg")
                ? "../../img/downcollapse.jpg"
                : "../../img/topcollapse.jpg";
                $("#UpDown").attr("src", src);
            });
        });

        $(document).ready(function () {
            $("#LeftRight").bind("click", function () {
                var src = ($("#LeftRight").attr("src") === "../../img/leftcollapse.jpg")
                ? "../../img/rightcollapse.jpg"
                : "../../img/leftcollapse.jpg";
                $("#LeftRight").attr("src", src);
            });
        });
</script>
</head>

<body>
    <form id="form1" runat="server">
    <div>
    <input type="image" class="toggleClass" id="UpDown" value="#TitleAreaImageCell, #LeftNavigationAreaCell" src="img/leftcollapse.jpg" /><br /><br />
    <input type="image" class="toggleClass" id="LeftRight" value="tr:lt(9)" src="img/topcollapse.jpg" />
    </div>
    </form>
</body>
</html>

Answer 1

Left Nav Pane

Top Panel






//initialize images
$(function() {
    $("input.toggleClass:image").each(function(i,e) {
        var v = e.value;
        var g = GetCookie(v); //SP function

    if (g == "1") {

            if (e.src.indexOf("topcollapse.jpg") >= 0)
              {
                e.src = "/_layouts/images/downcollapse.jpg";
              }
           else {
              if (e.src.indexOf("downcollapse.jpg") >= 0)
                 {
                   e.src = "/_layouts/images/topcollapse.jpg";
                 }
            } 

            if (e.src.indexOf("leftcollapse.jpg") >= 0)
              {
                e.src = "/_layouts/images/rightcollapse.jpg";
              }
           else {
              if (e.src.indexOf("rightcollapse.jpg") >= 0)
                 {
                   e.src = "/_layouts/images/leftcollapse.jpg";
                 }
            } 

        //e.checked = true;
        $(v).hide();
    }
});

if (g == "1") { if (e.src.indexOf("topcollapse.jpg") >= 0) { e.src = "/_layouts/images/downcollapse.jpg"; } else { if (e.src.indexOf("downcollapse.jpg") >= 0) { e.src = "/_layouts/images/topcollapse.jpg"; } } if (e.src.indexOf("leftcollapse.jpg") >= 0) { e.src = "/_layouts/images/rightcollapse.jpg"; } else { if (e.src.indexOf("rightcollapse.jpg") >= 0) { e.src = "/_layouts/images/leftcollapse.jpg"; } } //e.checked = true; $(v).hide(); } });

SharePoint 2007折叠区域功能

1 个答案: