Question

我从CDN加载jQuery PrettyPhoto。我有这个JS来启用键盘的后期导航：

  // Add keyboard navigation for the next & previous post buttons
  $(document).keydown(function (e) {
    var url = false;
    if (e.which == 37) { // Left arrow key code
      url = $('a.prev-post').attr('href'); // change to match the pagination link classes in your theme
    } else if (e.which == 39) { // Right arrow key code
      url = $('a.next-post').attr('href');
    }
    if (url) {
      window.location = url;
    }
  });

我想添加一个布尔值来防止在PP模式打开时执行此代码，但我不确定如何处理它。 PP中的相关代码是：

// Window/Keyboard events
$(window).unbind('resize.prettyphoto').bind('resize.prettyphoto',function(){ _center_overlay(); _resize_overlay(); });

if(pp_settings.keyboard_shortcuts) {
  $(document).unbind('keydown.prettyphoto').bind('keydown.prettyphoto',function(e){
    if(typeof $pp_pic_holder != 'undefined'){
      if($pp_pic_holder.is(':visible')){
        switch(e.keyCode){
          case 37:
            $.prettyPhoto.changePage('previous');
            e.preventDefault();
            break;
          case 39:
          $.prettyPhoto.changePage('next');
          e.preventDefault();
          break;
          case 27:
          if(!settings.modal)
            $.prettyPhoto.close();
            e.preventDefault();
            break;
        };
        // return false;
      };
    };
  });
};

我知道我可以在帖子导航中做这样的事情：

  // Add keyboard navigation for the next & previous post buttons

 var canUseArrows = true;
 $(document).keydown(function (e) {
    var url = false;
    if (e.which == 37 && canUseArrows) { // Left arrow key code
      url = $('a.prev-post').attr('href'); // change to match the pagination link classes in your theme
    } else if (e.which == 39 && canUseArrows) { // Right arrow key code
      url = $('a.next-post').attr('href');
    }
    if (url) {
      window.location = url;
    }
  });

但我不确定如何挂钩PP功能。

感谢您的关注，

Answer 1

似乎不可能＆＃34;挂钩到PP功能＆＃34 ;;但是，我已尝试过以下内容，它对我有用：

  // Add keyboard navigation for the next & previous post buttons
  $(document).keydown(function (e) {
    var url = false,
      // Check if the modal is open/visible.
      canNavi = ! $('.pp_pic_holder').is(':visible');
    if (canNavi && e.which == 37) { // Left arrow key code
      url = $('a.prev-post').attr('href'); // change to match the pagination link classes in your theme
    } else if (canNavi && e.which == 39) { // Right arrow key code
      url = $('a.next-post').attr('href');
    }
    if (url) {
      window.location = url;
    }
  });

Answer 2

这可能会更有效率。

    for port in list(self._encoders):
        self.stop_recording(splitter_port=port)
    assert not self.recording
    for overlay in list(self._overlays):
        self.remove_overlay(overlay)
    if self._preview:
        self._preview.close()
        self._preview = None
    if self._splitter:
        self._splitter.close()
        self._splitter = None
    if self._camera:
        self._camera.close()
        self._camera = None
    exc, self._camera_exception = self._camera_exception, None
    if exc:
        raise exc

}）;

来自jQuery文档：

因为：visible是一个jQuery扩展而不是CSS规范的一部分，使用：visible的查询无法利用   本机DOM querySelectorAll（）提供的性能提升   方法。使用时可获得最佳性能：可见选择   元素，首先使用纯CSS选择器选择元素   使用.filter（＆＃34 ;:visible＆＃34;）。



大量使用此选择器可能会影响性能，因为它可能会强制浏览器重新呈现页面，然后才能确定   能见度。通过其他方法跟踪元素的可见性，   例如，使用类可以提供更好的性能。

当PrettyPhoto模式打开时，禁用键盘导航（Wordpress）

2 个答案: