我正在使用输入组文本框,并且需要Bootstrap 3弹出框才能工作,并且弹出框模板应由我定义&n设计。因此,我目前拥有的html是:
<div class="row">
<div class="col-sm-2">
<div class="input-group">
<input type="text" class="form-control jq-timePicker" value="09:30">
<span class="input-group-addon" rel="popover">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
我希望单击输入组图标时打开一个弹出窗口。在这种情况下,当单击带有glyphicon-time类的跨度时,将使用以下HTML或显示一个弹出窗口:
<div class="timePickerWrapper popover">
<div class="arrow"></div>
<div class="popover-content">
<div class="timePickerCanvas"></div>
<div class="timePickerClock timePickerHours"></div>
<div class="timePickerClock timePickerMinutes"></div>
</div>
</div>
JS写道:
$(document).ready(function () {
var popoverTemplate = ['<div class="timePickerWrapper popover">',
'<div class="arrow"></div>',
'<div class="popover-content">',
'<div class="timePickerCanvas"></div>',
'<div class="timePickerClock timePickerHours"></div>',
'<div class="timePickerClock timePickerMinutes"></div>',
'</div>',
'</div>'].join('');
$('body').popover({
selector: '[rel=popover]',
trigger: 'click',
template: popoverTemplate,
placement: "bottom",
html: true
});
});
参见此处的小提琴:http : //www.bootply.com/4fMzxGRpik
谁能帮我纠正我正在做的错误以及显示popvhover时需要做的事情。
您缺少弹出框的内容,您将需要以下内容
$(document).ready(function () {
var popoverTemplate = ['<div class="timePickerWrapper popover">',
'<div class="arrow"></div>',
'<div class="popover-content">',
'</div>',
'</div>'].join('');
var content = ['<div class="timePickerCanvas">asfaf asfsadf</div>',
'<div class="timePickerClock timePickerHours">asdf asdfasf</div>',
'<div class="timePickerClock timePickerMinutes"> asfa </div>', ].join('');
$('body').popover({
selector: '[rel=popover]',
trigger: 'click',
content: content,
template: popoverTemplate,
placement: "bottom",
html: true
});
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句