本文主要介绍ckfinder几种对话框的使用,ckfinder主要含有两种对话框,一种是openmsgdialog,另外一种是openConfirmdialog,openmsgdialog与js中alert比较相像,而openconfirmdialog是对应js中confirm.
首先我们介绍openmsgdialog,openmsdialog主要是起提示信息的作用,弹出一个对话提示用户。看如下代码
1.添加js引用
<script src="Js/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="CkEditor/ckfinder/ckfinder.js" type="text/javascript"></script>
2.添加js代码
<script type="text/javascript">
var api;
function BrowseServer(inputId) {
var finder = new CKFinder();
finder.basePath = 'CkEditor/ckfinder/'; //ckfinder所在路径
finder.callback = function (api) {//ckfinder创建时函数
var menuItem = {
label: '弹出对话框',
command: 'open'//其他地方调用命令标识
};
api.addFileContextMenuOption(menuItem, function (api, file) {
api.openConfirmDialog("", "Are you sure?", function (value) {
api.openMsgDialog("Processing", "OK, processing, please wait...");
});
});
};
api = finder.popup(); //调用ckfinder
}
function closeServer() {//ckfinder关闭函数
api.closePopup(function () {
alert("按钮关闭");
});
}
function destroyServer() {//ckfinder销毁函数
api.destroy(function () {
alert('The CKFinder instance was destroyed.');
});
}
$(function () {
$("#btnAdd").click(function () {
BrowseServer("aa");
});
$("#btnClose").click(function () {
closeServer(); //关闭弹出对话框
destroyServer(); //销毁api
});
$("#btnDestroy").click(function () {
destroyServer();
});
});
</script>
3.添加html控件
<div>
<div id="lblInfo">
</div>
<input type="button" id="btnAdd" value="上传" />
<input type="button" id="btnClose" value="关闭" />
<input type="button" id="btnDestroy" value="销毁" />
</div>
4.点击上传按钮弹出ckfinder对话框,选择一个文件右键点击弹出对话框按钮,弹出一个对话框,效果如下图
4.openmsgdialog与alert的区别在于,在callback函数中使用alert弹出对话框是在原先的页面弹出提示信息,而openmsgdialog是在ckfinder对话框中弹出提示信息,openconfirmdialog与confirm的也是同样的区别