JBox的简单使用Demo

插件描述：jBox是一个强大和灵活的jQuery插件，用于创建你所有的模态窗口，提示，通知或更多。

下载网站：http://www.jq22.com/jquery-info442

使用方法 

工具提示

你可以使用jQuery选择器添加工具提示元素：

$('.tooltip').jBox('Tooltip');

在用class=“tooltip”的元素将打开工具提示：

<span class="tooltip" title="My first tooltip">Hover me!</span><span class="tooltip" title="My second tooltip">Hover me!</span>

模态窗口

你可以设置为相同的模态窗口提示。但大多数时候你会想要更多的方法，如一个标题或HTML内容：

new jBox('Modal', {    width: 300,    height: 200,    attach: $('#myModal'),    title: 'My Modal Window',    content: '<i>Hello there!</i>'});<div id="myModal">Click me to open a modal window!</div>

注意事项

通知后将自动打开,并在一段时间后自我毁灭：

new jBox('Notice', {    content: 'Hurray! A notice!'});

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.  调用函数：

[java] view plain copy

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

[java] view plain copy

1. var baseUrl = "<@full_path path="/"/>";  
2.   
3. //各种弹出框的JS调用方法  
4. function showPop(type,url) {  
5.     if('addParamsPop' == type) {  
6.         $.jBox("iframe:<@full_path path="app/addParamsItem"/>", {  
7.             title: "新增参数",  
8.             width: 600,  
9.             height: 300,  
10.             buttons: { '关闭': true }  
11.         });  
12.     } else if('updateParamsPop' == type) {  
13.         $.jBox("iframe:" + url, {  
14.             title: "修改参数",  
15.             width: 600,  
16.             height: 300,  
17.             buttons: { '关闭': true }  
18.         });  
19.     } else if('addOrgPop' == type) {  
20.         var url = baseUrl + 'commonorg/getCheckboxTreeOrg?checkedInfo=' + $("#orgScope").val();  
21.         $.jBox("iframe:" + url, {  
22.             title: "组织选择",  
23.             width: 600,  
24.             height: 300,  
25.             buttons: { '关闭': true }  
26.         });  
27.     } else if('addTagPop' == type) {  
28.         var url = baseUrl + 'appTag/getCheckboxTreeTag?checkedInfo=' + $("#appTag").val();  
29.         $.jBox("iframe:" + url, {  
30.             title: "标签选择",  
31.             width: 600,  
32.             height: 300,  
33.             buttons: { '关闭': true }  
34.         });  
35.     } else {  
36.         //type传递空或者为close表示关闭窗口  
37.         $.jBox.close(true);  
38.     }  
39. }  

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

[java] view plain copy

1. //获取值，组装后返回  
2. function returnResult() {  
3.       
4.     if(!$('form').valid())  
5.         return;  
6.       
7.     var paramName = document.getElementById("paramName");     
8.     var paramCode = document.getElementById("paramCode");     
9.     var paramValue = document.getElementById("paramValue");     
10.       
11.     //alert("value is " + paramName.value + "," + paramCode.value + "," + paramValue.value  );  
12.       
13.     var result = paramName.value + "," + paramCode.value + "," + paramValue.value;  
14.     //window.returnValue = result;  
15.     //window.close();  
16.       
17.     window.parent.addSort(result);  
18.     window.parent.showPop('close');  
19. }