本发明涉及网页前端技术领域,特别是一种可重用的步骤窗口实现方法。
背景技术:
开发人员在写前端页面的过程中,经常会遇到涉及参数较多的页面的开发,一般采取的方式是将所有参数都写在同一个页面,提交请求时所有参数一起传参到接口。这种方式不仅不够灵活方便,且会带来以下问题:
一是页面展示效果不佳。页面参数较多,导致页面冗长,页面交互性不够友好,弹出窗的展示也不美观,影响用户操作的直观感受和产品的交互性。
二是编写页面时,由于页面参数的繁多,造成大量时间耗费在页面样式的修改上,也会带来代码的大量冗余和不易维护。
技术实现要素:
本发解决的技术问题明在于提供一种可重用的步骤窗口实现方法,解决了当页面参数较多时,参数项都集中在一个页面,既不方便参数校验页面展示也不够美观的问题。
本发明解决上述技术问题的技术方案是:
所述的包括如下步骤:
步骤1:封装一个popupWindow类,提供一个基础的弹出窗;
步骤2:popupWindow里定义窗口样式cls,封装窗口的样式;
步骤3:实例化一个popupWindow对象;
步骤4:定义cls为stepwindow;
步骤5:定义窗口对象的宽度和标题;
步骤6:定义窗口对象文本内容的获取方式;
步骤7:在callback回调函数里定义点击不同按钮时触发的事件;
步骤8:定义listeners监听器;
步骤9:结束。
所述的步骤窗口是页面弹出窗的一种,该种弹出窗将所需要展示的内容分类到多个步骤页面上,通过一个或多个标签按钮进行切换。
popupWindow类提供一个基础的弹出窗,里面封装了基础弹出窗的样式和特征,可通过实例化一个popupWindow对象,再添加对象私有的特征配置,来实现其他类别的弹出窗口;
在popupWindow类中将窗口的样式封装起来,通过窗口样式cls这个配置项把自定义的窗口样式加载进来。
定义cls为stepwindow,表示当前窗口为步骤窗口,通过定义cls属性为stepwindow来与其他类型的窗口类型区分开。
文本内容的获取可以结合多种方式,一种是通过url链接加载到窗口对象,另一种是通过页面对象的id获取页面的内容并将内容加载到窗口对象中。
对于需要在页面提交请求后返回操作结果或点击按钮触发事件后执行某些特定操作的情况,可以在callback函数写入期望执行的操作,包括点击提交后页面返回请求成功或请求失败。
触发事件里可以添加当前页面的输入参数的校验及点击该按钮时,当前页面其他按钮的显示与隐藏情况,同时还可以在事件中添加当前页面点击下一步时触发提交请求的操作。
listeners监听器中定义了一些下拉框、单选框的事件处理,根据用户输入的参数值的变化,展示出相应的联动变化。
本发明通过引入一种可重用的步骤窗口的实现方法,将页面一些可重用的框架独立出来,多步骤窗口的模式解决了参数较多时单窗口页面展示不美观不简洁的问题,同时,可重用的步骤窗口也满足了不同开发场景的需要,提高了开发人员的工作效率,增强了页面组件的可重用性。
附图说明
下面结合附图对本发明进一步说明:
图1为本发明方法流程图.
具体实施方式
如图1所示,首先设置窗口页面的样式属性,保证页面的展示效果
步骤弹出窗口的具体实现,包括窗口类型、窗口大小的设置,按钮、事件、回调函数的定义和处理
<script type=″text/javascript″>
function testO(){
把弹出窗定义为步骤弹出窗
var win=new PopupWindow({
cls:′stepwindow′,
设置弹窗宽度和标题
width:600,
title:″创建虚拟机″,
设置弹窗内容,直接获取ex_createvm_box的内容
content:(′#ex_createvm_box′).contents(),
autoShow:true,
定义弹窗的按钮
buttons:[
{″name″:″cancel″,″text″:″取消″},
{″name″:″prev″,″text″:″上一步″},
{″name″:″next″,″text″:″下一步″},
{″name″:″ok″,″text″:″确定″}
],
在回调函数里定义点击按钮触发事件后期望执行的操作,如点击提交后页面返回请求成功或请求失败
定义监听器,监听器中添加了事件处理,根据用户输入的参数值的变化,发生联动变化
定义步骤窗口页面的显示顺序
定义步骤的相应处理