在对话框中放置一个div [英] Placing a div inside a dialog box

问题描述

我正在创建一个jQuery插件，当用户在网页上选择一个表格时，该插件向用户显示一个条形图。
我可以在同一页面上呈现表格。有什么办法可以把这个表放在对话框中吗？我从来没有使用对话框，所以我试着把一个div放在一个新窗口中使用：

  var popup = window.open （ '关于：空白'， '指示'， '宽度= 300，高度= 200'）; 
 popup.onload = function（）{
 jQuery（popup.document.body）.append（。chart）; 
} 
  

其中我的div是< div class =图表>< / div>

但它只是打开一个空白窗口。

这是我在工作的jsfiddle，它将图表呈现在同一页面上：

function getSelected（）{if（window.getSelection）{return window.getSelection（）; } else if（document.getSelection）{return document.getSelection（）; } else {var selection = document.selection&& document.selection.createRange（）; if（selection.text）{return selection.text; }返回false; }返回false;} $（table）.on（'click'，function（）{var selection = getSelected（）; if（selection）{var data = []; var vals = $（'＃test'） .find（'td'）。filter（function（）{//只获取包含数值的td>返回$ .isNumeric（this.innerHTML）;}）。each（function（i，val）{ data.push（val.innerHTML）;}）; var x = d3.scale.linear（）.domain（[0，d3.max（data）]）.range（[0，420]）; d3.select .chart）.selectAll（div）.data（data）.enter（）。append（div）.style（width，function（d）{return x（d）+px; }）.text（function（d）{return d;}）; // alert（data）;}}）;

  .chart div {font：10px sans-serif; background-color：steelblue; text-align：right;填充：3px; margin：1px; color：white;}  

 < div class =chart >< / DIV> < table id =teststyle =width：100％> < TBODY>< TR> < TD>吉尔< / TD> < TD> 21< / TD> < TD> 50℃; / TD> < / TR> < TR> < TD>前夕< / TD> < TD> 13< / TD> < TD> 94℃; / TD> < / tbody>< / table>  

p>任何帮助表示赞赏。谢谢。


解决方案

就javascript对话框而言，您的选项在某种程度上仅限于您可以执行的操作。例如，换行符< br /> 不能用于对话框。您将不得不使用新行字符 \\\
。如果你需要在盒子中渲染某种HTML，我会推荐使用不同的东西，比如花式框。这里是查看一些例子的链接。它支持各种各样的内容，如图片，视频和静态HTML。

http://fancyapps.com/fancybox/#examples

I am creating a jQuery plugin which shows the user a bar graph when a user selects a table on a webpage. I am able to render the table on the same page. Is there any way I can put this table in a dialog box? I have never worked with dialog box so I instead tried putting a div in a new window using :

var popup = window.open('about:blank','instructions','width=300,height=200');
popup.onload = function() {
    jQuery(popup.document.body).append(".chart");
}

where my div is <div class="chart"></div>

But it just opens a blank window.

This is my working jsfiddle that renders the chart on the same page:

function getSelected() {
    if (window.getSelection) {
        return window.getSelection();
    } else if (document.getSelection) {
        return document.getSelection();
    } else {
        var selection = document.selection && document.selection.createRange();
        if (selection.text) {
            return selection.text;
        }
        return false;
    }
    return false;
}
$( "table" ).on('click', function() {
    var selection = getSelected();

    if (selection) {
        var data = [];
        var vals = $('#test').find('td').filter(function () {
            //get only <td> that contain numeric value inside it
            return $.isNumeric(this.innerHTML);
        }).each(function (i, val) {
            data.push(val.innerHTML);
        });
var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });
     //alert(data);
    }
});

    .chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

<div class="chart"></div>
  <table id="test" style="width:100%">
    <tbody><tr>
        <td>Jill</td>
        <td>21</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>13</td>
        <td>94</td>
    </tr>
</tbody></table>

Any help is appreciated. Thanks.

解决方案

As far as javascript dialog boxes, your options are somewhat limited to what you can do. For example, a line break <br/> cannot be used with a dialog box. You would have to use the new line character \n. If you need to render some sort of HTML in a "box" I would recommend using something different such as fancy box. Here is link to view some examples. It supports a wide range of things such as images, videos and static HTML.

http://fancyapps.com/fancybox/#examples

这篇关于在对话框中放置一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！