Выборка элиментов "a"

Тема в разделе "Другие языки", создана пользователем CrashX, 28 фев 2011.

Модераторы: Цукер
  1. CrashX

    CrashX В прошлом XSiteCMS

    Регистр.:
    6 июн 2008
    Сообщения:
    682
    Симпатии:
    112
    PHP:
    $(document).ready(function(){  
      $(
    "a[rel!='#overlay']").click(function() {
        var 
    src = $(this).attr("href");  //Получаем href ссылки, по которой кликнули
        
    alert(src);
        $(
    '#contents').load(src);  //В слой #content аяксом загружаем урл в href ссылки.
        //$('#contents').load($(this).attr('href'));
        
    return false// эквивалентно вызову event.preventDefault(); и event.stopPropagation();
      
    });
    });
    ссылку получаю без проблем, алертом отрабатывает на ура, но ничего не происходит если убираю [rel!='#overlay'] все работает, но при этома не работают модаьлные окна тк они назначаются на a[rel^='#overlay']
     
  2. Conwell

    Conwell

    Регистр.:
    23 мар 2009
    Сообщения:
    337
    Симпатии:
    177
    Не совсем понятно из этого кусочка кода, что куда назначается. По коду видно, что первой строчкой выбираются все "a" у которых атрибут "rel" не равен "#overlay". Возможно при выводе имеет смысл сменить атрибут на основании которого делается выборка?
    ниже написано что модальные окна назначаются на "a" у которых атрибут "rel" начинается с "#overlay". Может немного по другому реализовать выборку?
     
  3. CrashX

    CrashX В прошлом XSiteCMS

    Регистр.:
    6 июн 2008
    Сообщения:
    682
    Симпатии:
    112
    полный код
    Код:
    
    
    /**
     * Настройка jQuery
     * сжатие http://dean.edwards.name/packer/
     */
    $(document).ready(function(){
      jQuery.ajaxSettings.cache=true;
      // Добавление контейнера анимации
      $('body').append('<div id="loading" style="display:none;"><img src="/images/common/loader.gif" /></div>');
      // Добавление контейнера окон
      $('body').append('<div class="overlay" id="overlay"><div class="modalbox" id="modalbox"></div></div>');
      // Анимация загрузки на все события связаные с активностью ajax
      $("#loading").bind("ajaxSend", function() {
        $(this).fadeIn(750);//show();
      }).bind("ajaxStop", function() {
        $(this).hide();
      }).bind("ajaxError", function() {
        $(this).hide();
      });
    });
    
    /**
     * Загрузка данных хранящихся в ссылке
     * в основной div
     */
    $(document).ready(function(){
      $("a[rel!='#overlay']").click(function() {
        $('#contents').load($(this).attr('href')); //В слой #content аяксом загружаем урл в href ссылки.
        return false; // эквивалентно вызову event.preventDefault(); и event.stopPropagation();
      });
    });
    
    /**
     * Создание модального окна
     * загрузка данных хранящихся в ссылке с rel='#overlay'
     */
    $(document).ready(function(){
      $("a[rel='#overlay']").overlay({
        mask: {
          color: '#fff',
          loadSpeed: 250,
          opacity: 0.75
        },
        left: 'center',
        top: '25%',
        oneInstance: true,
        closeOnClick: false,
        onBeforeLoad: function() {
          var wrap = this.getOverlay().find("#modalbox");
          wrap.load(this.getTrigger().attr("href"));
        },
        onBeforeClose: function() {
          $("#modalbox").html('');
        }
      });
    });
    /**
     * Печать страницы
     *  с rel='#print'
     */
    function xprint() {
      $(document).ready(function() {
        $("a[rel='#print']").click(function() {
          var open, index;
          $("a[rel='#overlay']").each(function(i) {
            if($("a[rel='#overlay']").eq(i).data('overlay').isOpened()) {
              open=true;
              index=i;
            }
          });
          if(open) {
            $("a[rel='#print']").jprint();
          } else {
            window.focus();
            window.print();
          };
        });
      });
    }
    /**
     * Обработка форм с id x-form
     * отправка данных
     */
    function xform() {
      $(document).ready(function(){
        var options = {
          //target: "#modalbox",
          //url: "{action}",
          //  beforeSubmit: Loading, //Request, // функция, вызываемая перед передачей
          success: Response, // функция, вызываемая при получении ответа
          type: "post", // get или post
          dataType: "html", // text, hmtl, xml, script или json
          //clearForm: true,
          //resetForm: true,
          timeout: 10000 // ожидание ответа в милисекундах
        };
        $("form[id^='x-form']").submit(function () {
          $(this).ajaxSubmit(options);
          return false;
        });
      });
    }
    //*/
    /**
     * Отладочная функция,
     * отображение того что будет передаватся
     */
    function Request(formData, jqForm, options) {
      var queryString = $.param(formData);
      alert(queryString);
      return true;
    }
    
    /**
     * Обработка получаемого ответа
     * переменная должна соотвествовать возвращаемому типу, данных (html, xml, json)
     * @param response
     */
    function Response(responseText) {
      var open,index;
      $("a[rel='#overlay']").each(function(i) {
        if($("a[rel='#overlay']").eq(i).data('overlay').isOpened()) {
          open=true;
          index=i;
        }
      });
      if(open) {
        $("#modalbox").html(responseText);
        if ( responseText.length < 1 ) {
          $("a[rel='#overlay']").eq(index).data('overlay').close();
        }
      } else {
        $("#contents").html(responseText);
      };
    }
    
    
    я все поправил, в 1 месте заменял событие)
    суть такая
    у меня есть плагин jQuery.tools.overlay
    это модальное окно в нем я делаю разные вещи, оно вызывается так же ссылками, только с рел=оверлей, и мне нужно было если не оверлей то загружать в тело страницы


    есть только вопрос по оптимизации кода

    Код:
     $("a[rel='#overlay']").each(function(i) {
        if($("a[rel='#overlay']").eq(i).data('overlay').isOpened()) {
          open=true;
          index=i;
        }
      });
    
    можно ли уменьшить количество обращений к поиску элементов $("a[rel='#overlay']")
    например заменив this будет ли это правильно ?
     
  4. Conwell

    Conwell

    Регистр.:
    23 мар 2009
    Сообщения:
    337
    Симпатии:
    177
    Перечитал еще раз про желание уменьшить количество обращений к поиску, может просто задать переменную в которой сразу будут храниться выборки, и работать уже с этими переменными?
    "this" в JS можеть быть использована как элемент DOM или как Object JQuery, почитать имеет смысл тут:
    http://remysharp.com/2007/04/12/jquerys-this-demystified/
    в данном контексте смысла заменять по моему нет.
     
    XSiteCMS нравится это.
  5. CrashX

    CrashX В прошлом XSiteCMS

    Регистр.:
    6 июн 2008
    Сообщения:
    682
    Симпатии:
    112
    если я правильно выкурил ман то
    скажем эта фукнция должна приобрести примерно такой вид

    Код:
    /**
     * Обработка получаемого ответа
     * переменная должна соотвествовать возвращаемому типу, данных (html, xml, json)
     * @param response
     */
    function Response(responseText) {
      var open,index;
      var overlay=$("a[rel='#overlay']");
      overlay.each(function(i) {
        //if($("a[rel='#overlay']").eq(i).data('overlay').isOpened()) {
        if(overlay.eq(i).data('overlay').isOpened()) {
          open=true;
          index=i;
        }
      });
      if(open) {
        $("#modalbox").html(responseText);
        if ( responseText.length < 1 ) {
          //$("a[rel='#overlay']").eq(index).data('overlay').close();
          overlay.eq(index).data('overlay').close();
        }
      } else {
        $("#contents").html(responseText);
      };
    }