zoukankan      html  css  js  c++  java
  • JMJS系统总结系列JMJS中使用到的Jquery工具(四)

    Datepicker时间控件的使用

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

    &lt;script type="text/javascript" src="JS/datepicker/WdatePicker.js" &gt; &lt;/script&gt;

    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="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>标签中引入

    &lt;script type="text/javascript" src="JS/artDialog/artDialog.min.js" &gt; &lt;/script&gt;

    &lt;script type="text/javascript" src="JS/public.js" &gt; &lt;/script&gt;

    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>标签中引入。

    &lt;script type="text/javascript" src="JS/editor/kindeditor.js" &gt;&lt;/script&gt;

    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>标签中引入。

    &lt;script type="text/javascript" src="JS/Tree/codebase/dhtmlxcommon.js" &gt;&lt;/script&gt;

    &lt;script type="text/javascript" src="JS/Tree/codebase/dhtmlxtree.js" &gt;&lt;/script&gt;

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

    }

    });

    }

    学习的路上,分享的知识有不当的地方,希望大家指出。 感谢大家的阅读,希望这些分享能够给您带来帮助。
  • 相关阅读:
    网页结构树DOM
    网页设计之js
    css了解一下!!!
    Html !!!了解一下
    进程and线程and协程效率对比
    线程
    进程之生产者消费者模型(队列,管道,数据共享,进程池)
    进程之机制问题(锁,信号,事件)
    并发进程
    socket模块其他用法
  • 原文地址:https://www.cnblogs.com/lanchong/p/2160496.html
Copyright © 2011-2022 走看看