2011-05-20 56 views
0

我试图通过AutoSponge
而不是使用<input type="checkbox" ... />触发事件的撰写http://www.endusersharepoint.com/2008/12/22/jquery-for-everyone-cleaning-windows-pt2/SharePoint 2007的坍缩区域功能

代码扩大,我想使用

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

出于测试的目的,我除去toggleClass功能和离开#LeftRight和#UpDown功能。它在短时间内工作,但页面会刷新并恢复。是否.blind(“点击”)这样做? – Austin 2011-05-23 18:07:16

+0

我已经测试了input.toggleClass:图像,它的工作原理。 #UpDown和#LeftRight在瞬间工作,导致屏幕在恢复之前闪烁(在FireFox中测试)。我会在这里留下笔记以协助任何决定提供帮助的人。谢谢。 – Austin 2011-05-24 16:44:53

回答

0

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

}); //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", "/"); } }); });

+0

有人可以帮我编辑它吗? – Austin 2011-06-01 16:14:45