Jquery插件Thickbox的使用总结及自定义设置
2014-11-03 02:52
627 查看
ThickBox运行需要的文件
官方下载:
Download
thickbox.js or
thickbox-compressed.js,
ThickBox.css, and the loading graphic (loadingAnimation.gif) to your local machine (or cut and paste the code from the tabs). Along with these three files, a copy
of the jQuery JavaScript library is needed. For this site, and ThickBox, I am using the
compressed version of jQuery.
首先在 HTML 文件的 head中导入jquery.js 和thickbox.js文件,导入 thickbox.css 文件;并且jquery.js 文件放在前面:
最后你只要给元素添加 class=”thickbox” 属性就可以开始用 thickbox
实现了一张图片的弹出展示功能:
自定义设置:
1、弹出窗口(div)右上角的关闭按钮为显示为"close or esc key",而不是中文的; 如果想把它变成[X]或"关闭"应该怎么来办呢?
打开thickbox.css查找.TB_overlayBG 进行更改
3、关闭层:如果我们需要自己添加一个关闭按钮或者图片可以使用:
4、关闭层刷新父页面,修改关闭方法 :
5、thickbox插件默认情况是点击灰色的遮罩层就会关闭取消
6、updatepanel回发后thickbox失效的解决方法
官方下载:
Download
thickbox.js or
thickbox-compressed.js,
ThickBox.css, and the loading graphic (loadingAnimation.gif) to your local machine (or cut and paste the code from the tabs). Along with these three files, a copy
of the jQuery JavaScript library is needed. For this site, and ThickBox, I am using the
compressed version of jQuery.
首先在 HTML 文件的 head中导入jquery.js 和thickbox.js文件,导入 thickbox.css 文件;并且jquery.js 文件放在前面:
<span style="font-size:14px;color:#0000ff;"><</span><span style="font-size:14px;color:#800000;">script</span><font size="3"> <span style="color:#ff0000;">src</span>=<span style="color:#0000ff;">"../Scripts/jquery-latest.pack.js"</span> <span style="color:#ff0000;">mce_src</span>=<span style="color:#0000ff;">"Scripts/jquery-latest.pack.js"</span> <span style="color:#ff0000;">type</span>=<span style="color:#0000ff;">"text/javascript"</span><span style="color:#0000ff;">></span><span style="color:#0000ff;"><span style="color:#800000;">script</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">script</span> <span style="color:#ff0000;">src</span>=<span style="color:#0000ff;">"../Scripts/thickbox.js"</span> <span style="color:#ff0000;">mce_src</span>=<span style="color:#0000ff;">"Scripts/thickbox.js"</span> <span style="color:#ff0000;">type</span>=<span style="color:#0000ff;">"text/javascript"</span><span style="color:#0000ff;">></span><span style="color:#0000ff;"><span style="color:#800000;">script</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">link</span> <span style="color:#ff0000;">href</span>=<span style="color:#0000ff;">"../Styles/thickbox.css"</span> <span style="color:#ff0000;">mce_href</span>=<span style="color:#0000ff;">"Styles/thickbox.css"</span> <span style="color:#ff0000;">rel</span>=<span style="color:#0000ff;">"stylesheet"</span> <span style="color:#ff0000;">type</span>=<span style="color:#0000ff;">"text/css"</span> <span style="color:#0000ff;">/></span> </span></span></font>
最后你只要给元素添加 class=”thickbox” 属性就可以开始用 thickbox
实现了一张图片的弹出展示功能:
<span style="font-size:14px;color:#0000ff;"><</span><span style="font-size:14px;color:#800000;">a</span><span style="font-size:14px;"> <span style="color:#ff0000;">href</span>=<span style="color:#0000ff;">"”bg.jpg”"</span> <span style="color:#ff0000;">mce_href</span>=<span style="color:#0000ff;">"”bg.jpg”"</span> <span style="color:#ff0000;">class</span>=<span style="color:#0000ff;">”thickbox”</span> <span style="color:#0000ff;">></span><span style="color:#0000ff;"><</span><span style="color:#800000;">img</span> <span style="color:#ff0000;">src</span>=<span style="color:#0000ff;">"”bg.jpg”"</span> <span style="color:#ff0000;">mce_src</span>=<span style="color:#0000ff;">"”bg.jpg”"</span> <span style="color:#ff0000;">alt</span>=<span style="color:#0000ff;">”图片”</span><span style="color:#0000ff;">/></span><span style="color:#0000ff;"><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> //只需要指定图片的class为thickbox</span></span>弹出框使用方法:
<span style="font-size:14px;color:#0000ff;"><</span><span style="font-size:14px;color:#800000;">a</span><font size="3"> <span style="color:#ff0000;">href</span>=<span style="color:#0000ff;">"Default.aspx?keepThis=true&TB_iframe=true&height=400&width=500"</span> <span style="color:#ff0000;">title</span>=<span style="color:#0000ff;">"主页"</span> <span style="color:#ff0000;">class</span>=<span style="color:#0000ff;">"thickbox"</span> a<span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">input</span> <span style="color:#ff0000;">onclick</span>=<span style="color:#0000ff;">"/bannedUserList!unBannedUserList?height=400&width=800&inlineId=myOnPageContent"</span> <span style="color:#ff0000;">title</span>=<span style="color:#0000ff;">"弹出层"</span> <span style="color:#ff0000;">class</span>=<span style="color:#0000ff;">"thickbox"</span> <span style="color:#ff0000;">type</span>=<span style="color:#0000ff;">"button"</span> <span style="color:#ff0000;">value</span>=<span style="color:#0000ff;">"Ban Another"</span> <span style="color:#0000ff;">/></span> //内嵌内容 <span style="color:#0000ff;"><</span><span style="color:#800000;">input</span> <span style="color:#ff0000;">alt</span>=<span style="color:#0000ff;">"#TB_inline?height=300&width=400&inlineId=myOnPageContent"</span> <span style="color:#ff0000;">title</span>=<span style="color:#0000ff;">"标题"</span> <span style="color:#ff0000;">class</span>=<span style="color:#0000ff;">"thickbox"</span> <span style="color:#ff0000;">type</span>=<span style="color:#0000ff;">"button"</span> <span style="color:#ff0000;">value</span>=<span style="color:#0000ff;">"Show"</span> <span style="color:#0000ff;">/></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a</span> <span style="color:#ff0000;">href</span>=<span style="color:#0000ff;">"#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true"</span> <span style="color:#ff0000;">class</span>=<span style="color:#0000ff;">"thickbox"</span><span style="color:#0000ff;">></span>显示隐藏内容a> //遮罩层 URL后面加?KeepThis=true&TB_iframe=true&height=400&width=600 参数字符串中加 modal=true ?KeepThis=true&TB_iframe=true&height=400&width=600&modal=true 这样当关闭ThickBox时会调用ThickBox iframe (self.parent.tb_remove())内部的一个tb_remove()函数 所有其他参数字符都必须在TB_iframe 参数之前。URL中所有"TB" 之后的将被移除。 <span style="color:#0000ff;"><</span><span style="color:#800000;">a</span> <span style="color:#ff0000;">href</span>=<span style="color:#0000ff;">"index.html?keepThis=true&TB_iframe=true&height=250&width=400"</span> <span style="color:#ff0000;">title</span>=<span style="color:#0000ff;">"标题"</span> <span style="color:#ff0000;">class</span>=<span style="color:#0000ff;">"thickbox"</span><span style="color:#0000ff;">></span>打开一个页面<span style="color: #0000ff"><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a</span> <span style="color:#ff0000;">href</span>=<span style="color:#0000ff;">"index.html?keepThis=true&TB_iframe=true&height=300&width=500"</span> <span style="color:#ff0000;">title</span>=<span style="color:#0000ff;">"标题"</span> <span style="color:#ff0000;">class</span>=<span style="color:#0000ff;">"thickbox"</span><span style="color:#0000ff;">></span>打开一个页面<span style="color:#0000ff;"><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> <span style="color:#0000ff;"><</span><span style="color:#800000;">a</span> <span style="color:#ff0000;">href</span>=<span style="color:#0000ff;">"index.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true"</span> <span style="color:#ff0000;">title</span>=<span style="color:#0000ff;">"标题"</span> <span style="color:#ff0000;">class</span>=<span style="color:#0000ff;">"thickbox"</span><span style="color:#0000ff;">></span>打开一个页面<span style="color:#0000ff;"><span style="color:#800000;">a</span><span style="color:#0000ff;">></span> </span></span></span></font>
自定义设置:
1、弹出窗口(div)右上角的关闭按钮为显示为"close or esc key",而不是中文的; 如果想把它变成[X]或"关闭"应该怎么来办呢?
<span style="font-size:14px;">将thickbox.js文件打开,查找关键字"<span style="color:#8b0000;">or esc key</span>",将其删除,并将前面的close更改为[X]或"<span style="color:#8b0000;">关闭</span>",然后把文件另存为UTF-8格式,如果不保存为UTF-8的话,将会出现乱码。</span>2、thickbox 弹出层的遮住层透明度修改
打开thickbox.css查找.TB_overlayBG 进行更改
<span style="font-size:14px;">.<span style="color:#800000;">TB</span>_<span style="color:#800000;">overlayBG</span> { <span style="color:#ff0000;">background-color</span>:<span style="color:#0000ff;">#000</span>; <span style="color:#ff0000;">filter</span>:<span style="color:#0000ff;">alpha(opacity=75)</span>; <span style="color:#ff0000;">-moz-opacity</span>: <span style="color:#0000ff;">0.75</span>; <span style="color:#ff0000;">opacity</span>: <span style="color:#0000ff;">0.75</span>; }</span>
3、关闭层:如果我们需要自己添加一个关闭按钮或者图片可以使用:
<span style="font-size:14px;">onclick="self.parent.tb_remove();" </span>
4、关闭层刷新父页面,修改关闭方法 :
<span style="font-size:14px;color:#0000ff;">function</span><span style="font-size:14px;"> tb_remove() { $("<span style="color:#8b0000;">#TB_imageOff</span>").unbind("<span style="color:#8b0000;">click</span>"); $("<span style="color:#8b0000;">#TB_closeWindowButton</span>").unbind("<span style="color:#8b0000;">click</span>"); $("<span style="color:#8b0000;">#TB_window</span>").fadeOut("<span style="color:#8b0000;">fast</span>",<span style="color:#0000ff;">function</span>(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("<span style="color:#8b0000;">unload</span>").unbind().remove();}); $("<span style="color:#8b0000;">#TB_load</span>").remove(); <span style="color:#0000ff;">if</span> (<span style="color:#0000ff;">typeof</span> <span style="color:#0000ff;">document</span>.body.style.maxHeight == "<span style="color:#8b0000;">undefined</span>") {<span style="color:#008000;">//if IE 6</span> $("<span style="color:#8b0000;">body</span>","<span style="color:#8b0000;">html</span>").css({height: "<span style="color:#8b0000;">auto</span>", width: "<span style="color:#8b0000;">auto</span>"}); $("<span style="color:#8b0000;">html</span>").css("<span style="color:#8b0000;">overflow</span>",""); } <span style="color:#0000ff;">document</span>.onkeydown = ""; <span style="color:#0000ff;">document</span>.onkeyup = ""; <span style="color:#008000;">//刷新父页面,未指定</span> <span style="color:#0000ff;">window</span>.<span style="color:#0000ff;">location</span>.reload(); <span style="color:#0000ff;">return</span> <span style="color:#0000ff;">false</span>; }</span>
5、thickbox插件默认情况是点击灰色的遮罩层就会关闭取消
<span style="font-size:14px;">把两个$("<span style="color:#8b0000;">#TB_overlay</span>").click(tb_remove);去掉就可以取消掉</span>
6、updatepanel回发后thickbox失效的解决方法
<span style="font-size:14px;">只需把以下代码粘贴至页面中就OK了。 转载自:http://blog.csdn.net/dupeng0811/article/details/6239797 </span>
相关文章推荐
- Jquery插件Thickbox的使用总结及自定义设置
- Jquery插件Thickbox的使用总结及自定义设置
- Jquery插件Thickbox的使用总结及自定义设置
- Jquery插件Thickbox的使用总结及自定义设置
- Jquery插件Thickbox的使用总结及自定义设置
- Jquery插件Thickbox的使用总结及自定义设置
- Jquery插件Thickbox的使用总结及自定义设置
- YII中改变自定义操作的方式并使用thickbox的JQuery插件窗出窗口
- jquery插件thickbox遮罩层的的使用
- 使用jQuery制作自定义PickList插件
- ·jQuery弹出层插件Thickbox使用心得
- Jquery弹出层插件Thickbox使用心得
- 使用超棒超简单的自定义jQuery幻灯插件 Cycle2
- 使用超棒超简单的自定义jQuery幻灯插件 Cycle2
- 【转】Jquery弹出层插件Thickbox使用心得
- jQuery formValidator表单验证插件使用总结
- Jquery ThickBox插件使用心得(不建议使用)
- Jquery弹出层插件Thickbox使用心得
- Jquery ThickBox插件使用心得(不建议使用)
- jquery的验证插件jquery.validate.js使用总结