0

我从不研究这些类型的东西。

我的 html 页面中有一个 textField。它的代码在下面。

<div class="span4 mr1 shelflifeDiv">
        <input type="text" id="shelfLifeField" name="Shelf Life" placeholder="Shelf Life" class="po1 pull-right" data-toggle="popover" data-placement="bottom" data-html=true data-trigger="click" data-content> 
    </div>

我的要求是，如果您单击该字段，我想显示弹出框，为此我的网页设计师给出了以下模板。

 <script id="shelflifePopover" type="text/x-handlebars-template"> 
    <div class='row-fluid'>
            <div class='span8'><span>Maximum Time</span></div>
            <div class='span8'><input type='text' id='po1_maxtime' placeholder='Shelf life' class='mr2' disabled></div>
    </div>
</script>

他说，当你想在 textField 之上渲染 popover 时，只需将模板代码添加到data-contenttextField 的属性中即可。

根据他的建议，setAttribute当字段处于聚焦状态时，使用我附加了该模板代码。

如果光标超出文本字段，我想删除（隐藏）文本字段顶部的弹出框。

我尝试将模板代码添加到 data-content 属性，但它不起作用。

var ele=document.getElementById("shelfLifeField");
//I compiled template code and assigned to compileCode variable. 
ele.setAttribute("data-content",compileCode);

请任何人都可以帮助我，我完全被困在这里。

谢谢

4

1 回答 1

1

您可以使用以下 jquery 代码显示引导弹出窗口，请在此处查看工作小提琴

$(function () {
                var showPopover = function () {
                    $(this).popover('show');
                }
                , hidePopover = function () {
                    $(this).popover('hide');
                };

                $('#fb').popover({
                    content: 'Facebook',
                    trigger: 'hover',
                    placement:'top'
                })
            $('#tw').popover({
                    content: 'Twitter',
                    trigger: 'hover',
                    placement:'top'
                }) 
            $('#tb').popover({
                    content: 'tumblr',
                    trigger: 'hover',
                    placement:'top'
                })  
            $('#fl').popover({
                    content: 'flickr',
                    trigger: 'hover',
                    placement:'top'
                })  
            $('#yt').popover({
                    content: 'youtube',
                    trigger: 'hover',
                    placement:'top'
                })            
                .focus(showPopover)
                .blur(hidePopover)
                .hover(showPopover, hidePopover);
            });
于 2013-11-15T11:40:51.647 回答