jeeSite快速二次开发框架

1.01 简述弹框插件

jeeSite前端提示框架主要使用了jBox2.3插件&＃xff08;关于jBox此处不做介绍了&＃xff0c;可自行百度查阅&＃xff09;。JBox手册https://stephanwagner.me/jBox/documentation。并对其进行了封装封装后的js路径&＃xff1a;

/creditrh/src/main/webapp/static/common/jeesite.js。

jBox项目下的路径为&＃xff1a;/creditrh/src/main/webapp/static/jquery-jbox/2.3/jquery.jBox-2.3.js。

jBox弹出层基础配置参数&＃xff1a;

对应的配置也都在这里面。

下面就对其应用实例做简单说明&＃xff1a;

1.01.1 消息提示框&＃xff1a;

最常见的应用&＃xff0c;带有确定和取消操作的提示框。jeeSite下对其进行了封装使用时可直接

在js或者标签上定义的单击事件中直接使用 如&＃xff1a;&＃xff08;前提当前页面下引用jeesite.js插件&＃xff09;

A.标签上直接定义使用

οnclick&＃61;"return confirmx(&＃39;确认要删吗&＃xff1f;&＃39;, this.href)"

B.自定义的js中使用&＃xff1a;

confirmx(&＃39;确认要删吗&＃xff1f;&＃39;, this.href)

查看封装的js代码&＃xff0c;不难发现使用confirmx&＃xff08;mess&＃xff0c;href&＃xff09;方法需要传递两个参数一个是提示内容&＃xff0c;令一个是点击确定后跳转的路径 都可自定义。

同样也可根据自己的业务需求定制属于自己的确认对话框&＃xff1a;代码如下

function 起个名字(mess, 自定义参数等, closed){

top.$.jBox.confirm(mess,&＃39;系统提示&＃39;,function(v,h,f){

if(v&＃61;&＃61;&＃39;ok&＃39;){

此处可以处理自己的业务需要&＃xff08;在提示框被点击确定后&＃xff09;&＃xff0c; 自定义参数等

}

},{buttonsFocus:1, closed:function(){

if (typeof closed &＃61;&＃61; &＃39;function&＃39;) {

closed();

}

}});

top.$(&＃39;.jbox-body .jbox-icon&＃39;).css(&＃39;top&＃39;,&＃39;55px&＃39;);

return false;

}

又如&＃xff1a;提示框系统改造的是alert并取方法名为alertx&＃xff1b;

此方法也可改造成自己业务需要的方法 如&＃xff1a;mess&＃xff0c;提示信息&＃xff0c;canshu&＃xff0c;此处为表单提交的formid“#xxxx”

function alertT(mess,canshu){

top.$.jBox.info(mess, &＃39;提示&＃39;, {closed:function(){

     if (typeof closed &＃61;&＃61; &＃39;function&＃39;) {

     closed();

     }

     $(canshu).submit();//也可定义其他自己所需要的业务js

     }});

     top.$(&＃39;.jbox-body .jbox-icon&＃39;).css(&＃39;top&＃39;,&＃39;55px&＃39;);

}

同样 其他的弹框提示加载信息提示等 也可根据自己的业务需要自己重写或者直接使用封装的js使用。

2.0.1框架自带封装的下拉框组件&＃xff0c;经典用法。见于系统字典配置页面下来选&＃xff1b;实现大致原来&＃xff0c;字典配置的参数写入数据库&＃xff0c;项目启动时加载数据库参数配置&＃xff0c;用到的地方从缓存中获取。

${fns:getDictList(&＃39;字典中的标签属性&＃39;)}&＃xff1b;此下拉选亦可改成后台动态下拉选&＃xff1b;只需将

items&＃61;"${fns:getDictList(&＃39;bank_prodect_guaranteeWay&＃39;)}"改为

items&＃61;"${后台传回的一个list}"即可使用。
更多好用功能可参考项目doc文档。

后续更多项目心得继续补充中。。。。