魔众题库系统前端开发组件

魔众题库系统 / 文档中心
文档中心
开发教程
安装常见问题

弹窗功能

通过增加 data-dialog-request 可以快速创建一个弹窗( iframe 模式 )。

<a href="javascript:;" 
   data-dialog-request="/path/to/dialog" 
   data-dialog-width="90%" 
   data-dialog-height="90%">弹窗</a>
  • data-dialog-request:弹窗请求地址
  • data-dialog-width:弹窗宽度
  • data-dialog-height:弹窗高度

在弹窗页面通过调用 parent.layer.closeAll() 可以关闭操作

具体实现方式可参考 源代码

Ajax请求

构造一个Ajax请求按钮,点击按钮时,会发送一个请求到接口。

<a href="javascript:;" 
   data-ajax-request="/path/to/url" 
   data-ajax-request-loading 
   data-method="get"
   data-confirm="确定请求?">
    模拟发送一个请求
</a>
  • data-ajax-request:定义一个快速Ajax请求
  • data-ajax-request-loading:请求时显示 Loading
  • data-method :请求方式,默认为 post,可以显式定义为 getpost
  • data-confirm:弹出二次确认弹窗

具体实现方式可参考 源代码

Ajax表单

构造一个Ajax表单,在点击提交时,表单会以Ajax的方式请求到后台接口。

<form data-ajax-form action="/path/to/url" method="post">
  <input name="username" value="" />
  <button type="submit">提交</button>
</form>
  • data-ajax-form:表示当前表单是一个Ajax请求表单

具体实现方式可参考 源代码

图片预览

构造一个图片预览,点击预览后会弹出图片预览大图。

<a href="javascript:;" data-image-preview="图片地址">预览</a>

具体实现方式可参考 源代码

标签页打开链接

构造一个标签页打开的链接,点击后会在后台打开一个新的标签页。

<a href="/path/to/url" 
   data-tab-open
   data-tab-title="标签标题">在标签页中打开</a>
  • data-tab-open:标记这个链接在标签页中打开
  • data-tab-title:定义标签页的标题

注意:该功能仅限在后台页面范围,页面渲染完成后,会自动调用 window._pageTabManager.updateTitleFromTab('标题') 更新标签页的标题

具体实现方式可参考 源代码

QQ
微信
公众号
客服