Fatal编程技术网
  • jquery/
  • Jquery SharePoint 2007折叠区域功能

Jquery SharePoint 2007折叠区域功能

jquery sharepoint-2007

Jquery SharePoint 2007折叠区域功能,jquery,sharepoint-2007,Jquery,Sharepoint 2007,我正在尝试扩展AutoSponge编写的代码 我没有使用来触发事件，而是尝试使用 <input type="image" class="toggleClass" id="LeftRight" value="tr:lt(9)" src="../../img/topcollapse.jpg" /> 及 触发该函数。折叠功能可以工作，但img源不会改变。我想我说得不对，但我一直无法找出原因。提前感谢您在这方面的帮助 <!DOCTYPE html PUBLI

我正在尝试扩展AutoSponge编写的代码

我没有使用
来触发事件，而是尝试使用

<input type="image" class="toggleClass" id="LeftRight" 
       value="tr:lt(9)" src="../../img/topcollapse.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>


//初始化复选框
$（函数（）{
$（“input.toggleClass:image”）。每个（函数（即，e）{
var v=e.值；
var g=GetCookie（v）；//SP函数
var src=（$（“#UpDown”）.attr（“src”）==“img/up\u arrow.bmp”）
如果（g==“1”）{
e、 选中=正确；
$（v.hide（）；
}
});
});
//单击并隐藏元素时设置cookie
$（函数（）{
$（“input.toggleClass:image”）。单击（函数（e）{
var v=$（e.target）.val（）；
var g=GetCookie（v）；
如果（g=“1”）{
$（v.show（）；
SetCookie（v，“，”/”；//SP函数
}否则{
$（v.hide（）；
SetCookie（v，“1”和“/”）；
}
});
});
$（文档）.ready（函数（）{
$（“#向上向下”）.bind（“单击”，函数（）{
var src=（$（“#UpDown”）.attr（“src”）==“../../img/topcollapse.jpg”）
？“./../img/downclapse.jpg”
：“../../img/topcollapse.jpg”；
$（“向上向下”）.attr（“src”，src）；
});
});
$（文档）.ready（函数（）{
$（“#LeftRight”）.bind（“单击”，函数（）{
var src=（$（“#LeftRight”）.attr（“src”）==“../../img/leftcollapse.jpg”）
？“./../img/rightclopse.jpg”
：“../../img/leftcollapse.jpg”；
$（“#LeftRight”）.attr（“src”，src）；
});
});





左导航窗格



顶板




//初始化图像
$（函数（）{
$（“input.toggleClass:image”）。每个（函数（即，e）{
var v=e.值；
var g=GetCookie（v）；//SP函数


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


}))；
//单击并隐藏元素时设置cookie
$（函数（）{
$（“input.toggleClass:image”）。单击（函数（e）{
var v=$（e.target）.val（）；
var g=GetCookie（v）；
如果（g=“1”）{
$（v.show（）；
SetCookie（v，“，”/”；//SP函数
}否则{
$（v.hide（）；
SetCookie（v，“1”和“/”）；
}
});
});

为了测试，我删除了toggleClass函数，并保留了#LeftRight和#UpDown函数。它可以工作一小秒，但页面会刷新并恢复。是否为.blind（“单击”）这样做？我已经测试了输入。切换class:image，它就工作了。上下和左右键在一瞬间工作，导致屏幕在返回前闪烁（在FireFox中测试）。我将在这里留下我的笔记，以帮助任何决定提供帮助的人。谢谢。 
    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();
    }
});