使用jquery-controls.doc

2019-2-15最后使用jquery-controls目录jquery-controls简介3一、开始使用jquery-controls3(1)加载完毕后回调函数3(2)预处理参数传递3二、工作流图形组件：4(1)工作流加载函数4(2)工作流初始化可配参数4(3)wmode参数的使用5(4) toolbarAlign参数的使用7(5) status参数的使用8(6) uixml参数的使用11(7)callback回调函数23(8) 通过graphicXml接口方法对界面数据进行存取23(9) clickWorkNode接口与bind接口25二、多文件上传组件26(1) 多文件上传下载组件加载函数26jquery-controls简介jquery-controls使用flash相关技术的特性实现了一系列单纯使用html所实现不了的功能，包括图形方面的如工作流、数据地图、以及功能方面如多文件上传、服务器主动数据推送。一、开始使用jquery-controls jquery-controls通过jquery插件的形式集成，于是我们在使用之前需要将jquery核心包引入如然后将对应插件js以及相关文件夹拷贝的对应目录，固定目录为controls目录下即可。1、jquery-controls插件统一程序入口风格插件统一使用loadXXX的风格入口，例如需要加载多文件上传组件我们会这样调用：$(function() $(div).loadFileUpDownloader (););于是程序会将界面上所有div中都添加上传下载组件。(1)加载完毕后回调函数当需要在flash正常加载完毕后执行一个回调函数时，我们统一书写方式为如下：$(function() $(div).loadFileUpDownloader (function()alert(“上传下载按钮加载完毕！”);););(2)预处理参数传递当需要在加载时对flash进行预先设置时可能有一些关于改flash相关的功能存在，并且附带一些参数，一般地我们采取以下方式来配置这些参数$(function() $(div).loadFileUpDownloader (wmode: transparent););二、工作流图形组件：在一些业务场景中通常会有一些流程处理，比如各个级次领导处理审批时，或者工作项之间有前后互相牵制的关系时等等。我们需要有一个统一的位置来配置这个流程，并且通过图形化对流程进行直观的查看和修改。现有已经使用此工作流图形组件的效果如下：(1)工作流加载函数加载工作流时通过在页面载入成功后调用如下函数进行加载。$(div).loadWorkFlow();会在页面中所有div中都添加工作流组件。(2)工作流初始化可配参数工作流常用可配参数如下表：参数描述wmode标志显示模式是否透明，可选参数为“window”,”transparent”,若为window则表示不明，若为”transparent”则为透明，默认为window模式。toolbarAlign标志工具条的位置，可选参数为”left”,”right”,若为left时工具栏会靠左对齐，若为right则工具栏会靠右对齐。默认为”left”status表明当前的一个编辑模式，可选参数有三个edit、view 、view_with_nodetoolbar_contextmenu，当为edit时为可编辑修改，当为view时，则为紧查看模式，当为nodetoolbar_contextmenu模式时，允许含有上下文菜单和节点工具条（详细信息请查看之后的相关）uixml表明整个工作流初始化之后的一个状态，包括工具条中可包含的按钮，按钮拖出后的节点状态以及节点包含的相关特性（详细信息请查看之后的相关描述）(3)wmode参数的使用我们通过此参数来配置工作流界面的透明特征，通过如下调用方式使用此参数：$(function() $(div). loadWorkFlow (wmode: transparent););当我们希望工作流可以在其他工作界面透明显示时，我们允许将工流设置为透明状态，典型的需求是假如我们有个审批流程，我们希望在比较小的界面尽量显示所需要审批的数据表格，但是我们也希望用一种比较亲和的可选方式显示当前审批所走的流程是一种什么情况，那么我们可以使用如下覆盖方式，并且允许除节点之外的其他地方保持透明状态：当然，此种方式会造成一定的混乱，但是我们可以稍加变动，使背景变得稍微灰淡一点，以此来提高用户体验，突出重点如下：当然将工作流展现放置到什么地方合适，以及怎样放置合适是受到用户的要求以及项目本身各种因素制约的，我们更加注重用户的直接感受和使用便捷度，需要多听取他们的意见。(4) toolbarAlign参数的使用界面布局可配置的项暂时并不多，我们需要在新需求来临时根据具体需求迭代开发并持续抽象和完善，当前一个简单配置是toolbarAlign参数的使用，它允许我们控制流程图工具条的停靠位置是界面左边还是界面右边。我们通过如下代码来对此参数进行配置:$(function() $(div). loadWorkFlow (toolbarAlign: right););如果以上面的方式调用后，工作流会以如下方式展示：工具条会停靠在界面右边。同样道理加入我们设置工具条停靠到左边，那么就会是如下的效果(5) status参数的使用在实际软件应用中，我们不仅仅在工作流配置界面需要类似工作流图形的方式来表达信息，我们还需要使用它在数据展示界面表达当前流程流转的信息，以及查看具体流程界面上关注的信息，甚至我们可以使用它来表示除工作流之外的其他有树状或者网状关系的相关数据的关系信息，例如价格，利润之间的计算关系等等，而这些情况都不需要对工作流进行例如添加删除节点等编辑过程，status参数定义了当前遇到的一些情况时的一种状态，我们使用它来满足上述的这些需求。status有三种状态可选择:1. edit编辑状态此种状态允许我们将工作流的编辑功能打开，进而使用工作流的编辑功能，它会显示包含删除，双击修改节点线条上面文本，显示左边（或右边取决于toolbarAlign）的工具条功能。如果当前工作流为编辑状态，我们可能会得到如下图所示的情况：除了图中所示，我们还可以将连线上下文菜单暴露出来。我们通过如下调用方式将工作流图形组件状态设置为编辑状态$(function() $(div). loadWorkFlow (status: edit););2. view 仅查看状态当我们不需要用户对工作流进行编辑，而只是希望通过工作流的图形化界面为用户直观地展示一些对用户来说有很大价值的信息时，我们可以通过设置状态为view仅查看状态实现这一需求。我们通过如下代码来对此状态进行设置：$(function() $(div). loadWorkFlow (status: view););设置完毕之后显示出的工作流如下图所示：值得注意的是，假如不允许用户编辑节点，那么节点数据则是通过系统数据组织而来，然后传入到工作流图形界面当中的。3. view_with_nodetoolbar_contextmenu 含有工具条和上下文菜单的仅查看状态更进一步，用户的需求是根据当前功能的使用过程逐渐增加出来的，那么当用户看到节点之后就会希望查看节点相关的一些其他信息，而这些信息是不适宜直接在流程当中直接显示的，我们通过将具体节点和线条编辑功能收起，而将节点工具条以及节点和线条的上下文菜单放开的方式来恰到好处地满足这一需求，我们通过如下方式来设置此状态：$(function() $(div). loadWorkFlow (status: view_with_nodetoolbar_contextmenu ););当设置完毕之后，我们可以得到如下图所示的状态：(6) uixml参数的使用uixml参数集中体现了界面当前的众多功能，主要是通过配置工具条中的按钮来实现编辑器的相关功能的。它通过xml的方式来表达各个功能之间的相互关系。一种典型的xml结构如下：delcallback起点默认显示0x00fffffalseline0x9999FF新建线条false配置转移条件configureFormula detailmydetail 0 起点 0 配置节点信息mydetail我们通过对工具条本身的定义和对全局的一些定义来控制工作流编辑器的整体行为。下面我们将通过逐步递增的方式讲解配置工作流编辑器图形界面功能的过程。(1)xml是有根节点的，uixml的根节点为workflow。于是我们的基础xml格式为：(2)我们需要配置界面工具条的按钮相关信息，于是我们添加了toobar节点来表示工具条的概念。值得注意的是，工作流界面当中仅允许拥有一个工具条。(3)我们要配置的是工具条中的具体按钮，于是按钮的概念我们抽象成了xml中的一个节点toolbarbtn如下：(4)下面我们需要对具体按钮toolbarbtn的展示方式和它所对应功能进行配置，下表说明了可配置的直接项目:子节点或属性描述iconindex（属性）标志使用第几个按钮图标，系统内置了几种默认图标可供选择，在之后的版本当中可能会得到进一步扩充每种图标都包含了一种大样式和一种小样式。分别对应按钮图标和拖出的节点图标。title（子节点）标志工具条的显示文字，工具条的显示文字会显示到工具条图标的右边部分。content（子节点）标志该按钮拖出的节点当中节点上面默认的文字，如下所示：color（子节点）标志该按钮拖出的节点当中节点的颜色。diamond（子节点）标志该节点形状是否为菱形，可选值为true和false，默认为false,菱形的形状不包含大图标，如下所示：nodes（子节点）可选，标志该按钮所拖出的节点的具体信息，允许一个按钮一次拖出一组不同数目的节点。nodetoolbar（子节点）标志该按钮所拖出节点上面节点工具条的具体显示方式contextmenu（子节点）标志该按钮所拖出节点所对应的上下文菜单。 (5)值得注意的是，我们采用了类似css同样的概念解决统一设置和细节设置的灵活度问题，即如果有一组子对象，我们可以对整体属性进行设置，也可以对单独子对象属性进行设置来覆盖整体设置的属性。之后我们首先将介绍各个子节点属性的作用，然后将探讨这种层叠样式的使用过程。(6) iconindex 图标属性系统内置了如下一些图标： 些图标可以直接通过以0开始的下标访问。如当希望当前按钮拖动出来的是标志H的按钮，我们将以如下方式设置iconindex属性：(7) title 标题子节点title标题子节点提供了对按钮文字部分的设置能力，例如我们如果这样添加设置项：手工节点我们得到的按钮显示样式将是：(8) content内容子节点和color颜色子节点不可否认的是，我们在节点在被拖动出来之前，我们是不知道按钮最终的呈现方式是什么样的，于是我们需要通过对按钮进行配置，从而定义出按钮的一些行为，其中包括拖动出来的节点的默认中间显示的文本和按钮显示的渐变颜色。例如我们通过如下配置来设置按钮的文本和显示颜色：手工节点新建节点0xffff00之后，我们通过拖动此按钮所添加的节点样式如下：(9) nodetoolbar 节点工具条 和contextmenu 上下文菜单工作流组件更为强大的地方在于我们能够以统一的方式定义节点上方的节点工具条的具体内容，例如我们需要直接通过节点上面的工具条中的按钮拖出线条，我们可以通过定义nodetoolbar并定义它的行为，如下：手工节点新建节点0xffff00line于是我们会得到如下图的效果：更进一步，我们希望定义这个按钮拖动出来的线条的颜色、中间显示的默认内容以及线条的样式是否为虚线样式，我们可以通过如下方式定义：手工节点新建节点0xffff00line0xffff00新建线条true于是我们拖动出来的线条效果如下：有的时候，我们所拖动出来的线条虽然简单，但是它却包含了大量信息，比如常见的利润和利润率的关系之间包含计算方式，统计方式以及相关统计人员信息等等，我们需要对这些信息进行查看甚至是编辑，需要一个查看或编辑信息的切入点，那么线条的上下文菜单提供了对类似需求的一个支持。我们通过如下方式为拖动出来的线条添加上下文菜单：手工节点新建节点0xffff00line0xffff00新建线条true线条上下文菜单这样在线条上面右击就会出现含有一个自定义菜单项的菜单。此时我们需要给此菜单项添加点击回调事件以相应点击，我们通过如下的方式配置：手工节点新建节点0xffff00line0xffff00新建线条true线条上下文菜单onLineMenuClick其中添加的callback子项标志着当点击此上下文菜单时，我们会调用的javascript方法名称，关于callback回调函数的详细说明会在之后进行讲解。在节点工具条中不仅仅允许添加线条，我们还允许添加一种按钮，类型为detail，通过如下方式添加：手工节点新建节点0xffff00line0xffff00新建线条true线条上下文菜单onLineMenuClickdetailonDetailClick于是我们可以得到如下效果：同样，当点击按钮是，我们会回调相应javascript函数。对于节点本身的上下文菜单，我们通过对按钮直接子节点配置即可，于是我们使用如下方式配置：手工节点新建节点0xffff00line0xffff00新建线条true线条上下文菜单onLineMenuClickdetailonDetailClick配置节点信息mydetail值得注意的是，每个上下文菜单的配置都是没有数量限制的。(10) nodes 按钮拖动出来节点的详细配置我们的需求当中偶尔会遇到这样一种情况，某几个节点虽然没有线条直连，但是它们却必须成组出现和删除，换句话说是有逻辑关联关系的，我们允许依靠对按钮的配置实现单个按钮拖动一组节点出现的功能，通过nodes直接子节点进行配置。比如可以我们通过类似下面的配置来实现拖出两个按钮的功能：手工节点新建节点0xffff00line0xffff00新建线条true线条上下文菜单onLineMenuClickdetailonDetailClick配置节点信息mydetail为了标志它们之间的关联关系，我们通过简单的动画方式，多个按钮从中间往外分开，我们通过定义distance来定义分开的距离，rotation来定义分开的整体旋转角度，使用duration来定义运行分开动画的持续时间，我们根据客户需求允许进一步开发扩展效果。在node子节点，我们必须标明拖出的节点每个节点的大图标在图标图片的下标位置，即指定iconindex，同样是以0开始的，以及我们必须标明每个节点中间默认显示的文字，我们通过content属性来指定。这两个节点将使用在toolbarbtn中配置的节点样式，包括颜色形状。但是，我们可以为其单独配置工具条和上下文菜单相关内容，如下：手工节点新建节点0xffff00line0xffff00新建线条true线条上下文菜单onLineMenuClickdetailonDetailClickline0x9999ff新建线条false配置转移条件configureFormula配置节点信息mydetail配置节点信息mydetail而这些配置信息的工作方式与给单个节点配置的是相同的，可参考上文相关说明。最后我们讨论一下另外一个客户需求，我们有时候不仅仅需要控制从某个节点拉出去的线的自身样式和行为，我们还需要控制指向此节点的线条的样式和行为，那么我们通过在node节点上添加incolor属性以及在node中添加incontextmenu直接子节点便可满足此需求，方式如下：手工节点新建节点0xffff00line0xffff00新建线条true线条上下文菜单onLineMenuClickdetailonDetailClick配置节点信息mydetailline0x9999ff新建线条false配置转移条件configureFormula配置节点信息mydetail配置节点信息mydetail这样，当我们刚刚从节点上面拖出线条时会以起始节点的配置显示线条样式，当我们挂到配置有终止节点样式的节点上面时，线条就会以终止节点配置的样式显示线条以及线条菜单。(7)callback回调函数为了使得callback回调函数具有合理的相对大的灵活性，我们采取了两种措施实现1. 回传与本操作有关系的对象的片段xml2. 回调函数返回值中若包含有与界面变化相关的数据，则按照新数据对界面对象重新绘制。片段xml允许我们获得几乎所有与操作相关的数据，甚至是自定义的有结构的数据，例如假设我们希望为我们的某个按钮通过添加xml节点打下一个基础标识，我们可以这样添加一个自定义节点：手工节点新建节点0xffff00标识当回调函数调用时，我们会提供此节点的相关信息，其中包括所有最初拖动出此节点的按钮的相关信息，通过xml方式返回如下：手工节点新建节点0xffff00标识那假如我们写某一个javascript回调函数，并且把传入到其中的xml数据中的content节点文本修改为“修改后的节点”，当回调函数返回时，我们把xml文本返回，那么对应节点的文本就会变为修改后的文本，对于其他和节点图形相关的例如颜色等属性，修改后节点都会按照对应的修改后的值而做改变。(8) 通过graphicXml接口方法对界面数据进行存取为了使得jquery的相关知识能够重用，我们使用类似attr等方法相同的模式命名来同时实现进数取数两种操作。1. 取数我们通过以下调用方式取得当前所绘制的图形的相关数据：$(function() var xmltxt = $( div). graphicXml (););其中数据从第一个匹配到的含有工作流组件div容器中的取得。假如我们绘制了如下图形：我们会得到如下数据：新建线条413160CommWorkNode6CommWorkNode27.起点gname0.867024943232536365535372123CommWorkNode60.手工节点65280362234CommWorkNode271.00其中line节点表示线条，worknode节点表示工作流节点，而她们含有的数据比较明显。不过虽然可以通过调整其中的数据，比如说颜色等，但是通常都是使用已经编辑好的工作流原xml数据而只读取其中所需要的相关数据。值得注意的是，每个节点当中都会包含最初来源的那个工具条按钮中的所有信息，甚至是当时添加的自定义节点结构数据，而且强大的是你可以修改其中的某些数据来使得原来的节点拥有设计之前的不同表现形式或行为，如节点工具条等。2. 进数我们通过以下调用方式将数据输送进工作流图形组件以显示数据对应的图形形状：$(function() $( div). graphicXml (xmltxt););这样调用会为所有包含有工作流组件的div容器输送数据，那么这些工作流组件所显示出的图形将会是相同的。3. 对于groupname 分组名称的说明我们之前说明过，我们可能会一个按钮同时拖出多个节点，那么在取出数据时我们会对这些组使用groupname节点值加以区分。于是如果需要通过groupname验证工作流合法验证时就会派上用场。(9) clickWorkNode接口与bind接口对于界面点击回调和模拟点击接口我们暂时只放出了上面两个，我们可以通过clickWorkNode并传入借点id值来模拟点击某节点。其中id值为通过graphicXml读取过来对应节点下的id节点数据。我们还可以通过bind来绑定事件，允许绑定的事件有如下几个：WorkFlowEvent : MOUSE_DOWN : _mouseDown,MOUSE_UP : _mouseUp,CLICK : _click,FOCUS_OUT : _focusOut。三、多文件上传组件由于html中file文本域的种种限制，例如无法在上传之前查看文件大小，无法同时选择多个文件同时上传等等，极大地影响了用户体验度，当前改进上传用户体验的方式有两种，一种是通过公司自主开发灵活度高且具有丰富功能的activeX上传组件，但是它的缺点是需要用户下载安装，另一种是使用flash内置的文件上传下载的接口功能，由于flash的装机量覆盖度的优势，虽然它提供的接口并不多，但是对于提高用户的使用效率和体验来说已经基本上足够了，于是开发了类似的一个组件提供使用。上传组件并没有固定的界面，它仅仅是抽象出一系列接口并在界面上显示某块可点区域来提供上传下载的相关操作和功能。(1) 多文件上传组件加载函数$(function() $(div).loadFileUpDownloader (););(2)多文件上传组件初始化可配参数多文件上传组件常用可配参数如下表：参数描述wmode标志显示模式是否透明，可选参数为“window”,”transparent”,若为window则表示不明，若为”transparent”则为透明，默认为window模式。single标志组件的当前文件选择模式为单选择还是多选择。默认为true单选择。htmlText用于配置flash按钮的显示样式，可配样式允许包含基本的html格式文本以及图片，若不传则默认按照如下显示仅显示浏览两个字（详细信息请查看之后的相关描述）：extension用于限制所选文件类型，格式为*txt;*.pdf;类型。append用于表明文件选择过程是否为追加过程。默认为false不追加。(3)single参数的使用提供对选择方式的控制，如果将此参数设置为true,那么点击按钮之后弹出的文件选择框只允许选择一个文件，如下图：但是当设置为false时，我们可以选择多个文件，如下图：(4) htmlText参数的使用为了提高我们使用控件时按钮形状的灵活性，我们直接使用html字符串的形式来表达按钮展现形式，htmlText所支持的html如下表所示：标签 说明 锚标签 标签创建超文本链接并支持以下属性： targe