Discuz! 官方站

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 80515|回复: 14

JS showWindow函数解析,打造个性的弹窗

[复制链接]
发表于 2011-5-30 11:04:55 | 显示全部楼层 |阅读模式
本帖最后由 nxy105 于 2011-5-30 11:06 编辑

    showWindow(k, url, mode, cache, v)
    以下列表说明各个参数的含义
   
key 默认值 含义 可选值及解释
k (必填) 浮窗的 key
url (必填) get 方式 url 表示浮窗请求的地址 post 方式 url 表示浮窗提交的表单 id

mode 'get' 弹窗请求类型 get: ajaxget 方式请求 url post: ajaxpost 方式请求 url
cache 1 是否缓存弹窗内容 1:是 0:否
v
由于 showWindow() 是以 showMenu() 函数为内核,因此此处可微调 showMenu() 参数,如不指定则使用 showWindow() 的默认值

提示:
    1.同一页面同时可以弹出多个浮窗,但 k 及 url 相同的浮窗同时只能显示一个。
    2.
浮窗标题区域支持拖拽。
    3.另外
关闭浮窗请使用 hideWindow(k)。

    为了方便说明如何利用这个函数开发,打造个性的弹窗页面,我们来看看主题列表页发帖按钮的弹窗机制:
   
    在forumdisplay页面上的发帖按钮有一个onclick的触发点,触发的函数为
showWindow('newthread', 'forum.php?mod=post&action=newthread&fid=40'),其中'newthread'是表示弹出窗口的div的id,'forum.php?mod=post&action=newthread&fid=40'表示请求的地址。
    在这个例子中,请求返回的是htm模板,值得注意的是,返回的应该是完整的模板文件,必须包含
  1. <!--{template common/header}-->
复制代码
或者
  1. <!--{template common/header_ajax}-->
复制代码
,以及
  1. <!--{template common/footer}-->
复制代码
或者
  1. <!--{template common/footer_ajax}-->
复制代码
,这样才能在窗口内正常显示。
   
   
我们来看看标准的弹窗包括三个部分:   
    标题部分:
  1. <h3 class="flb">你的标题</h3>
复制代码

          在标题的后面可以附上关闭窗口的代码:
  1. <span><a href="javascript:;"
  2. class="flbc" onclick="hideWindow('$_G['gp_handlekey']');" title="{lang
  3. close}">{lang close}</a></span>
复制代码
   内容部分:

         可以自行设计。
         附上提示的代码:
  1. <div class="alert_error">提示内容</div>
复制代码
,class属性为alert_rightalert_error分别对应正确和错误的图标

       按钮部分:
                可以自行设计。

    到此为止,showWindow函数的基本的使用方法介绍完毕了,这里只是抛砖引玉,希望能为大家在discuz!的开发和学习的路上提供一些帮助~


评分

2

查看全部评分

发表于 2011-5-30 11:36:33 | 显示全部楼层
复習中來支持一下老NXY~
回复

使用道具 举报

发表于 2011-6-3 01:38:09 | 显示全部楼层
VeryNice.
Thank you .
回复

使用道具 举报

发表于 2011-6-5 22:33:35 | 显示全部楼层
不错,收下了
回复

使用道具 举报

发表于 2011-6-8 10:28:58 | 显示全部楼层
楼主,不够详细啊,怎样实现倒数自动关闭?
回复

使用道具 举报

发表于 2011-6-8 10:32:54 | 显示全部楼层
get 方式 url 表示浮窗请求的地址 post 方式 url 表示浮窗提交的表单 id
回复

使用道具 举报

发表于 2011-6-8 13:10:36 | 显示全部楼层
本帖最后由 plotworld.cn 于 2011-10-28 09:41 编辑

http://www.plotworld.cn
策划界学习了!
回复

使用道具 举报

 楼主| 发表于 2011-6-8 13:46:28 | 显示全部楼层
easonlee 发表于 2011-6-8 10:28
楼主,不够详细啊,怎样实现倒数自动关闭?

这些都是在程序端的showmessage()函数控制的,showmessage($message, $url_forward = '', $values = array(), $extraparam = array(), $custom = 0),其中$extraparam以array(key => value ...)的形式,配置输出的模式。
举个例子:
实现倒数自动关闭--showmessage('', '', '',  array('showdialog' => true, 'closetime' => true));
howdialog        关闭原弹出框显示 showDialog 信息
timeout                定时跳转
回复

使用道具 举报

发表于 2011-6-8 16:02:27 | 显示全部楼层
   很好。 在技术文库看过这个介绍, 这个贴子有例子,更容易懂。   
回复

使用道具 举报

发表于 2011-7-4 15:29:20 | 显示全部楼层
内部错误。不知道什么原因。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|Comsenz ( 粤B2-20090059-165 )star

GMT+8, 2019-10-16 05:29

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表