将侧边栏内容添加到单个jquery ui对话框drupal 7

时间:2018-01-03 15:43:35

标签: javascript jquery jquery-ui drupal drupal-7

我正在研究drupal 7网站,并使用jquery ui对话框模块进行模态功能。

当用户点击看起来像这样的链接时,我有大约5个对话框(模态)启动

<a href="path-to-content" target="[dialog]">ENLARGE</a>

href内容链接到使用jquery_filter_dialog.js中的这些代码行拉入iframe的图像

// Set dialog URL with ?dialogFeature= parameters.
  url = Drupal.jQueryUiFilter.dialogFeaturesAppendToURL(url, options['dialogFeatures']);

//Create iframe
    $('body').append(
        '<div id="jquery-ui-filter-dialog">' +
            '<div id="jquery-ui-filter-dialog-container">' +
            '<iframe id="jquery-ui-filter-dialog-iframe" name="jquery-ui-filter-dialog-iframe" width="80%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="' + options['scrolling'] + '" src="' + url + '" />' +
            '</div>' +
        '</div>'
    );

现在主要问题 - 我想要做的是为每个不同的对话框添加一个带有描述性内容(文本和按钮以下载pdf)的iframe的侧边栏。

到目前为止,我所做的是一个黑客,我检查url值并通过变量直接在js文件中传递自定义内容,就像这样。

if(url == 'http://path-to-content-1.jpg?dialogFeatures=protocol=http'){
        sidebarTitle = 'Title 1';
        sidebarDescription = 'Optional Description for Title 1 - Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec felis mattis, placerat velit a, consectetur purus.';
        singleDownload = '/sites/default/files/media/path-to-content-1.pdf';
}
if(url == 'http://path-to-content-2.jpg?dialogFeatures=protocol=http'){
        sidebarTitle = 'Title 2';
        sidebarDescription = 'Optional Description for Title 2 - Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec felis mattis, placerat velit a, consectetur purus.';
        singleDownload = '/sites/default/files/media/path-to-content-2.pdf';
}

并自定义附加的html

$('body').append(
  '<div id="jquery-ui-filter-dialog">' +
    '<div id="jquery-ui-filter-dialog-container">' +
      '<iframe id="jquery-ui-filter-dialog-iframe" name="jquery-ui-filter-dialog-iframe" width="80%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="' + options['scrolling'] + '" src="' + url + '" />' +
        '<div class="dialog-info-sidebar">' +
            '<h2 class="sidebar-title">' + sidebarTitle + '</h2>' +
            '<p class="sidebar-description">' + sidebarDescription + '</p>' +
            '<div class="download_now btn-blue">' +
            '<a class="views-ajax-processed-processed colorbox-node colorbox-inline init-colorbox-inline-processed cboxElement init-colorbox-node-processed-processed" href="' + singleDownload + '">' + "DOWNLOAD THIS INFOGRAPHIC" + '</a>' +
           '</div>' +
        '</div>' +
     '</div>' +
  '</div>'
);

这会按预期显示每个对话框中的自定义内容,但显然是非常糟糕的做法 - 我不知道如何自定义此模块,以便理想情况下用户可以在首次调用时输入标题,说明,下载按钮链接和其他内容使用a标签的对话框的使用。

之前有没有人使用过这个模块?

0 个答案:

没有答案