总所周知的easyui的tab组件在创建选项卡的时候,动态的加载内容有两种方式,即content和href。使用content的时候一般都是使用iframe的方式嵌入一个页面,适用于小型项目,也易于它人去查看你的源代码,不利于代码保护,这种方式使用简单,一般不会出现什么问题。在使用href方式的时候,却有不少的问题需要注意.
例如如下:有两个html页面,tab.htm为tab选项卡页面,kind.htm页面为tab动态加载调用的页面,里面使用了富文本编辑器
tab.html源码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!
DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns="http://www.w3.org/1999/xhtml" >
<
head
>
<
title
>无标题页</
title
>
<
script
src="js/kindeditor/kindeditor-all.js" type="text/javascript"></
script
>
<
script
src="js/kindeditor/lang/zh_CN.js" type="text/javascript"></
script
>
<
link
href="js/kindeditor/themes/default/default.css" rel="stylesheet" type="text/css" />
<
script
src="js/easyui/jquery-1.8.0.min.js" type="text/javascript"></
script
>
<
script
src="js/easyui/jquery.easyui.min.js" type="text/javascript"></
script
>
<
link
href="js/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<
link
href="js/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
</
head
>
<
body
>
<
div
class="easyui-tabs">
<
div
data-options="iconCls:'icon-reload',href:'kind.htm'">
</
div
>
</
div
>
</
body
>
</
html
>
|
kind.htm源码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<
script
type="text/javascript">
var editor;
$(function() {
window.setTimeout(function() {
editor = KindEditor.create('#note', {
width : '680px',
height : '300px',
items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink' ],
uploadJson : '/fileController/upload',
fileManagerJson : '/fileController/fileManage',
allowFileManager : true
});
}, 1);
});
</
script
>
<
div
class="easyui-layout" data-options="fit:true,border:false">
<
div
data-options="region:'center',border:false" title="" style="overflow: hidden;">
<
form
id="form" method="post">
<
table
class="table table-hover table-condensed">
<
tr
>
<
th
>
编号
</
th
>
<
td
>
<
input
name="id" type="text" class="span2" value="8c130179-b86d-4da2-9028-f819619216ff"
readonly="readonly">
</
td
>
<
th
>
BUG名称
</
th
>
<
td
>
<
input
name="name" type="text" placeholder="请输入BUG名称" class="easyui-validatebox span2"
data-options="required:true" value="zsdcasdasdasd">
</
td
>
</
tr
>
<
tr
>
<
th
>
BUG类型
</
th
>
<
td
>
<
select
name="typeId" class="easyui-combobox" data-options="width:140,height:29,editable:false,panelHeight:'auto'">
<
option
value="0">错误</
option
>
<
option
value="1" selected="selected">功能</
option
>
</
select
>
</
td
>
<
th
>
浏览服务器附件
</
th
>
<
td
>
<
button
type="button" class="btn" onclick="fileManage();">
浏览服务器</
button
>
</
td
>
</
tr
>
<
tr
>
<
th
>
BUG描述
</
th
>
<
td
colspan="3">
<
textarea
name="note" id="note" cols="50" rows="5">kindeditor</
textarea
>
</
td
>
</
tr
>
</
table
>
</
form
>
</
div
>
</
div
>
|
当你运行tab.htm页面以后你会发现虽然kind.htm页面的内容都载入进来了,但是富本文编辑器失效了.
这时候的解决方法如下:在kind.htm页面中用panel组件将所有的内容包起来即可,或者在tab.htm页面中的tab中创建一个panel,然后将panel组件的内容使用href动态加载,地址指上kind.htm页面即可.(PS:小菜鸟一枚,为什么会这样如果有大虾看到了这且知道原因请不吝赐教!)
解决的后的代码如下:
1.tab.htm页面使用panel解决:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!
DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns="http://www.w3.org/1999/xhtml" >
<
head
>
<
title
>无标题页</
title
>
<
script
src="js/kindeditor/kindeditor-all.js" type="text/javascript"></
script
>
<
script
src="js/kindeditor/lang/zh_CN.js" type="text/javascript"></
script
>
<
link
href="js/kindeditor/themes/default/default.css" rel="stylesheet" type="text/css" />
<
script
src="js/easyui/jquery-1.8.0.min.js" type="text/javascript"></
script
>
<
script
src="js/easyui/jquery.easyui.min.js" type="text/javascript"></
script
>
<
link
href="js/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<
link
href="js/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
</
head
>
<
body
>
<
div
class="easyui-tabs">
<
div
data-options="iconCls:'icon-reload'">
<
div
class="easyui-panel" title="My Panel"
style="height:700px;"
data-options="href:'kind.htm',noheader:true,fit:true,height:700">
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
|
2:kind.htm页面用panel包含:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<
script
type="text/javascript">
var editor;
$(function() {
window.setTimeout(function() {
editor = KindEditor.create('#note', {
width : '680px',
height : '300px',
items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink' ],
uploadJson : '/fileController/upload',
fileManagerJson : '/fileController/fileManage',
allowFileManager : true
});
}, 1);
});
</
script
>
<
div
class="easyui-panel" title="My Panel"
style="height:700px;"
data-options="noheader:true,fit:true,height:700">
<
div
class="easyui-layout" data-options="fit:true,border:false">
<
div
data-options="region:'center',border:false" title="" style="overflow: hidden;">
<
form
id="form" method="post">
<
table
class="table table-hover table-condensed">
<
tr
>
<
th
>
编号
</
th
>
<
td
>
<
input
name="id" type="text" class="span2" value="8c130179-b86d-4da2-9028-f819619216ff"
readonly="readonly">
</
td
>
<
th
>
BUG名称
</
th
>
<
td
>
<
input
name="name" type="text" placeholder="请输入BUG名称" class="easyui-validatebox span2"
data-options="required:true" value="zsdcasdasdasd">
</
td
>
</
tr
>
<
tr
>
<
th
>
BUG类型
</
th
>
<
td
>
<
select
name="typeId" class="easyui-combobox" data-options="width:140,height:29,editable:false,panelHeight:'auto'">
<
option
value="0">错误</
option
>
<
option
value="1" selected="selected">功能</
option
>
</
select
>
</
td
>
<
th
>
浏览服务器附件
</
th
>
<
td
>
<
button
type="button" class="btn" onclick="fileManage();">
浏览服务器</
button
>
</
td
>
</
tr
>
<
tr
>
<
th
>
BUG描述
</
th
>
<
td
colspan="3">
<
textarea
name="note" id="note" cols="50" rows="5">kindeditor</
textarea
>
</
td
>
</
tr
>
</
table
>
</
form
>
</
div
>
</
div
>
</
div
>
|