Динамический вызов fancybox

Question

Динамический вызов fancybox

Я хочу динамически вызывать fancybox для загрузки iframe. URL-адрес iframe будет состоять из некоторых элементов формы. Я использую что-то вроде этого, и это работает:

<!--***************************************************************-->

<!--this allows fancybox to be called using a dynamic link-->

<div id="hidden_clicker" style="display:none">

    <a class="various fancybox.iframe" id="hiddenclicker" href="http://whatever.com" >Hidden Clicker</a>

</div>

<!--***************************************************************-->

Затем сценарий:

<script type="text/javascript">

    $(document).ready(function() {

        $(".various").fancybox({

            maxWidth    : 800,

            maxHeight   : 600,

            fitToView   : false,

            width       : '70%',

            height      : '70%',

            autoSize    : false,

            closeClick  : false,

            openEffect  : 'elastic',

            closeEffect : 'none'

        });

    });



    function callBoxFancy(my_href) {



        var j1 = document.getElementById("hiddenclicker");



        j1.href = my_href;



        $('#hiddenclicker').trigger('click');



    }

Затем, чтобы загрузить iframe:

    $('#addtownsubmit').click(function() {

        var $url='/areastructure/addtown/';

        var $get='countryid/'+ ($('#country').val()) + '/regionid/'+ ($('#region').val())+ '/provinceid/'+ ($('#province').val())+ '/originatingcontroller/account/originatingaction/editcontactdetails/'

        callBoxFancy($url+$get+'iframe/1');

    return false;



});

Есть ли способ улучшить этот код, чтобы мне не пришлось включать html-код. Конечно, jquery мог бы создать этот скрытый div для меня?

436 2

jQuery

2 ответов:

Comments

Ничего не найдено.

karim79 · Accepted Answer · 2012-02-13 01:40:33

Вам просто нужно создать элементы на лету и добавить их в тело документа. Например:

var $div = $("<div id='hidden_clicker'/>").hide();
var $a = $("<a class='various fancybox.iframe' id='hiddenclicker' href='http://whatever.com'>Hidden Clicker</a>");

$div.append($a);
$("body").append($div);

dimbo · Accepted Answer · 2012-02-13 13:51:41

Я расширил идею, которую дал мне Карим, и сделал следующее:]}

<script type="text/javascript">

    jQuery(document).ready(function(){jQuery("#FormContactDetails").validationEngine()});

        function callBoxFancy(my_href,type) { // type could be 'iframe', 'ajax' etc.
            var $div = $("<div id='hidden_clicker'/>").hide();
            var $a = $("<a class='ondemand fancybox."+type+"' id='hiddenclicker' href='"+my_href+"' >Hidden Clicker</a>");

            $(".ondemand").fancybox({
                maxWidth    : 800,
                maxHeight   : 600,
                fitToView   : true,
                width       : '70%',
                height      : '70%',
                autoSize    : true,
                closeClick  : false,
                openEffect  : 'elastic',
                closeEffect : 'none'
            });

            $div.append($a);
            $("body").append($div);
            $('#hiddenclicker').trigger('click');
            $("#hiddenclicker").remove();

        }


        $('#addtownsubmit').click(function() {
            var $url='/areastructure/addtown/';
            var $get='countryid/'+ ($('#country').val()) + '/regionid/'+ ($('#region').val())+ '/provinceid/'+ ($('#province').val())+ '/originatingcontroller/account/originatingaction/editcontactdetails/'
            callBoxFancy($url+$get+'iframe/1','iframe');
            return false;

        });

</script>