common.js 是 Discuz! 论坛系统中常用的 JavaScript 文件,其中包含了许多内置的 AJAX 函数和工具函数,用于简化前端开发中的常见操作。以下是对 common.js 中一些常用 AJAX 函数的详细解释和使用方法。
1. showMenu() 显示弹出菜单
showMenu(v) 函数用于显示一个弹出菜单。参数 v 是一个对象,包含多个键值对,用于配置菜单的行为和样式。
参数说明:
- ctrlid (必填):控制菜单的元素的 ID。
- showid:弹出菜单的 ID,默认值为 ctrlid。
- menuid:显示菜单的 ID,默认值为 showid + '_menu'。
- evt:响应事件,默认为 'mouseover',可选值为 'click' 或 'mouseover'。
- pos:菜单位置,默认为 '43',详见 setMenuPosition() 函数。
- layer:菜单层级,默认为 1。
- duration:菜单显示方式,默认为 2,可选值为 0、1、2、3。
- timeout:菜单持续时间,单位为毫秒,默认为 250。
- mtype:菜单类型,默认为 'menu',可选值为 'menu'、'win'、'prompt'、'dialog'。
- maxh:菜单最大高度,默认为 600。
- cache:是否缓存菜单,默认为 1(是)。
- drag:拖拽菜单对象的 ID,如果希望整个菜单都可以拖拽,请设置 drag 等于 1。
- fade:淡入淡出效果,默认为 0(否)。
- cover:是否显示一个遮罩覆盖整个页面,默认为 0(否)。
- zindex:菜单层叠顺序。
- ctrlclass:控制对象在菜单弹出后的 class 值,仅在 duration = 2 时有效。
示例:- showMenu({
- ctrlid: 'menuCtrl',
- showid: 'menuShow',
- menuid: 'menuId',
- evt: 'click',
- pos: '43',
- duration: 2,
- timeout: 500,
- mtype: 'menu',
- maxh: 600,
- cache: 1,
- drag: 1,
- fade: 1,
- cover: 1,
- zindex: 1000,
- ctrlclass: 'active'
- });
复制代码
2. showDialog() 显示对话框
showDialog(msg, mode, t, func, cover, funccancel, leftmsg, confirmtxt, canceltxt, closetime, locationtime) 函数用于显示一个对话框。
参数说明:
- msg (必填):提示信息内容。
- mode:对话框模式,默认为 'alert',可选值为 'alert'、'confirm'、'notice'、'info'。
- t:对话框标题,默认为 '提示信息'。
- func:点击“确定”按钮后执行的函数。
- cover:是否显示一个遮罩覆盖整个页面,默认为 1(是)。
- funccancel:点击“取消”按钮后执行的函数。
- leftmsg:底部左侧信息。
- confirmtxt:确定按钮的文字,默认为 '确定'。
- canceltxt:取消按钮的文字,默认为 '取消'。
- closetime:自动关闭的时间,单位为秒。
- locationtime:自动跳转时间,单位为秒。
示例:- showDialog('这是一个提示信息', 'confirm', '提示', function() {
- alert('你点击了确定');
- }, 1, function() {
- alert('你点击了取消');
- }, '底部信息', '确定', '取消', 5, 10);
复制代码
3. showWindow() AJAX 弹窗
showWindow(k, url, mode, cache, v) 函数用于显示一个 AJAX 弹窗。
参数说明:
- k (必填):浮窗的 key。
- url (必填):请求的 URL 或表单 ID。
- mode:弹窗请求类型,默认为 'get',可选值为 'get'、'post'。
- cache:是否缓存弹窗内容,默认为 1(是)。
- v:可微调 showMenu() 参数。
示例:- showWindow('windowKey', 'http://example.com/ajax', 'get', 1, {
- duration: 2,
- timeout: 500
- });
复制代码
4. setMenuPosition() 菜单定位
setMenuPosition(showid, menuid, pos) 函数用于设置菜单的定位。
参数说明:
- showid (必填):弹出菜单的 ID。
- menuid (必填):菜单的 ID。
- pos:菜单弹出位置及方向,默认为 '43'。
示例:- setMenuPosition('menuShow', 'menuId', '43');
复制代码
5. ajaxget() AJAX/GET 请求
ajaxget(url, showid, waitid, loading, display, recall) 函数用于发送 AJAX GET 请求。
参数说明:
- url (必填):请求的 URL。
- showid (必填):显示返回信息的区域 ID。
- waitid:显示等待信息的区域 ID,默认为 showid。
- loading:加载时的提示信息。
- display:信息返回后 showid 的 style.display 值。
- recall:信息返回后执行的代码。
示例:- ajaxget('http://example.com/data', 'resultDiv', 'waitDiv', '加载中...', 'block', function() {
- alert('请求完成');
- });
复制代码
6. ajaxpost() AJAX/POST 请求
ajaxpost(formid, showid, waitid, showidclass, submitbtn, recall) 函数用于发送 AJAX POST 请求。
参数说明:
- formid (必填):表单的 ID。
- showid (必填):显示返回信息的区域 ID。
- waitid:显示等待信息的区域 ID,默认为 showid。
- showidclass:返回信息显示区域的样式。
- submitbtn:表单提交按钮,请求发出后将会禁用这个按钮。
- recall:信息返回后执行的代码。
示例:- ajaxpost('myForm', 'resultDiv', 'waitDiv', 'resultClass', 'submitBtn', function() {
- alert('表单提交完成');
- });
复制代码
7. ajaxmenu() AJAX/GET 请求 显示弹出菜单
ajaxmenu(ctrlObj, timeout, cache, duration, pos, recall, idclass, contentclass) 函数用于发送 AJAX GET 请求并显示弹出菜单。
参数说明:
- ctrlObj (必填):控制菜单的对象。
- timeout:菜单持续时间,默认为 3000 毫秒。
- cache:是否缓存菜单,默认为 1(是)。
- duration:菜单显示方式,默认为 0。
- pos:菜单位置,默认为 '43'。
- recall:信息返回后执行的代码。
- idclass:菜单的 class 属性值,默认为 'p_pop'。
- contentclass:菜单内容的 class 属性值,默认为 'p_opt'。
示例:- ajaxmenu(document.getElementById('menuCtrl'), 3000, 1, 2, '43', function() {
- alert('菜单显示完成');
- }, 'p_pop', 'p_opt');
复制代码
总结
common.js 中的这些函数为 Discuz! 论坛系统提供了强大的前端功能支持,特别是在处理 AJAX 请求、弹出菜单和对话框时非常有用。通过合理使用这些函数,可以大大简化前端开发工作,提升用户体验。
-- 本回答由 人工智能 AI智能体 生成,内容仅供参考,请仔细甄别。 |