Question

我在jQuery对话框（http://jqueryui.com/demos/dialog/）中显示iframe（带有视频）。我想要展示两种尺寸的视频。所以，我想让对话框提出不同的高度和宽度规格。取决于页面上单击的链接。

弹出对话框的功能是在一个创建HTML头的php文件中。那就是......

  jQuery(document).ready(function() {
        jQuery("a.videobox").click(function(e) {
            e.preventDefault();
            var d = jQuery('<iframe src="' + this.href + '" />');
            d.dialog({
                title: this.title,  // allow video title to be specified like this: '<a href="..." title="..." ...'
                autoOpen: true,
                width: 800,
                height: 600,
                modal: true,
                resizable: true,
                autoResize: true,
                show: 'blind',
                hide: 'explode',
                open: function(event, ui) { jQuery('.ui-icon-closethick').html(''); }  // remove the 'close' caption that overlaps with 'x' button
            }).width("100%");
        });
    });


jQuery(document).ready(function() {
        jQuery("a.videobox_smaller").click(function(e) {
            e.preventDefault();
            var d = jQuery('<iframe src="' + this.href + '" />');
            d.dialog({
                title: this.title,  // allow video title to be specified like this: '<a href="..." title="..." ...'
                autoOpen: true,
                width: 500,
                height: 300,
                modal: true,
                resizable: true,
                autoResize: true,
                show: 'blind',
                hide: 'explode',
                open: function(event, ui) { jQuery('.ui-icon-closethick').html(''); }  // remove the 'close' caption that overlaps with 'x' button
            }).width("100%");
        });
    });

所以，我在想像......

<a title="Bigger Size" href="bigger_video.html" class="videobox">Play the Bigger Video</a>

和...

<a title="Smaller Size" href="smaller_video.html" class="videobox_smaller">Play the Smaller Video</a>

但随后点击，将根据点击的链接设置该类。

我对javascript一无所知，所以我不知道如何解决这个问题。我也不知道我建议的解决方案是否可行，但它不起作用。

思考？谢谢。

Answer 1

从样式列表中创建对话框值，包括类定义中的样式

（即class="video:sm"）

<a href="foo.html" class="video:sm">small video</a>
<a href="bar.html" class="video:lg">large video</a>
<script>
(function($){
    var dialogStyles = {
        sm:{height:500,width:300},
        lg:{height:1200,width:800},
        sm_nomodal:{height:500,width:300,modal:false},
        lg_nomodal:{height:1200,width:800,modal:false}
    }
    $('[class*="video:"]').each(function(){
        var type = $(this).attr("class").match(/video:([-\w]+)/)[1];
        $(this).click(function(){
            var defaults = {
                title:$(this).attr("title"),
                autoOpen: true,
                width: 400,
                height: 400,
                modal: true,
                resizable: true,
                autoResize: true,
                show: 'blind',
                hide: 'explode',
                open: function(event, ui) { $('.ui-icon-closethick').html(''); }
            }
            var o = $.extend(defaults,dialogStyles[type]);
            // im trusting your open dialog code
            $('<iframe src="' + $(this).attr("href") + '" />').dialog(o);
            return false;
        }); 
    });
})(jQuery)
</script>

你可以打高尔夫球，但我为后人留下了详细信息：）

在<a> tag</a>中为jQuery对话框指定高度和宽度

1 个答案: