我尝试使用venobox lightbox允许用户在页面上选择用户生成的项目并编辑其内容。 u-g项目有一个用jQueryUI创建的按钮：
<span class='ui-icon ui-icon-pencil'></span>
我想点击它，并在venobox灯箱中显示一个编辑表格。 Venobox提供了一个非常好的iframe选项。要打电话给venobox，我需要做一些像
这样的事情<a class='venobox_custom' data-type='iframe' href='http://www.sample.com/editform.html'>open iFrame</a>
因此我无法使用"window.location = url"如何使用网址指定类和数据类型？
没有太多希望，我尝试在跨度中插入完整的锚文本，但没有任何显示单击并单击按钮不会调用venobox。
我的.on("click")逻辑工作正常，只是没有调用 venobox 。
7月27日编辑
我已将代码设置为缩减形式并且可在此处运行： http://www.informationtamers.com/venoboxtest/index.html
我已经尝试了iframe和内联选项，这段代码演示了它们，但是他们不会调用Venobox。还有一个硬链接显示Venobox工作但不是我需要使用它的方式。
以下是代码：
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="todo.css"/>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<!-- venobox is a jquery lightbox plugin -->
<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />
<title>UG list</title>
</head>
<body>
<p>I've removed as much of the functionality as I can, like getting users' previously-added content from a JSON file, saving it after changes, sanitizing user content, and so on.</p>
<p>First, add a line by pressing Add.<br/>
While experimenting with venobox, I've made that generate two lines:
The first uses venobox's 'inline' option, the second, its 'iframe' option.</p>
<div id="inputs" class="textIn">
<form name="checkListForm" >
<input type="text" id="textEntry" name="userEntry" style="width: 99%; height:25px"/>
</form>
</div>
<div id="controls" style="width: 100%">
<div id="buttonItem">Add</div>
</div>
<ul class="list">
</ul>
<p>Once you've added a line, click the blue pencil button that appears on the right of the first line. This doesn't appear to invoke venobox, although console.log entries show that it's passing through the on-click code.</p>
<p>Then click the blue pencil button that appears on the right of the second line. This loads editform.html into the browser window directly instead of showing it in a lightbox. It appears to be treating it as a normal hyperlink.</p>
<p>The behavior I'm trying to get can be seen if you click this link (uses the 'inline' option):<br/>
<center><a class='venobox_custom' data-type='inline' href='#lightboxform'><b>open inline form in lightbox</b></a></center><br/>
<div id="lightboxform" style="display:none">
<div class="textIn">
<form name="editForm" >
<input type="text" id="textEdit" name="userEdit" style="width: 99%; height:25px"/>
</form>
</div>
<div id="controls" style="width: 100%">
<div id="buttonItem">Save changes</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!-- Add venobox (a jquery lightbox plugin) -->
<script type="text/javascript" src="venobox/venobox.min.js"></script>
<script>
// ƒ to MOVE new user input to a <li> item
function sendLineToDOM (lineType) {
var toAdd = $('input[name=userEntry]').val();
if (toAdd == null || toAdd == "") {
console.log('empty');
}
else {
// two lines generated here while experimenting with venobox
// this uses venobox's 'inline' option
$('.list').prepend("<li><span class='" + lineType + "'><span class='handle'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span></span>" + "iframe: " + toAdd + "<span class='edit'><a class='venobox_custom' data-type='iframe' href='editform.html'><span class='ui-icon ui-icon-pencil'></span></a></span><span class='delete'><span class='ui-icon ui-icon-trash'></span></span></span></li>");
// this uses venobox's 'iframe' option
$('.list').prepend("<li><span class='" + lineType + "'><span class='handle'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span></span>" + "inline: " + toAdd + "<span class='edit'><a class='venobox_custom' data-type='inline' href='#lightboxform'><span class='ui-icon ui-icon-pencil'></span></a></span><span class='delete'><span class='ui-icon ui-icon-trash'></span></span></span></li>");
// empty text input field once data consumed
$('#textEntry').val("");
}
}
// Substantive START
$(document).ready(function () {
$('#textEntry').val("Some text or other here.");
console.log('Initialize lightbox plugin');
/* default settings */
$('.venobox').venobox();
/* open content with custom settings */
$('.venobox_custom').venobox({
framewidth: '300px',
frameheight: '250px',
border: '6px',
bordercolor: '#ba7c36',
numeratio: true,
infinigall: true
});
/* auto-open #firstlink on page load */
$("#firstlink").venobox().trigger('click');
// Enable DRAG of list items vertically to re-order them
$(".list").sortable( {
handle: ".handle"
});
// DELETE a line when its red-button trash symbol is clicked on
$(document).on("click", ".delete", function ()
{
var whichOne = Math.floor( $("span").index(this) / 7 );
$( "ul li" ).eq( whichOne ).remove();
});
// EDIT a line when its blue-button pencil symbol is clicked on
$(document).on("click", ".edit", function ()
{
console.log('Click on edit button detected for line #:');
var whichOne = Math.floor( $("span").index(this) / 7 );
console.log(whichOne);
var input = $( 'input[name=userEntry]' );
var extractedText = $( "ul li" ).eq(whichOne).text();
// The following was an initial form for user text editing, but for the planned functionality, I want to show the lightbox instead.
$('#textEdit').val( extractedText );
console.log(extractedText);
});
/* Add a line with text box contents as ACTION text when Action button pressed*/
$('#buttonItem').click(function () {
console.log('Add Action text on button press');
sendLineToDOM ('item');
});
});
</script>
</body>
</html>
答案 0 :(得分：1)
当您将新元素动态添加到DOM树时，这些新元素不会自动受到已初始化代码的影响。在您的情况下，您必须在添加后在每个新链接上初始化venobox。试试这个：
function sendLineToDOM (lineType) {
var toAdd = $('input[name=userEntry]').val();
if (toAdd == null || toAdd == "") {
console.log('empty');
}
else {
// two lines generated here while experimenting with venobox
// this uses venobox's 'iframe' option
var iframeRow = $("<li><span class='" + lineType + "'><span class='handle'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span></span>" + "iframe: " + toAdd + "<span class='edit'><a class='venobox_custom' data-type='iframe' href='editform.html'><span class='ui-icon ui-icon-pencil'></span></a></span><span class='delete'><span class='ui-icon ui-icon-trash'></span></span></span></li>"),
iframeLink = iframeRow.find('a');
$('.list').prepend(iframeRow);
// this uses venobox's 'inline' option
var inlineRow = $("<li><span class='" + lineType + "'><span class='handle'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span></span>" + "inline: " + toAdd + "<span class='edit'><a class='venobox_custom' data-type='inline' href='#lightboxform'><span class='ui-icon ui-icon-pencil'></span></a></span><span class='delete'><span class='ui-icon ui-icon-trash'></span></span></span></li>"),
inlineLink = inlineRow.find('a');
$('.list').prepend(inlineRow);
// empty text input field once data consumed
$('#textEntry').val("");
iframeLink.venobox();
inlineLink.venobox();
}
}
}
答案 1 :(得分：1)
@Niklas给了我一个有效的答案（并改进了我的代码），但在那个阶段，我还没有弄清楚我是如何将要编辑的数据传递给灯箱形式的。经过多次试验和搜索后，我发现这是不可能的，或者不是没有我的掌握，所以我正在重新审视这个最终的完整解决方案，以防其他人正在寻找一种方法来允许用户编辑文本他们已经先前在灯箱中输入并将其保存回页面。 （请注意，这不包括清理用户内容，这显然是必要的。）
问题是点击蓝色编辑按钮立即启动了Venobox灯箱 - 没有机会将现有数据加载到输入字段。我在Venobox文档中找不到关于如何做到这一点的信息。在我的项目中，将有许多行用户输入的数据，每个数据都有一个相关的编辑按钮，但一旦触发编辑灯箱，获取数据就太晚了。
解决方案是一个不同的lightbox jquery插件：Colorbox。 http://www.jacklmoore.com/colorbox/
这是有据可查的。除了使用超链接之外，它还有一种直接调用Colorbox的方法，这样我就可以通过'on click'触发编辑，设置所选的输入表单数据，然后跳转到colorbox，并执行所需的所有其他操作。 / p>
代码在下面，但是我再次在这里列出一个可运行的示例： http://www.informationtamers.com/colorboxtest/index.html
我删除了我的问题中提到的venobox在线代码。
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="todo.css"/>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<!-- colorbox is a jquery lightbox plugin -->
<link rel="stylesheet" href="colorbox/colorbox.css" type="text/css" media="screen" />
<title>UG list</title>
</head>
<body>
<p>I've removed much of the functionality, like getting users' previously-added content from a JSON file, saving it after changes, sanitizing user content, and so on.</p>
<p>First, press Add to generate a line, then key in one or two more lines.</p>
<div id="inputs" class="textIn">
<form name="checkListForm" >
<input type="text" id="textEntry" name="userEntry" style="width: 99%; height:25px"/>
</form>
</div>
<div id="controls" style="width: 100%">
<div id="buttonItem">Add</div>
</div>
<ul class="list">
</ul>
<p>Next, press one of the blue pencil buttons, change the text presented in the lightbox input form, and press Save changes.</p>
<p> </p>
<div style="display:none">
<div id="lightboxform">
<div class="textIn" >
<form name="editForm" >
<input type="text" id="textEdit" name="userEdit" style="width: 99%; height:25px"/>
</form>
</div>
<div id="controls" style="width: 100%">
<center><div id="buttonSaveChange">Save changes</div></center>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="colorbox/jquery.colorbox.js"></script> <!-- colorbox is a jquery lightbox plugin -->
<script>
// ƒ to add new user input to a <li> item
function sendLineToDOM (lineType, lineText) {
var toAdd = lineText;
if (lineText == null || lineText == "") {
console.log('empty');
}
else {
var inlineRow = "<li><span class='" + lineType + "'><span class='handle'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span></span>" + lineText + "<span class='edit'><span class='ui-icon ui-icon-pencil'></span></span><span class='delete'><span class='ui-icon ui-icon-trash'></span></span></span></li>";
$('.list').prepend(inlineRow);
// empty text input field once data consumed
$('#textEntry').val("");
}
}
// ƒ to move edited input to appropriate <li> item
function returnLineToDOM (lineType, lineText) {
if (lineText == null || lineText == "") {
console.log('empty');
}
else {
var inlineRow = "<li><span class='" + lineType + "'><span class='handle'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span></span>" + lineText + "<span class='edit'><span class='ui-icon ui-icon-pencil'></span></span><span class='delete'><span class='ui-icon ui-icon-trash'></span></span></span></li>";
// replace original line
$( "ul li" ).eq( whichOne ).replaceWith( inlineRow );
// empty text input field once data consumed
console.log('data consumed, empty text input field');
$('#textEdit').val("");
}
}
// Substantive START
$(document).ready(function () {
$('#textEntry').val("Some text or other here.");
/* Define global variables */
window.whichOne = 0; // global variable indicating which line selected for edit
window.extractedText = ""; // global variable to hold user text selected for edit
// Enable DRAG of list items vertically to re-order them
$(".list").sortable( {
handle: ".handle"
});
// DELETE a line when its red-button trash symbol is clicked on
$(document).on("click", ".delete", function ()
{
var whichOne = Math.floor( $("span").index(this) / 7 );
$( "ul li" ).eq( whichOne ).remove();
});
// EDIT a line when its blue-button pencil symbol is clicked on
$(document).on("click", ".edit", function ()
{
console.log('Click on edit button detected for line #:');
var whichOne = Math.floor( $("span").index(this) / 7 );
console.log(whichOne);
var input = $( 'input[name=userEntry]' );
var extractedText = $( "ul li" ).eq(whichOne).text();
$('#textEdit').val( extractedText );
console.log(extractedText);
});
// Add line w.text box contents as action text when Action button pressed
$('#buttonItem').click(function () {
console.log('Add Action text on button press');
sendLineToDOM ('item', $('input[name=userEntry]').val());
});
// EDIT a line when its blue-button pencil symbol is clicked on
$(document).on("click", ".edit", function () {
console.log('Edit a line');
// The divisor in the next expression is the number of <span>s before the
// clicked one in the <li> lines constructed in sendLineToDOM(). This
// works out which blue button has been pressed, and therefore which
// <li> item to edit.
whichOne = Math.floor( $("span").index(this) / 7 );
console.log(whichOne);
var input = $( 'input[name=userEntry]' );
extractedText = $( "ul li" ).eq(whichOne).text();
console.log('extracted:' + extractedText );
$('#textEdit').val( extractedText );
$.colorbox({inline:true, href:"#lightboxform", width:"80%", height:"25%"});
});
/* RELOAD edited line on click */
// Get the edited user input and replace the old entry with it.
$('#buttonSaveChange').click(function () {
console.log('Replace old entry on button press');
// Save edited text!!!!
returnLineToDOM ('item', $('input[name=userEdit]').val());
$.colorbox.close()
});
});
</script>
</body>
</html>
答案 2 :(得分：0)
我相信，一旦iframe打开，其目的就是获得对流程的控制。
我们可以通过在下面的venobox选项中传递一个回调函数来做到这一点。
// Venobox setup
$('.venobox_custom').venobox({
// framewidth : '400px', // default: ''
frameheight : '110vh', // default: ''
border : '10px', // default: '0'
bgcolor : '#96c9db', // default: '#fff'
titleattr : 'data-title', // default: 'title'
titleColer : '#fff',
titleBackground: '#1bbd36',
cb_post_open : function(){
console.log('POST OPEN');
},
});
答案 3 :(得分：0)
更简单的解决方案是在重新加载组件中的新元素后初始化VENOBOX插件。您可以对此进行测试：
//when load the web site
$(document).ready(function(){
$('.venobox').venobox();
});
//When you replace or add new elements in your component
$('.venobox').venobox(); //Note: this goes in the end after create elements