Не удается заставить FancyBox работать должным образом, когда он внутри контейнера изначально не отображается - PullRequest
1 голос
/ 28 февраля 2012

Я пытался решить эту проблему в течение нескольких часов сегодня.Я достиг (каким-то образом) решения, но не работает должным образом.

Я новичок в мире jQuery, поэтому постараюсь быть ясным.В моем примере у меня есть страница xhtml, которая включает в себя еще одну страницу xhtml с тегом <ui:include>.Страница, которая включена, я не отрендерена (из-за всех изображений).Когда она отображается через <p:commandLink>, страница отображается со всеми изображениями правильно.* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *} * * * * *} Когда картинка окончательно отображается и я впервые нажимаю <h:ouputLink>, fancyBox не показывает fancyBox., но последующие клики открывают fancyBox, и он работает правильно.Я не могу понять, почему.Я использую jsf2, PrimeFaces 3.02, FancyBox 1.7.Мой код:

main.xhtml

    <--Main xhtml-->
<h:form id="myForm">
    <h:panelGrid id="panelGridMain"
        rendered="#{myBean.actualPage eq 'main'}">
        <p:commandLink
            id="showIncludedPage"
            actionListener="#{myBean.setPage('test')}"
            update="@form">
            <h:graphicImage value="/Image/TbnPic1.jpg"/>
        </p:commandLink>
    </h:panelGrid>

    <h:panelGroup id="myTestPanel"  rendered="#{myBean.actualPage eq 'test'}">
        <ui:include src="test.xhtml" />
    </h:panelGroup>
</h:form>

Test.xhtml

<ui:component xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:c="http://java.sun.com/jsp/jstl/core">

    <h:outputLink value="/Images/Pic1.jpg" id="example1" title=""  >
            <h:graphicImage alt="example1" value="/Images/TbnPic1.jpg" />
    </h:outputLink>
</ui:component>

Наконец-то мой код jQuery

$(document).ready(
    function() {        
        $("#myForm\\:example1").live("click",function(e) {
            alert(e.isDefaultPrevented());
            if (! e.isDefaultPrevented()){
                e.preventDefault();
            }
            $(this).fancybox();
          });
});

Некоторые восклицания:

* Я отмечаю, что .on() рекомендуется, но у меня это не сработало, мне нужно сделать больше тестов.

* Мне пришлось добавить e.preventDefault () к моему.js, потому что когда я нажимал на ссылку, чтобы открыть всплывающее окно fancyBox, ссылка перенаправляла на URL, содержащий фотографию (например: localhost: 8080 /../ Images / Pic1.jpg)

*, еслиПервоначально страница была обработана, fancyBox работал правильно.

Спасибо за любую помощь, надеюсь, вы можете понять проблему =)

Ответы [ 3 ]

2 голосов
/ 28 февраля 2012

Делайте работу в oncomplete вместо <p:commandLink>.

<p:commandLink
    id="showIncludedPage"
    actionListener="#{myBean.setPage('test')}"
    update="@form"
    oncomplete="$('#myForm\\:example1').fancybox()">
    <h:graphicImage value="/Image/TbnPic1.jpg"/>
</p:commandLink>

Что касается ваших вопросов:

Когда включеностраница, наконец, отображается, и я нажимаю в первый раз, когда fancyBox не отображается, но последующие щелчки открывают fancyBox, и он работает правильно.Я не могу понять, почему.

Fancybox должен быть применен до того, как пользователь нажмет на ссылку.


Я отмечаю, что .on () рекомендуется, но он не работает для меня, мне нужно сделать больше тестов.

Это новое в jQuery 1.7.Насколько я знаю, PF 3.0.x поставляется с jQuery 1.6.Затем .delegate() рекомендуется более .live().Тем не менее, вы не можете использовать их для прямого манипулирования элементами при их новом добавлении.Вы можете использовать их только в будущих событиях, таких как click, hover и т. Д.


Мне пришлось добавить e.preventDefault () в мой .js, потому что когдая нажал на ссылку, чтобы открыть окно fancyBox, ссылка была перенаправлена ​​на URL, содержащий фотографию (например: localhost: 8080 /../ Images / Pic1.jpg)

Thisнормально.JavaScript не берет на себя поведение элемента по умолчанию.Это просто добавляет поведение.Если вы хотите заблокировать поведение по умолчанию, вам действительно нужно вызвать e.preventDefault() или, в случае live() лучше, return false;.Внимательно прочитайте jQuery.live() документацию API .

1 голос
/ 02 мая 2013

Насколько я понимаю, сначала нужно инициализировать fancybox в $(document).ready. Если вы этого не сделаете, то при первом событии клика fancybox инициализирует себя и последующие клики будет работать так, как должно. После инициализации, если вы связываете fancybox с каким-либо событием, оно должно работать одним щелчком мыши. У меня была похожая проблема, и она отлично сработала.

$(document).ready(function() {    

    $("#myForm\\:example1").fancybox();

    $("#myForm\\:example1").live("click",function(e) {
          alert(e.isDefaultPrevented());
          if (! e.isDefaultPrevented()){
                e.preventDefault();
          }
          $(this).fancybox();
    });
});
1 голос
/ 28 февраля 2012

В написанном вами коде jQuery то, что вы делаете в событии click:

$(this).fancybox();

Таким образом, вы применяете fancybox при первом щелчке по ссылке.Вот почему, когда вы нажимаете на ссылку во второй раз, fancybox открывается идеально.Вы можете исправить это поведение, применяя fancybox при загрузке страницы, поэтому вам придется изменить код jQuery следующим образом:

$(document).ready(
    function() {        
        $("#example1").fancybox();
    }
);

Что это будет делать, это применить fancybox непосредственно к ссылке с идентификатором 'example1 'при загрузке страницы, и fancybox откроется при первом нажатии.

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...