JBox的简单使用例子

1. 首先导入相关JBox的JS以及CSS文件。

<link rel="stylesheet" type="text/css" href="<@full_path path="js/jBox/Skins/Default/jbox.css"/>"/>

<script src="<@full_path path="js/jBox/jquery.jBox-2.3.min.js"/>" type="text/javascript"></script>
<script src="<@full_path path="js/jBox/i18n/jquery.jBox-zh-CN.js"/>" type="text/javascript"></script>

2.  调用函数：

<th>新增参数:</th><td class="pn-fcontent"><input class="btn" type="button" value="新增" onclick="showPop('addParamsPop');"/></td>

var baseUrl = "<@full_path path="/"/>";//各种弹出框的JS调用方法function showPop(type,url) {if('addParamsPop' == type) {        $.jBox("iframe:<@full_path path="app/addParamsItem"/>", {    title: "新增参数",    width: 600,    height: 300,    buttons: { '关闭': true }});} else if('updateParamsPop' == type) {        $.jBox("iframe:" + url, {    title: "修改参数",    width: 600,    height: 300,    buttons: { '关闭': true }});} else if('addOrgPop' == type) {var url = baseUrl + 'commonorg/getCheckboxTreeOrg?checkedInfo=' + $("#orgScope").val();        $.jBox("iframe:" + url, {    title: "组织选择",    width: 600,    height: 300,    buttons: { '关闭': true }});} else if('addTagPop' == type) {var url = baseUrl + 'appTag/getCheckboxTreeTag?checkedInfo=' + $("#appTag").val();        $.jBox("iframe:" + url, {    title: "标签选择",    width: 600,    height: 300,    buttons: { '关闭': true }});} else {//type传递空或者为close表示关闭窗口        $.jBox.close(true);}}

3.  弹出框回调父页面函数：

 //获取值，组装后返回 function returnResult() {  if(!$('form').valid()) return;  var paramName = document.getElementById("paramName");    var paramCode = document.getElementById("paramCode");    var paramValue = document.getElementById("paramValue");     //alert("value is " + paramName.value + "," + paramCode.value + "," + paramValue.value  );  var result = paramName.value + "," + paramCode.value + "," + paramValue.value; //window.returnValue = result; //window.close();  window.parent.addSort(result); window.parent.showPop('close'); }