我正在编写一个jquery插件,它将弹出一个窗口 .Below是窗口的html代码。
html代码并不复杂,但有许多标签。
现在,我有两个选择:
1.在每个页面上输入此HTML代码,然后隐藏此div。如果有单击事件,则弹出此窗口。 jquery很容易。
$('.pop_width450').show()
但如果我这样做,就不再需要我编写插件了,更重要的是,如果我弹出这样一个窗口,我必须把窗口html代码放在每一页中需要弹出一个窗口。
2.第二种方法是将此代码附加到文档中。也许是这样的:
$('<div class="pop_width450">').appendTo(document.body);
这很容易,我的问题是,如果我这样使用。 我需要添加很多HTML代码,可能是这样的:
var pop = '<div class="pop_width450">'
+ '<div class="pop_width500_title">Send a Invitation'
+ '<span><a href><img src="imgs/icon/icon_delete_12px.png" border-bottom="0" /></a></span>'
+ ...............
+ ...............
然后:
$(pop).append(document.body);
你知道,HTML代码 pop 会很长。我想知道是否有一些优雅的方式来解决这类问题。
下面是我的弹出式HTML代码。
欢迎任何想法。谢谢。
<div class="pop_width450">
<div class="pop_width500_title">Send a Invitation
<span>
<a href="#">
<img src="imgs/icon/icon_delete_12px.png" border-bottom="0" />
</a>
</span>
</div>
<div class="pop_width500_content">
<ul>
<li class="li480">
<div class="div100">Name</div>
<div class="div380">
<input name="" class="input300" type="text" />
</div>
</li>
<li class="li480">
<div class="div100">Subject</div>
<div class="div380">
<input name="" class="input300" type="text" />
</div>
</li>
<li class="li480">
<div class="div380b">
<textarea name="" class="textarea300" cols="" rows=""></textarea></div>
</li>
<li class="li480"> </li>
<li class="li480">
<div class="div380b">
<input type="button" class="btn_gray_22" value="Send" />
</div>
</li>
<li class="li480"> </li>
</ul>
</div>
</div>
答案 0 :(得分:2)
因为你正在使用jQuery,你至少可以清理你的html,你不必将它作为一个大字符串写出来,你也可以用以下方法创建元素:
var container = $( '<div/>', {
'class': 'pop_width450'
});
var titleContainer = $( '<div/>', {
'class': 'pop_width500_title',
text: 'Send An Invitation'
}).appendTo( container );
这至少会使你的代码比HTML字符串更多JS,你可以通过构建一个获取数据对象的函数来自动化任务,并为你构建任意数量的HTML,然后你可以重用代码其他项目向前推进
答案 1 :(得分:0)
您是否考虑过使用彩盒之类的东西,让您的弹出窗口成为您自己直接在彩色盒中提供的页面。
http://www.jacklmoore.com/colorbox/
然后你只需要常见的JS代码,你可以在每个页面的.js文件中包含你的点击并显示颜色框。
答案 2 :(得分:0)
使用第二种方式将弹出代码写在公共文件中:
function ShowPopUp()
{
var pop = '<div class="pop_width450">'
+ '<div class="pop_width500_title">Send a Invitation'
+ '<span><a href><img src="imgs/icon/icon_delete_12px.png" border-bottom="0" /></a></span>'
+ ...............
+ ...............
$(this).html(pop);
// OR
$(this).append(pop); // Test it yourself, which one is preferable for pop up....
}
然后在你要显示弹出窗口的任何页面和控件中:(1)首先导入你的JS文件,(2)将该方法绑定到控件的click事件:
<input type="button" onclick="ShowPopUp()"/>