Question

我对JQuery很陌生。放一张有复选框的桌子。单击复选框后，需要弹出一个动态列表。我正在努力做到这一点。

<html>
<head>
<label align="center">Select a watch list </label>
</head>
<body>
<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    <option value="new">Add New</option>
</select>
</body>
</html>

$("a.watchlisttophundred").fancybox({'width' : 200,'height' : 400,'scrolling':'no','transitionIn': 'none','autoScale': false,'transitionOut': 'none','type': 'iframe'});

我想让精美的框子显示在我在表格中选择的行内联

<table class="common_data_grid top20" cellpadding="0" cellspacing="0" width="100%">
<tr>
    <th></th>
    <th>URL <span class="view_report_text">&nbsp;(Click to View Report)</span></th>
    <th>Watch List</th>
    <th width="100">Total Hits</th>
    <th width="350">Percentage of all Hits</th>
</tr>
    {%  if top_twenty_urlentities %}
    {% for top_twenty_url in top_twenty_urlentities %}
<tr>
    <td>{{loop.index}}</td>
    {% if top_twenty_url.url_id.url|replace(domain_url, "")|count == 0 %}
    <td><a class="tooltip" title="{{top_twenty_url.url_id.url}}" href="/tophundredviewreport/?key={{top_twenty_url.url_id.key()}}">{{top_twenty_url.url_id.url|replace(domain_url, "")|replace("", "/")|truncate(length=50, killwords=True, end='...')}}</a></td>
    {% else %}
    <td><a class="tooltip" title="{{top_twenty_url.url_id.url}}" href="/tophundredviewreport/?key={{top_twenty_url.url_id.key()}}">{{top_twenty_url.url_id.url|replace(domain_url, "")|truncate(length=50, killwords=True, end='...')}}</a></td>
    {% endif %}
    <td><a href="/watchlisttophundred" class="watchlisttophundred">watch</a></td>
    <td align="right"><span class="total_hits" title="<div>Facebook Hits: {{top_twenty_url.facebook_count|format_number}} <br/> Twitter Hits: {{top_twenty_url.twitter_count|format_number}} <br/> Google+ Hits: {{top_twenty_url.buzz_count|format_number}} <br/> LinkedIn Hits: {{top_twenty_url.linkedin_count|format_number}} <br/> Digg Hits: {{top_twenty_url.digg_count|format_number}} <br/> Delicious Hits: {{top_twenty_url.delicious_count|format_number}} <br/> Reddit Hits: {{top_twenty_url.reddit_count|format_number}}</div>">{{top_twenty_url.total|format_number}}</span></td>
    {% if top_twenty_url.total > 0 %}
    <td class="progress_td" title="<div>Facebook Hits: {{(top_twenty_url.facebook_count/top_twenty_url.total*100)|round(2)}}% <br/> Twitter Hits: {{(top_twenty_url.twitter_count/top_twenty_url.total*100)|round(2)}}% <br/> Google+ Hits: {{(top_twenty_url.buzz_count/top_twenty_url.total*100)|round(2)}}% <br/> LinkedIn Hits: {{(top_twenty_url.linkedin_count/top_twenty_url.total*100)|round(2)}}% <br/> Digg Hits: {{(top_twenty_url.digg_count/top_twenty_url.total*100)|round(2)}}% <br/> Delicious Hits: {{(top_twenty_url.delicious_count/top_twenty_url.total*100)|round(2)}}% <br/> Reddit Hits: {{(top_twenty_url.reddit_count/top_twenty_url.total*100)|round(2)}}%</div>"><div class="progress">{{(top_twenty_url.total/top_twenty_url.sum_total*100)|round(2)}}</div></td>
    {% else %}
    <td><div class="progress">{{(top_twenty_url.total/top_twenty_url.sum_total*100)|round(2)}}</div></td>
    {% endif %}
</tr>
    {%endfor%}
    {% endif %}

</table>

Answer 1

你可以像这样手动调用fancybox

$("#checkbox_id").click(function() {
     $.fancybox({
        'width'     : 680,
        'height'        : 495,
        'href'          : 'http://blahblah.com',
        'type'          : 'iframe'
    });
    return false;
});

JQuery Fancy Box如何将动态列表填充到由精美框创建的iframe

1 个答案: