Блог

Главная - Вопросы по программированию - Функция свертывания регионов SharePoint 2007

Функция свертывания регионов SharePoint 2007

#jquery #sharepoint-2007

#jquery #sharepoint-2007

Вопрос:

Я пытаюсь расширить код, созданный 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>

Комментарии:

1. В целях тестирования я удалил функцию переключения классов и оставил функции #LeftRight и #UpDown. Это работает в течение короткой секунды, но страница обновляется и возвращается обратно. Это делает .blind («щелчок»)?

2. Я протестировал input.toggleClass: image, и он работает. #UpDown и #LeftRight работают в течение доли секунды, вызывая мигание экрана (тестирование в FireFox), прежде чем он вернется обратно. Я оставлю здесь свои заметки, чтобы помочь любому, кто решит помочь. Спасибо.

Ответ №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();
    }
});

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