JMJS系统总结系列----JMJS中使用到的Jquery工具（四）
Datepicker时间控件的使用
A、在需要调用对话框的页面<head></head>标签中引入。
<script type="text/javascript" src="JS/datepicker/WdatePicker.js" > </script>
B、在文本框中加入时间控件的样式（class="Wdate"）和事件调用onclick="javascript:WdatePicker();"。
<input type="text" name="Accept/SubmitDate" class="Wdate w_bfb98" readonly="readonly" title="申请提交日期" myClass="txt|y|0|25" id="Accept/SubmitDate" style="width:45%;" onclick="javascript:WdatePicker();">
<xsl:attribute name="value">
<xsl:call-template name="FormatDate">
<xsl:with-param name="DateTime" select="Accept/SubmitDate"/>
</xsl:call-template>
</xsl:attribute>
</input>
artDialog对话框控件
A、 在public.js中将artDialog的相关方法进行封装。
//****************************************************
// 名 称：initSkin
// 说 明：初始化art.dialog的Skin
// 参 数：无
// 返 回 值：无
//****************************************************
function initSkin() {
var d = art.dialog.defaults;
// 按需加载要用到的皮肤，数组第一个为默认皮肤
// 如果只使用默认皮肤，可以不填写skin
d.skin = ['chrome', 'default', 'facebook', 'aero'];
}
//****************************************************
// 名 称：showAlertDialog
// 说 明：弹出Alert
// 参 数：content：内容(html)； fun：点击确定按钮后执行的方法，此参数可以省略
// 返 回 值：无
//****************************************************
function showAlertDialog(content, fun) {
art.dialog({
icon: 'alert',
lock: true,
skin: 'chrome',
window: 'top',
title: '提示',
content: content,
yesFn: fun == undefined ? true : fun
});
}
//****************************************************
// 名 称：showOKDialog
// 说 明：弹出succeed的Alert
// 参 数：content：内容(html)； fun：点击确定按钮后执行的方法，此参数可以省略
// 返 回 值：无
//****************************************************
function showOKDialog(content, fun) {
art.dialog({
icon: 'succeed',
lock: true,
window: 'top',
skin: 'chrome',
title: '成功',
content: content,
yesFn: fun == undefined ? true : fun
});
}
//****************************************************
// 名 称：showErrorDialog
// 说 明：弹出Error的Alert
// 参 数：content：内容(html)； fun：点击确定按钮后执行的方法，此参数可以省略
// 返 回 值：无
//****************************************************
function showErrorDialog(content, fun) {
art.dialog({
icon: 'error',
lock: true,
skin: 'chrome',
title: '出错',
window: 'top',
content: content,
yesFn: fun == undefined ? true : fun
});
}
//****************************************************
// 名 称：showWarningDialog
// 说 明：弹出警告的Alert
// 参 数：content：内容(html)； fun：点击确定按钮后执行的方法，此参数可以省略
// 返 回 值：无
//****************************************************
function showWarningDialog(content, fun) {
art.dialog({
icon: 'error',
lock: true,
skin: 'chrome',
title: '警告',
window: 'top',
content: content,
yesFn: fun == undefined ? true : fun
});
}
//****************************************************
// 名 称：showConfirm
// 说 明：弹出Confirm的Dialog
// 参 数：content 内容，funYes 确定函数，funNo 取消函数
// 返 回 值：无
//****************************************************
function showConfirm(content, funYes, funNo) {
art.dialog({
lock: true,
icon: 'confirm',
skin: 'chrome',
content: content,
title: '询问',
yesFn: function() {
funYes();
},
noFn: function() {
funNo();
}
});
}
B、 在需要调用对话框的页面<head></head>标签中引入
<script type="text/javascript" src="JS/artDialog/artDialog.min.js" > </script>
<script type="text/javascript" src="JS/public.js" > </script>
C、 调用需要使用的地方调用封装后的方法。
//****************************************************
// 名 称： CancelConfirm
// 说 明： 点击取消按钮时，进行相关的提示。
// 参 数：
// 返 回 值： 无
//****************************************************
function CancelConfirm() {
if (isChange) {
showConfirm('如果未保存数据，取消时将丢失。确定要取消吗？', function() {
window.close();
},
function() { });
}
else
window.close();
}
注意：也可以使用没有封装的方法
//****************************************************
// 名 称： OpenFlowWorkLookOverPage
// 说 明： 查看流程
// 参 数： 无
// 返 回 值： 无
//****************************************************
function OpenFlowWorkLookOverPage() {
var acceptID = GetElementValue("Accept/AcceptID");
var instanceID = GetElementValue("Accept/InstanceID");
var flowBaseID = GetElementValue("Accept/FlowBaseID");
var finished = GetElementValue("Accept/IsFinished");
var contentHtml = "";
var ajaxUrl = viewWorkFlowUrl + acceptID + "&InstanceID=" + instanceID + "&FlowBaseID=" + flowBaseID + "&IsFinished=" + finished
$.ajax({
url: ajaxUrl,
success: function(html) {
contentHtml = html;
art.dialog({ title: '查看流程', skin: 'chrome', width: '460px', height: '480px', lock: true, fixed: true, content: contentHtml, id: 'workFlowLookOverPage' });
},
error: function(xmlhttprequest, textstatus, errorthrown) {
defineWarmAlert("error！", false);
}
});
}
Editor文本编辑控件
A、 在需要调用对话框的页面<head></head>标签中引入。
<script type="text/javascript" src="JS/editor/kindeditor.js" ></script>
B、 在页面上调用
//****************************************************
// 名 称：EditPublicity
// 说 明：新增、编辑公示
// 参 数：无
// 返 回 值：无
//****************************************************
function EditPublicity(id)
{
KE.init({
id : 'content',
items : ['source', '|', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste','plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright','justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript','superscript', '|', 'selectall', '-','title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold','italic', 'underline', 'strikethrough', 'removeformat', '|', 'image','flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink', '|', 'about'],
afterCreate : function(id) {
KE.util.focus(id);
}
});
art.dialog(
{
title: '新增、编辑公示',
width: '720px',
height: '320px',
content:'<textarea id="content" name="content" style="width:700px;height:300px;visibility:hidden;"></textarea>',
skin: 'chrome',
yesFn: function() {
document.getElementById(id).value = KE.html('content');
}
});
KE.create('content');
if(document.getElementById(id).value != "")
{
KE.html('content',document.getElementById(id).value);
}
}
Tree控件的使用
A、 在需要调用对话框的页面<head></head>标签中引入。
<script type="text/javascript" src="JS/Tree/codebase/dhtmlxcommon.js" ></script>
<script type="text/javascript" src="JS/Tree/codebase/dhtmlxtree.js" ></script>
B、 在页面上调用
//****************************************************
// 名 称： initTree
// 说 明： 根据传入的xml数据，重新初始化树。
// 参 数： xml
// 返 回 值： 无
//****************************************************
function initTree(xml)
{
tree=null;
$("#ReceiveUse_tree").html("");
tree = new dhtmlXTreeObject("ReceiveUse_tree", "100%", "100%", 0);
tree.preventIECaching(true);
tree.setSkin('dhx_skyblue');
tree.setImagePath("JS/Tree/codebase/imgs/csh_bluebooks/");
tree.enableHighlighting(true);
tree.setOnClickHandler(tonclick);
tree.setOnDblClickHandler(tondblclick);
tree.loadXMLString(xml);
}
//****************************************************
// 名 称： SelectLink
// 说 明： 选择环节时，更新当前环节的办理人员。
// 参 数： contentHtml
// 返 回 值： 无
//****************************************************
function SelectLink()
{
var nodeID = document.getElementById("FlowWorkBook/NodeID").value;
$.ajax({
url: "Organization.do?action=GetOrganizatIonincludeUserTreeXML",
cache: false,
data: "NodeId=" + nodeID,
type: "POST",
ContentType: "text/xml;UTF-8",
success: function(xml) {
initTree(xml);
$("#FlowReceiveUser").html("");
}
});
}
