好的，我們先來看一張效果圖：

---

看著是不是還不錯(cuò)啊，我們來了解一下這個(gè)流程圖設(shè)計(jì)器：

跨瀏覽器，可兼容IE7--IE10， FireFox， Chrome， Opera等幾大內(nèi)核的瀏覽器，且不需要瀏覽器再加裝任何控件。 （IE7-IE8時(shí)，使用VML；IE9以上，FF，OPERA，CHROME，SAFARI上使用SVG）

• 多系統(tǒng)兼容性、可移植性:由于只包括前臺UI,因此二次開發(fā)者可很方便將本插件用在任何一種需要流程圖的B/S系統(tǒng)應(yīng)用上，流程圖的詳細(xì)實(shí)現(xiàn)邏輯完全交于后臺程序開發(fā)者自己實(shí)現(xiàn);對于后臺,只要能返回/接收能被本插件解析的JSON格式數(shù)據(jù)即可.所以本插件可用于不同的服務(wù)器語言建立的后臺上.
• 跨領(lǐng)域:流程圖設(shè)計(jì)器不止用在電信領(lǐng)域,在其它需要IT進(jìn)行技術(shù)支持的領(lǐng)域中都有重大作用.
  

  ---

以下從純技術(shù)實(shí)現(xiàn)層面具體描述:

• 頁面頂部欄、左邊側(cè)邊欄均可自定義；
• 當(dāng)左邊的側(cè)邊欄設(shè)為不顯示時(shí)，為只讀狀態(tài)，此時(shí)的視圖區(qū)可當(dāng)作是一個(gè)查看器而非編輯器。
• 側(cè)邊工具欄除了基本和一些流程節(jié)點(diǎn)按鈕外，還自定義新的節(jié)點(diǎn)按鈕，自定義節(jié)點(diǎn)都可以有自有的圖標(biāo)、類型名稱，定義后在使用可可在工作區(qū)內(nèi)增加這些自定義節(jié)點(diǎn)。
• 頂部欄可顯示流程圖數(shù)據(jù)組的標(biāo)題，也可提供一些常用操作按鈕。
• 頂部欄的按鈕，除了撤銷、重做按鈕外，其余按鈕均可自定義點(diǎn)擊事件。
• 可畫直線、折線；折線還可以左右/上下移動(dòng)其中段。
• 具有區(qū)域劃分功能，能讓用戶更直觀地了解哪些節(jié)點(diǎn)及其相互間的轉(zhuǎn)換，是屬于何種自定義區(qū)域內(nèi)的。
• 具有標(biāo)注功能，用橙紅色標(biāo)注某個(gè)結(jié)點(diǎn)或者轉(zhuǎn)換線，一般用在展示流程進(jìn)度時(shí)。
• 能直接雙擊結(jié)點(diǎn)、連線、分組區(qū)域中的文字進(jìn)行編輯
• 在對結(jié)點(diǎn)、連線、分組區(qū)域的各種編輯操作，如新增/刪除/修改名稱/重設(shè)樣式或大小/移動(dòng)/標(biāo)注時(shí)，均可捕捉到事件，并觸發(fā)自定義事件，如果自定義事件執(zhí)行的方法返回FALSE，則會(huì)阻止操作。
• 具有操作事務(wù)序列控制功能，在工作區(qū)內(nèi)的各種有效操作都能記錄到一個(gè)棧中，然后可以進(jìn)行撤銷（undo()）或重做（redo()），像典型的C/S軟件一樣。

0.4版改造:

• 加入了只導(dǎo)出編輯過的節(jié)點(diǎn)信息的功能,用戶可快速保存這些少量信息而不用保存整個(gè)流程圖.
• 加入了一個(gè)新的扁平化樣式可選用.

0.5版本

• 結(jié)點(diǎn)的樣式不再受到原有程序的限制，所有樣式均默認(rèn)為淡藍(lán)色長方形；
• 如果要指定為圓形，可在初始化時(shí)定義結(jié)點(diǎn)類型為”原有類型”+” round”；
• 如果要指定為復(fù)合結(jié)點(diǎn)，則可在初始化時(shí)定義結(jié)點(diǎn)類型為”原有類型”+” mix”。”原有類型”+” myType”中的myType可為自己寫的一種特殊樣式類。

• 原有的BUG已經(jīng)修復(fù)，可以放心下載了。

  ---

  >>大家可以點(diǎn)擊這里查看這個(gè)網(wǎng)址了解詳細(xì)內(nèi)容<<

總結(jié)

以上是生活随笔為你收集整理的基于JQUERY的WEB在线流程图设计器GOOFLOW 0.5版的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。