JMJS系统总结系列JMJS中使用到的Jquery工具（四）

Datepicker时间控件的使用

A、在需要调用对话框的页面<head></head>标签中引入。

B、在文本框中加入时间控件的样式（class="Wdate"）和事件调用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>标签中引入

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', '460px', height: '480px', lock: true, fixed: true, content: contentHtml, id: 'workFlowLookOverPage' });

error: function(xmlhttprequest, textstatus, errorthrown) {

defineWarmAlert("error！", false);

}

});

}

Editor文本编辑控件

A、在需要调用对话框的页面<head></head>标签中引入。

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: '新增、编辑公示',

'720px',

height: '320px',

content:'<textarea id="content" name="content" style="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>标签中引入。

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("");

}

});

}

学习的路上，分享的知识有不当的地方，希望大家指出。感谢大家的阅读，希望这些分享能够给您带来帮助。