SharePoint 2007 Collapse Regions Function
I am trying to expand on the code authored by AutoSponge
http://www.endusersharepoint.com/2008/12/22/jquery-for-everyone-cleaning-windows-pt2/Instead of using <input type="checkbox" ... /> to trigger the event, I am trying to use
<input type="image" class="toggleClass" id="LeftRight"
value="tr:lt(9)" src="../../img/topcollapse.jpg" />
and
<input type="image" class="toggleClass" id="UpDown"
value="#TitleAreaImageCell, #LeftNavigationAreaCell"
src="../../img/leftcollapse.jpg" />
to trigger the function. The collapse f开发者_开发知识库unctions works but the img source does not change. I think that I am not calling it out correctly but I have not been able to figure out why. Thank you in advance for any help on this.
<!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>
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", "/"); } }); });
加载中,请稍侯......
精彩评论