`

thickBox学习笔记 - 条件满足则显示thickBox

阅读更多
Jquery的ThickBox插件非常好用,可以显示一张图片、多张图处、AJAX和IFrame等多种样式的内容到ThickBox,都要A click触发,而有的时候后台程序根据不同权限显示不同内容,这时希望根据条件输入框的值判断是否显示ThickBox的内容,所需添加代码如下:

<script type="text/javascript" src="<web.path:path/>/resources/js/jquery.js"></script>
<script type="text/javascript" src="<web.path:path/>/resources/js/thickbox.js"></script>
<link rel="stylesheet" href="<web.path:path/>/resources/css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript">
    $(function(){
       
        //init thickbox的默认选择器
        tb_init('a.thickbox, area.thickbox, input.thickbox');
        $("#thickButton").click(function(event){
           
            event.preventDefault();
            //如果name输入框的值不为空, 则弹出thickBox对话框
            if($("#name").val()!="") {
                tb_show("","url?height=300&width=400&inlineId=myOnPageContent",false);
            }
        });
    });
</script>

<input type="text" id="name"/>
<input title="ban another user" type="button" value="Show" id="thickButton"/>
分享到:
评论

相关推荐

    thickbox------------ jQuery好插件

    3. **自适应**:Thickbox能自动调整大小以适应不同类型的媒体,确保内容始终在弹窗内完整显示。 4. **用户体验**:通过淡入淡出效果和全屏背景遮罩,Thickbox提供了优雅的过渡和良好的视觉体验。 5. **可配置性**:...

    thickbox插件(jquery.js-thickbox.js-thickbox.css)含三个文件

    ThickBox是一款基于jQuery的轻量级弹出插件,主要包含三个核心文件:`jquery.js`、`thickbox.js`和`thickbox.css`。这些文件协同工作,为网页提供了一种优雅的方式,以全屏或者半透明背景的形式展示图片、内嵌框架、...

    thickbox-compressed.js

    query ----thickbox----弹出层

    thickbox-compressed

    thickbox 3.1源码 不是一行的 thickbox-compressed.js

    thickbox用法说明以及一些例子

    以下是对Thickbox用法的详细说明及示例。 **一、Thickbox的基本用法** 1. **引入库文件** 首先,你需要在你的HTML页面中引入Thickbox的相关文件。这通常包括CSS样式表和JavaScript脚本。例如: ```html ...

    thickbox插件

    6. **脚本功能**:thickbox.js和thickbox-compressed.js是Thickbox的JavaScript文件,其中包含了插件的主要逻辑和功能。thickbox-compressed.js是压缩版本,用于减小文件大小,加快页面加载速度。 7. **易用性**:...

    thickbox

    "Thickbox"是一款流行的JavaScript库,用于创建全屏弹出式图像和产品展示效果。在网页设计中,它提供了一种优雅的方式,使用户能够查看大图或多媒体内容,而无需离开当前页面。这个库特别适合电子商务网站,因为它们...

    ThickBox 3_1

    ThickBox 3_1 是一个经典的JavaScript库,主要用于实现网页中的轻量级弹出框效果。这个库在2006年首次发布,由jQuery支持,为用户提供了一种优雅的方式来展示图片、多媒体内容和整个网页,而无需离开当前页面。它的...

    thickbox3.1.zip

    Thickbox是一款流行的JavaScript插件,它允许网页开发者在页面上创建一个弹出式的轻量级框架,用于显示图片、HTML内容、Iframe或者Ajax加载的内容。这个"thickbox3.1.zip"文件包含了Thickbox的3.1版本,它在网页设计...

    thickbox的具体使用方法

    为了更好地学习Thickbox,你可以参考提供的“thickbox的具体使用方法.txt”文件,里面可能包含更详细的步骤、示例代码和配置选项。通过实践这些例子,你将能够熟练掌握Thickbox的用法,将其无缝融入到你的Web项目中...

    juery thickbox3例子

    Thickbox3则是jQuery的一个插件,扩展了其功能,提供了丰富的弹出窗口解决方案。 在压缩包文件名称列表中,我们只看到了“thickbox3.1”。这可能表示这个压缩包包含了Thickbox3的源代码、CSS样式文件、JavaScript...

    ThickBox 3.1 & Dock

    这个是用ThickBox 和css-dock-menu的JS和在一起,网页中模拟MAC效果。 有的LightBox或者ThickBox和css-dock-menu有JS冲突,这组JS经试验是可以一起使用的。

    thickbox-compressed 源码

    thickbox-compressed源码

    jquery插件thickbox的使用方法

    这里,`href`属性指向图片URL,`title`属性可以添加图片描述,而`class="thickbox"`则是激活ThickBox的关键。 对于多个关联图片,可使用`rel`属性将它们分组: ```html &lt;a href="images/a.jpg" class="thickbox" ...

    thickbox 简单实例

    Thickbox是一款流行的jQuery插件,它为网页提供了一种优雅的方式来展示图片、HTML内容、iframe和Ajax...通过深入学习这个"thickbox简单实例",你可以掌握如何在实际项目中运用Thickbox,提升网站的交互性和用户体验。

    jQuery_thickbox3.1

    1. **多用途展示**:Thickbox3.1不仅支持展示静态图像,还能显示动态内容,如div元素中的动态信息或远程网页,这使得它成为一种灵活的内容展示工具。 2. **响应式设计**:随着移动设备的普及,Thickbox3.1考虑了...

    thickbox实例

    这个“thickbox实例”压缩包文件包含的是Thickbox 2.0版本的一些示例代码,对于学习如何在网站上实现这种交互式用户体验非常有帮助。 Thickbox的核心功能包括: 1. 图片弹窗:Thickbox可以将网页上的链接图片转换...

    ThickBox3.1弹出层

    此外,ThickBox3.1还可以加载并显示Flash内容,以兼容那些仍然使用Flash的网站或应用。 对于图片预览功能,ThickBox3.1会自动检测页面上的链接,并对指向图片的链接添加必要的JavaScript事件监听器。当用户点击这样...

    Thickbox 3.1插件包

    考虑到现代网页设计对响应式布局的需求,Thickbox 3.1可能已经考虑了不同屏幕尺寸下的显示效果。开发者需要确保在移动设备上,Thickbox仍然能够提供良好的用户体验。 7. **与其他库的兼容性**: 虽然Thickbox是一...

Global site tag (gtag.js) - Google Analytics