以下jsPlumb介紹基于jsPlubm1.3.3版本,并且基礎(chǔ)庫是用jQuery1.3.x或以上,與其他版本基礎(chǔ)庫或jsPlumb的比較或后期版本升級(jí),本文檔不做介紹。
Jsplumb是Jquery的一個(gè)插件,它能夠讓你用動(dòng)態(tài)的或靜態(tài)的鏈接來連接html界面上行的元素,并且從1.1.0版本開始,提供用鼠標(biāo)拖動(dòng)來鏈接。目前該插件支持三個(gè)javascript庫,有Jquery、MooToos、Yui3,jsplumb代碼是開源的,并且是麻省理工學(xué)院許可,由google進(jìn)行代碼托管。
官方示例:http://morrisonpitt.com/jsPlumb/html/demo.html
代碼地址:http://code.google.com/p/jsplumb/
Jsplumb介紹地址:http://jsplumb.tumblr.com/
JsPlumb允許您使用SVG、Canvas 或者 VML鏈接屏幕上的元素,這些取決于您使用的瀏覽器的能力。
瀏覽器的兼容性
jsPlumb 1.3.3 已經(jīng)在以下瀏覽器測(cè)試:
IE 6 on Windows XP
IE 7 on Windows XP
IE 8 on Windows XP
Firefox 3.5.8 on Windows XP
IE 9 on Windows 7
Chrome 12 on Windows 7
Firefox 3.5.8 on Windows 7
Firefox 3.6.3 on Ubuntu 10.04
Chrome on Ubuntu 10.04
Safari 4 on Mac Tiger
Safari 4 on Windows Vista
Safari 5.0.5 on Windows 7
Opera 10.54 on Windows XP
使用jsPlumb需要到如的類庫文件,是根據(jù)您使用的javascript類庫的不同而定,目前提供以下版本。
jQuery
jquery的1.3.x或更高版本
jquery ui的1.7.x或1.8.x(如果您需要支持拖放)
MooTools
MooTools核心庫版本1.2.4或更高版本(jsPlumb已在1.2.4和1.3.3版本上測(cè)試)
MooTools的Drag.Move的1.2.4.4或更高版本
YUI3
YUI3.3.X ,目前jsPlumb只在YUI3.3.0上測(cè)試,YUI3其他版本可能也可以正常工作
jsPlumb可以使用SVG,HTML5的畫布元素或VML去呈現(xiàn)需要顯示的對(duì)象,現(xiàn)代大部分瀏覽器都支持Canvas 和 SVG,但是IE9以下都不支持這些,默認(rèn)情況下,jsPlumb都使用canvas去渲染,但如果在使用IE9以下的情況下,jsPlumb將使用vml去渲染,您可以通過下列方式調(diào)整渲染模式:
jsPlumb是將所有鏈接的東西放在一起,所以在jsPlumb中,核心是鏈接對(duì)象,jsPlumb本身可以分成四個(gè)組成部分
錨(Anchor):一個(gè)位置,放置端點(diǎn)的地方,相對(duì)于一個(gè)元素的來源,您不需要自己硬編碼來創(chuàng)建它,jsPlumb提供給您各種功能,您只需要按照您的需要?jiǎng)?chuàng)建它就可以了。它沒有可視化的顯示,只是一個(gè)邏輯位置,可以使用錨的id來引用它,jsPlumb支持這樣做,并且您可以使用坐標(biāo)來表示[x,y,x方向,y方向]
端點(diǎn)(Endpoint ):鏈接的一端的可視化表示,您可以創(chuàng)建并可以鏈接他們;您可以讓他們支持拖拽,或者您可以直接使用jsPlumb.connect()在創(chuàng)建鏈接時(shí)直接創(chuàng)建它們。
連接器(Connector):鏈接兩個(gè)元素的線,頁面的可視化表示,jsPlumb有三種默認(rèn)類型:Bezier曲線,直線,和流程圖鏈接器,您不用去處理連接器,當(dāng)您需要使用它們時(shí),您只需要定義它們即可。
覆蓋物(Overlay):一個(gè)UI組件,是用來是用來裝飾連接器,例如標(biāo)簽、箭頭等。
錨的概念是指:定義一個(gè)鏈接線能夠鏈接的點(diǎn),jsPlumb有9個(gè)默認(rèn)的錨點(diǎn)位置,您可以使用它們?nèi)ユ溄釉兀唧w有:
這些位置在jsplumb底層代碼中都是以陣列語法表示的,[X,Y,DX,DY],其中X,Y是在區(qū)間[0,1]指定錨的位置,DX和DY是在區(qū)間[-1,1]指定曲線的事件錨的方向坐標(biāo),例如[0,0.5,-1,0]定義了一個(gè)“LeftCenter”連接器的曲線,從錨點(diǎn)單向向左的曲線. 同樣,[0.5,0,0,-1],定義一個(gè)“CenterTop”錨連接器所產(chǎn)生的向上的曲線。
這些都是可以在若干地點(diǎn)之一定位的錨點(diǎn),當(dāng)你每次移動(dòng)一個(gè)元素時(shí),會(huì)自動(dòng)選擇一個(gè)最合適的位置,沒有特殊的語法來創(chuàng)建一個(gè)DynamicAnchor,你只需要提供一個(gè)獨(dú)立的錨位置,例如數(shù)組:
默認(rèn)的動(dòng)態(tài)錨:
jsPlumb提供一個(gè)動(dòng)態(tài)的錨,定名為“AutoDefault” 默認(rèn)位置有:TopCenter,RightMiddle,BottomCenter和LeftMiddle
動(dòng)態(tài)錨和可拖動(dòng)的連接是可以進(jìn)行互操作的,當(dāng)你開始拖動(dòng)連接或釋放它時(shí),jsPlumb會(huì)鎖定一個(gè)動(dòng)態(tài)的錨的位置, 您可以在界面上看到鏈接錨點(diǎn)的切換變化。
在我們討論連接器、終點(diǎn)和覆蓋物之前,需要提醒的是:你需要定義一個(gè)連接器,端點(diǎn)或覆蓋,您必須使用一個(gè)“定義”,而不是直接構(gòu)建一個(gè),這個(gè)定義可以是一個(gè)字符串,它指定你需要?jiǎng)?chuàng)建的對(duì)象。
或者您需要構(gòu)件的對(duì)象的屬性名組成的數(shù)組,您可以通過其構(gòu)造函數(shù)來創(chuàng)建,例如
也有三個(gè)參數(shù)的方法,可以讓你指定兩套參數(shù),jsPlumb會(huì)自動(dòng)為你合并,例如
鏈接的線,實(shí)際上是界面上的各個(gè)元素的鏈接線,jsPlumb有三條連接器實(shí)現(xiàn),一條直線、Bezier曲線和”流程圖”連線,默認(rèn)的連接線是貝塞爾曲線,您可以有選擇的設(shè)置一個(gè)鏈接器,可以通過設(shè)置“connector”來定義一個(gè)連接線,或者在添加端點(diǎn)時(shí)設(shè)置連接線,如果您沒有為connector設(shè)置一個(gè)值,那么他會(huì)用他的默認(rèn)值”Default”
三種鏈接的定義語法類似
貝塞爾曲線:
貝塞爾曲線提供了兩個(gè)端點(diǎn)之間的立方體路徑,它支持一個(gè)構(gòu)造函數(shù)參數(shù),
curviness -可選,默認(rèn)為150,這定義的錨點(diǎn)位于貝塞爾曲線的控制點(diǎn),以像素為單位的距離,但這并不意味著你的連接器會(huì)穿過從你的曲線到這個(gè)距離的點(diǎn),這僅是一個(gè)標(biāo)識(shí)而已。
直線:直連繪制直線的兩個(gè)端點(diǎn)之間。 沒有構(gòu)造函數(shù)的參數(shù)支持,使用參數(shù)endpointStyle定義連接樣式或添加端點(diǎn)時(shí)定義連接線樣式
流程圖:這種類型的連接器,繪制一系列垂直或水平段組成的連接 - 經(jīng)典的流程圖?,支持一個(gè)單一的構(gòu)造函數(shù)參數(shù)
存根 -這是最小長度,以像素為單位,從端點(diǎn)發(fā)出的初始存根。 此參數(shù)是可選的,默認(rèn)為30像素
一個(gè)端點(diǎn)的UI組件,標(biāo)志著一個(gè)錨的位置,是連接器連接的點(diǎn),jsPlumb有三個(gè)端點(diǎn)實(shí)現(xiàn),點(diǎn)、矩形和圖形,你可以指定端點(diǎn)的屬性,在jsPlumb.connect時(shí)指定屬性,或者jsPlumb.Addendpiont時(shí)指定,或者設(shè)置jsPlumbde target時(shí)設(shè)定屬性,語法可參照connector。
三個(gè)可用的端點(diǎn)類型,他們的構(gòu)造函數(shù)參數(shù)如下:
點(diǎn)端點(diǎn)(Dot Endpoint):
此端點(diǎn)在屏幕上畫一個(gè)點(diǎn)。 它支持一個(gè)構(gòu)造函數(shù)參數(shù):
半徑 -可選,默認(rèn)為10個(gè)像素。 定義點(diǎn)的半徑
矩形端點(diǎn)(Rectangle Endpoint):
繪制一個(gè)矩形。 支持的構(gòu)造函數(shù)的參數(shù)是:
寬度 -可選;默認(rèn)為20像素。 定義矩形的寬度。
高度 -可選,默認(rèn)為20個(gè)像素。 定義矩形的高度。
圖片端點(diǎn)(Image Endpoint):
從一個(gè)給定的的URL繪制圖像。 此端點(diǎn)支持一個(gè)構(gòu)造函數(shù)的參數(shù):
SRC -必需的。 指定要使用的圖像的URL。
覆蓋界面上的鏈接元素,如標(biāo)簽或箭頭等,jsPlumb有四個(gè)默認(rèn)值:
Arrow:可配置的箭頭,放在兩個(gè)點(diǎn)的連接線上,你可以控制箭頭的長度和寬度,
轉(zhuǎn)折點(diǎn):是一個(gè)折回點(diǎn),方向點(diǎn)(允許值是1和-1,意味著是點(diǎn)的鏈接方向)
Label:在點(diǎn)的連接器上的可配置的標(biāo)簽
PlainArrow:一個(gè)三角形箭頭,沒有折回點(diǎn)
Diamond:顧名思義,鉆石
最后的兩個(gè)實(shí)際上市Arrow的配置的實(shí)例,當(dāng)您調(diào)用jsPlumb.connect或jsPlumb.addEndpoint時(shí),您可以指定一個(gè)或多個(gè)覆蓋物。
這個(gè)鏈接將有一個(gè)箭頭標(biāo)簽在連線的一般,并且文字標(biāo)簽在連線的四分之一處,可以注意下id屬性,你可以用它來刪除標(biāo)簽或做其他操作。
這個(gè)鏈接將有一個(gè)10*30的的箭頭和含有文字foo的標(biāo)簽,位置在連接線的開頭,另外,需要注意每一個(gè)覆蓋物的id。
這僅僅是一個(gè)特殊的Arrow的實(shí)例,內(nèi)部jsPlumb給”foldback”硬編碼為1,意思是一個(gè)平面的箭頭尾部邊緣,Arror的所有構(gòu)造函數(shù)適用于PlainArrow.
這也是一個(gè)特殊的Arrow實(shí)例,其中jsPlumb內(nèi)部給foldback硬編碼值為2,意味著箭頭轉(zhuǎn)變?yōu)镈iamond,Arrow的所有構(gòu)造函數(shù)適用于Diamond.
提供了一個(gè)文本的標(biāo)簽來裝飾連接器,可用的構(gòu)造函數(shù)參數(shù)有:
Lable:要顯示的文字,你也可用提供一個(gè)函數(shù)放這兒,用來替代文本,他是做為連接的參數(shù)返回,應(yīng)該返回一個(gè)string類型的字符串;
cssClass:一個(gè)可選的用于lable的樣式類,這是目前首選的”lableStyle”參數(shù),樣式有:
Location:做為 “Arrow” 標(biāo)簽應(yīng)該顯示的位置,比例從0到1,包括1。
你可用使用setVisible來控制Arrow的顯示或隱藏,或者showOverlay(ID)方法,或者h(yuǎn)ideOverlay(ID)方法,請(qǐng)注意這里的參數(shù)id,是我們?cè)谠O(shè)定各個(gè)元素時(shí)指定的,它可用用來找到那個(gè)元素。簡(jiǎn)單的實(shí)例:
并且,連接器connection也有很方便的方法用來替代上面的方法
如圖:
連接器connection也提供刪除覆蓋物的方法,如圖:
最簡(jiǎn)單的方式來設(shè)置你的pluming的顯示外觀等等,是重寫這些元素的默認(rèn)值,如果你不這么做,你得每次都手動(dòng)的去提供這些值;每一個(gè)connect和addEndpoint方法都有一個(gè)關(guān)聯(lián)的默認(rèn)值,這些默認(rèn)值存儲(chǔ)在jsPlumb.Defaults里面,他是一個(gè)javascript對(duì)象,這些參數(shù)的初始值是:
您可用用類似下面的方法來覆蓋默認(rèn)值
在這個(gè)例子中,我們已經(jīng)創(chuàng)建了“element1的”element2的“連接。 請(qǐng)記住,在jsPlumb中連接是靠?jī)蓚€(gè)端點(diǎn),連接器,和零個(gè)或多個(gè)覆蓋物重疊組成,但是,這個(gè)實(shí)例的“連接”沒有提供這些東西,所以jsPlumb在需要這些的地方都用的是默認(rèn)值,這些默認(rèn)值是:
--鏈接的兩個(gè)端點(diǎn),jsPlumb默認(rèn)使用的是Dot點(diǎn)端點(diǎn),半徑10,填充顏色#456
--鏈接的兩個(gè)端點(diǎn)的錨,也是用的是默認(rèn)值
--設(shè)定兩個(gè)端點(diǎn)是否可被用來做為新的鏈接點(diǎn),默認(rèn)值為false
--鏈接器的類型和外觀,默認(rèn)值是貝塞爾曲線,寬度8,顏色#456
所以這個(gè)鏈接是:
一個(gè)8px的貝塞爾曲線,從一個(gè)端點(diǎn)(element1)的bottomCenter移到另一個(gè)端點(diǎn)的bottomCenter,而且每一個(gè)端點(diǎn)的都是以10px為半徑,#456為顏色的Dot點(diǎn),
具體樣式…就不介紹了,自己看圖。
一種非常常見的情況,比如你想要同一個(gè)設(shè)置,來創(chuàng)造多個(gè)鏈接,jsPlumb connect有兩個(gè)參數(shù)
如果需要鏈接支持拖放,你首先需要進(jìn)行一下設(shè)置,每一個(gè)需要支持拖放的鏈接,至少需要一個(gè)終結(jié)點(diǎn),這里給一個(gè)實(shí)例,展示怎樣去創(chuàng)建Endpoint
此端點(diǎn)將作為連接的資源,任何來自他的鏈接都將使用jsPlumb默認(rèn)的樣式作為自己的樣式
Tip:一些常用的數(shù)據(jù)使用三個(gè)參數(shù)的addEndPoint方法
經(jīng)常發(fā)生的一件事:你有一個(gè)端點(diǎn),他的樣式和其他的端點(diǎn)只有一點(diǎn)點(diǎn)區(qū)別,大多數(shù)都是一樣的,這樣的情況下,你可以定義個(gè)相同的樣式,有不同的樣式可以單獨(dú)立出來,如下圖,注意下anchor設(shè)置,兩個(gè)元素是不一致的:
現(xiàn)在你有一個(gè)源端點(diǎn),你需要在其他元素上創(chuàng)建一個(gè)終結(jié)點(diǎn),或者通知jsPlumb你需要使整個(gè)元素成為一個(gè)拖拽的目標(biāo),讓我們看看怎樣去創(chuàng)建這樣一個(gè)端點(diǎn):
還有另外一個(gè)方法,jsPlumb.makeTarget(),這個(gè)方法需要兩個(gè)參數(shù),第一個(gè)參數(shù)是指需要設(shè)定的元素,或者元素列表,第二個(gè)參數(shù)是指當(dāng)一個(gè)鏈接建立時(shí)你需要的端點(diǎn),在這個(gè)例子中,我們用我們之前就用過的端點(diǎn),-the gray Rentangle—但是我們需要告訴jsPlumb,元素” aTargetDiv”將會(huì)被作為dorp的端點(diǎn):
在jsPlumb中方法jsPlumb.addEndpoint 和方法jsPlumb.makeTarget,對(duì)象endpointOptions里面的參數(shù)都是一樣可以用的,你可以在端點(diǎn)終結(jié)點(diǎn)設(shè)置很多東西,這個(gè)你可以參見api列表說明。下面的示例顯示了指定的箭頭在鏈接拖動(dòng)到終結(jié)點(diǎn)的連接線的一半的地方
下面這個(gè)示例展示的是,這個(gè)終結(jié)點(diǎn),連接到它的連接線是依賴這個(gè)終結(jié)點(diǎn)的位置,因?yàn)樗x了好幾個(gè)錨點(diǎn),連接線會(huì)自動(dòng)找到該終結(jié)點(diǎn)的動(dòng)態(tài)錨:
這些拖動(dòng)選項(xiàng)將通過jsPlumb api庫來提供支持,jsPlumb將會(huì)提供你需要的一切,如果你需要一些拖動(dòng)過程中的生命周期事件 ,你需要提供給jsPlumb一個(gè)通知方法,如果觸發(fā)某個(gè)事件,它會(huì)調(diào)用該方法,比若說你需要在拖動(dòng)開始時(shí):
Drop選項(xiàng)和Drag方式是一樣的,用法可參見jquery用法
http://docs.jquery.com/UI/Droppable
jsPlumb借用了jquery里面drag/drop的范圍概念,范圍的概念是指那些可拖放的元素只能夠被拖放到那些有范圍的元素里面,在jsPlumb中你可以在創(chuàng)建EndPoint時(shí)創(chuàng)建一個(gè)范圍”Scope”,下面給出一個(gè)例子:
如果你不提供一個(gè)”Scope”,jsPlumb將使用一個(gè)默認(rèn)的范圍,在這個(gè)方法中,這個(gè)值是可用的:
如果你因?yàn)槟承┰蛳敫淖兯闹担憧梢赃@樣做:
如果你想,你也可以這樣,提供一個(gè)drap和drop的范圍值:
定義端點(diǎn)、覆蓋物(覆蓋物現(xiàn)在更傾向于用cssClass來替代)、連接線的樣式,這些樣式是由paintStyle作為jsPlumb connect、jsPlumb.makeTarget、jsPlumb.addEndPoint方法的參數(shù)來定義的,根據(jù)你調(diào)用的不同方法,參數(shù)名稱會(huì)不一樣,具體不同如下面所列:
連接線樣式
jsPlumb.connect:
jsPlumb.addEndpoint:
注意上面的樣式參數(shù),下面我們對(duì)它進(jìn)行討論
終結(jié)點(diǎn)樣式:
像上面的定義我們可以有下列方法:
在上面的示例中,我們講”e1”拖放到作為目標(biāo)的”e2”中,并且定義了終結(jié)點(diǎn)的樣式。
覆蓋物樣式
最完美的設(shè)置覆蓋物樣式的方式是使用創(chuàng)建overlay時(shí)的構(gòu)造函數(shù)來定義
樣式參數(shù)列表
這是設(shè)置paintStyle的完整參數(shù)列表
但是請(qǐng)注意,fillStyle參數(shù)在connector中會(huì)被忽略,strokeStyle在EndOptions中會(huì)被忽略,此外,如果你使用jsPlumb.connect創(chuàng)建鏈接,并且為指定任何EndOption樣式,EndOptions中的fillStyle樣式會(huì)被指定為連接線的strokeStyle。
fillStyle, strokeStyle and outlineColor可以使用任何有效的CSS3語法
fillStyle:定義EndPoint的顏色,例如rgba(100,100,100,50), "blue", "#456", "#993355", rgb(34, 56, 78)
strokeStyle:連接器的顏色
lineWidth:連接線的寬度,是個(gè)Int值
outlineWidth:連接器或端點(diǎn)的輪廓寬度,int值
outlineColor:連接器或端點(diǎn)的顏色
dashstyle、The VML spec、stroke-dasharray、stroke-dashoffset、stroke-dashoffset、stroke-linejoin
只適用于VML或SVG或VML和SVG,這里不做介紹
當(dāng)鼠標(biāo)懸浮在這些元素上時(shí) ,連接線和終結(jié)點(diǎn)都支持鼠標(biāo)懸浮樣式。他們的樣式需要被精確的指定,指定的方式和我們?cè)谏厦嬗懻摰姆绞揭恢拢瑧腋邮揭惨粯永^承了基本樣式,這是因?yàn)楫?dāng)鼠標(biāo)移上去的時(shí)候,您通常會(huì)只希望更改顏色,或者輪廓顏色,所以你只需要指定需要改變的值即可,這樣避免了你需要定義重復(fù)的樣式,鼠標(biāo)懸浮樣式的參數(shù)名只是需要在正常樣式前加入”hover”即可,下面給個(gè)例子:
在這個(gè)示例中,我們指定兩個(gè)鏈接線和終結(jié)點(diǎn)的鼠標(biāo)懸浮樣式,這地方的兩個(gè)連接線和終結(jié)點(diǎn)的懸浮樣式是一樣的,我們也可以使用復(fù)數(shù)形式使兩個(gè)端點(diǎn)或兩條連接線的懸浮樣式不一樣,如下圖:
上面示例中兩個(gè)終結(jié)點(diǎn)的鼠標(biāo)懸浮樣式是不一樣的。通過下面的兩種方式也可以實(shí)現(xiàn), jsPlumb.addEndpoint和jsPlumb.makeTarget :
(這里我們指定了端點(diǎn)的樣式和所有從這個(gè)端點(diǎn)鏈接的線的樣式)
和
(makeTarget也同樣支持paintStyle樣式)
但是我們得注意,makeTarget不支持連接線的參數(shù),它只支持終結(jié)點(diǎn)。所有的鏈接中的連接線的參數(shù)是當(dāng)你在用鏈接方法時(shí)在源端點(diǎn)設(shè)置的。
Canvas 和SVG 都支持漸變,VML不支持,jsPlumb用它自己的語法來定義漸變,來適用于SVG 和Canvas 之間不同的語法。
有兩種類型的漸變可用:
(Linear) 線條漸變:彩色線條都在同一個(gè)方向
(radial) 半徑的,光線似的漸變:有彩色圓圈組成,有這個(gè)圈到那個(gè)圈的樣式。
由于他們的基本樣式不同,jsPlumb僅為連接線提供了Linear(第一種)漸變,但為端點(diǎn)提供了兩種方式。
線條漸變:
要在鏈接中使用漸變,你需要提供一個(gè)漸變的對(duì)象,例如:
這里我們有個(gè)從win2到win3的連接線,寬度15px;顏色是從綠色到紅色的漸變。
注意這地方的漸變對(duì)象和stops列表,漸變對(duì)象里面的顏色梯度可以是任意數(shù)值,每中顏色梯度包含兩個(gè)值[position,color],position值得范圍必須在0到1之間,數(shù)值類型是decimal,表示該種顏色開始的位置,顏色的有效值和strokeStyle是一樣的。
Stops列表可以包含任意個(gè)數(shù),下面的例子表示顏色從紅-藍(lán)-綠-藍(lán)-紅
如果你使用VML,jsPlumb將會(huì)忽略你的漸變指令,所以最好的做法是,你需要單獨(dú)指定strokeStyle ,因?yàn)槟J(rèn)情況下,如果不支持gradient時(shí),jsPlumb就會(huì)返回使用使用gradient的基本樣式strokeStyle ,如果你沒提供strokeStyle ,則默認(rèn)都是黑色的, 所以最好還是提供strokeStyle 樣式,例如:
端點(diǎn)漸變
端點(diǎn)的漸變樣式語法和連接線的語法是一樣的,你指定端點(diǎn)的漸變樣式要么放在endPoint的對(duì)象設(shè)置里面,要么放在連接線定義時(shí),不同端點(diǎn)的定義數(shù)組里面,并且,該信息適用于您正在創(chuàng)建的需要拖拽的端點(diǎn)定義。
看下面示例:
只有Dot和Rectangle 類型的端點(diǎn)支持,圖片端點(diǎn)時(shí)不支持的,當(dāng)然在VML中也不支持。
Dot示例:
顯示一個(gè)端點(diǎn),顏色漸變從最外端開始,端點(diǎn)的漸變需要的數(shù)據(jù)顯然會(huì)比線條漸變多,在一個(gè)線條的漸變中,我們只需要從一個(gè)點(diǎn)移動(dòng)到下個(gè)點(diǎn)即可,但是在端點(diǎn)的漸變中,我們需要從一個(gè)圈移動(dòng)到另一個(gè)圈,默認(rèn)情況下,jsPlumb會(huì)使用一個(gè)相同半徑的圈。
并且offset和innerRadius也可以使用百分?jǐn)?shù)來替代。
jsPlumb在它創(chuàng)建的每個(gè)組件時(shí)都會(huì)附加一些類,這些類名都是公開的,并且如果你需要的話你可以將他們重寫,具體如下:
你可以運(yùn)用這些樣式類來使你的界面達(dá)到最佳效果。
jsPlumb提供動(dòng)畫的方法,它是將你使用的基礎(chǔ)庫中的動(dòng)畫引擎進(jìn)行封裝,并且提供一個(gè)回調(diào)函數(shù),以供jsPlumb在每一步進(jìn)行跟蹤,你可以自己自己定義這個(gè)回調(diào)函數(shù),非常方便:
回調(diào)函數(shù)參數(shù)解釋:
el:元素id,或者元素的對(duì)象
properties:動(dòng)畫的屬性,例如持續(xù)事件等
options:動(dòng)畫選項(xiàng),例如回調(diào)函數(shù)等。
jsPlumb提供了一個(gè)完全公用的方法,getConections—來找到關(guān)于當(dāng)前管理的鏈接,在用這個(gè)方法之前,你需要了解jsPlumb中scope概念,
getConnection方法提供含js對(duì)象的方法來篩選,可有如下三個(gè)對(duì)象:
scope:您要檢索的鏈接所屬范圍(域)
source:返回的鏈接限制為那些有此源id的鏈接
target: 返回的鏈接限制為那些有此目標(biāo)端點(diǎn)id的鏈接
提供的這三個(gè)參數(shù),可以作為對(duì)象,也可作為字符串來傳遞
(返回的是在這兩個(gè)scope中的連接)
返回值是:
下面列出不同的獲取示例:
jsPlumb支持綁定到不同的事件 ,有連接線、端點(diǎn)、覆蓋物和jsPlumb本身的事件 ,如果需要綁定時(shí)間,你需要使用一個(gè)方法:jsPlumb.bing(object,event,callback),但是這除了overlay的事件,因?yàn)閛verlay的事件可以直接在overlay定義時(shí)直接綁定overlay的事件監(jiān)聽,
jsPlumbConnection—當(dāng)設(shè)定一個(gè)連接時(shí)會(huì)通知,這個(gè)新連接對(duì)象將會(huì)作為回調(diào)函數(shù)參數(shù)傳遞
jsPlumbConnectionDetached—當(dāng)一個(gè)鏈接被取消時(shí)通知,這個(gè)被取消的鏈接對(duì)象會(huì)被作為回調(diào)函數(shù)的參數(shù)傳遞
Click—獲取鏈接的點(diǎn)擊事件,回調(diào)函數(shù)將傳遞點(diǎn)擊的鏈接和鼠標(biāo)事件
Dbclick—雙擊,其他同上
Endpointclick—當(dāng)端點(diǎn)點(diǎn)擊事件時(shí)通知,端點(diǎn)對(duì)象和鼠標(biāo)事件是回調(diào)函數(shù)的參數(shù)
endPointDbClick—雙擊,其他同上
Click—當(dāng)一個(gè)鏈接被點(diǎn)擊時(shí)觸發(fā),回調(diào)函數(shù)傳遞的參數(shù)是鼠標(biāo)事件和connection對(duì)象
Dbclick—雙擊,其他同上
Mouseenter—當(dāng)鼠標(biāo)進(jìn)入鏈接的path觸發(fā),回調(diào)函數(shù)傳遞的也是鼠標(biāo)事件和connection對(duì)象
mouseExit—當(dāng)鼠標(biāo)從connection的path離開時(shí)觸發(fā),其他同上
Click-- 端點(diǎn)被點(diǎn)擊時(shí)觸發(fā),回調(diào)函數(shù)傳遞的參數(shù)有鼠標(biāo)事件和端點(diǎn)對(duì)象
Dbclick—雙擊事件時(shí)觸發(fā),其他同上
mouseEnter—鼠標(biāo)進(jìn)入端點(diǎn)時(shí)觸發(fā),回調(diào)函數(shù)傳遞的也是鼠標(biāo)事件和端點(diǎn)對(duì)象
mouseExit—當(dāng)鼠標(biāo)從端點(diǎn)中離開時(shí)觸發(fā),回調(diào)函數(shù)傳遞的參數(shù)也是鼠標(biāo)事件和端點(diǎn)對(duì)象
Overlay的事件監(jiān)聽注冊(cè)有點(diǎn)不同,你將他們作為overlay的構(gòu)造函數(shù)參數(shù),這是因?yàn)槟銖膩聿粫?huì)對(duì)overlay有真正的動(dòng)作,下面的示例看看怎么樣注冊(cè)一個(gè)overlay的事件:
jsPlumb.connect({
source:"el1",
target:"el2",
overlays:[
[ "Label", {
events:{
click:function(labelOverlay, originalEvent) { alert("you clicked on the label overlay for this connection :" + labelOverlay.connection) }
}
}]
]
});
jsPlumb.connect示例、拖拽的connection示例參見文檔http://jsplumb.org/doc/usage.html
1. 分離win5和其他元素的所有鏈接
2. 隱藏win5的所有鏈接
3. 隱藏win5鏈接的所有鏈接和終結(jié)點(diǎn)
4. 顯示所有win5的鏈接
5. 顯示win5的所有鏈接和終點(diǎn),請(qǐng)注意這個(gè)示例中的兩個(gè)參數(shù),如果它決定這個(gè)鏈接中的其他端點(diǎn)也是不可見的,jsplumb也不會(huì)使這個(gè)鏈接顯現(xiàn)。
(jQuery下,其他js庫下面不列出)
目前jQuery-jsplumb-1.3.3-all.js包含了下面的js庫集合:
jsPlumb-1.3.3.js
jsPlumb-defaults-1.3.3.js
jsPlumb-renderers-canvas-1.3.3.js
jsPlumb-renderers-svg-1.3.3.js
jsPlumb-renderers-vml-1.3.3.js
jquery.jsPlumb-1.3.3.js
jsBezier-0.2-min.js
臺(tái)ID:WEB_wysj(點(diǎn)擊關(guān)注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄
(微信回復(fù)HTML5,獲取全套源碼)
● ● ●
HTML5標(biāo)準(zhǔn)已經(jīng)塵埃落定,未來的Web將會(huì)是由HTML5主導(dǎo),當(dāng)然作為開發(fā)者對(duì)這一喜訊更為動(dòng)心。本文主要分享了15個(gè)無比華麗的HTML5/CSS3動(dòng)畫應(yīng)用,供大家參考學(xué)習(xí)。
今天我們來分享一款既炫酷又實(shí)用的HTML5圖片選擇特效,當(dāng)圖片被選中時(shí),圖片上就會(huì)覆蓋一個(gè)半透明的層,上面有一個(gè)勾,并且在選中的時(shí)候圖片出現(xiàn)彈跳的動(dòng)畫效果。
今天我們要分享一款非常酷的圖片效果,這個(gè)效果在很多P圖軟件中經(jīng)常可以看到,就是對(duì)一張圖片進(jìn)行復(fù)古效果的渲染。這款CSS3圖片效果就實(shí)現(xiàn)了這個(gè)復(fù)古的特效,我們只要將鼠標(biāo)滑過圖片,就可以實(shí)現(xiàn)這一圖片復(fù)古效果了。
之前我們分享過一款非常出色的CSS3 Tab菜單HTML5 SVG Tab滑塊菜單,結(jié)合SVG,Tab菜單實(shí)現(xiàn)非常靈活。今天我們要再來分享一款基于CSS3的華麗Tab菜單,這款Tab菜單的菜單項(xiàng)是一個(gè)個(gè)小圖標(biāo),鼠標(biāo)滑過時(shí),菜單項(xiàng)展示對(duì)應(yīng)文字,并出現(xiàn)展開的動(dòng)畫。
前段時(shí)間我們分享過很多牛叉的HTML5動(dòng)畫,如果你對(duì)HTML5感興趣,可以移步至HTML5動(dòng)畫欣賞學(xué)習(xí)。今天我們要分享一款基于HTML5和CSS3的書本翻頁3D動(dòng)畫,當(dāng)我們將鼠標(biāo)滑過書本時(shí),書本就會(huì)自動(dòng)一頁頁翻過去,書本的3D效果非常不錯(cuò)。
今天分享一款很特別的HTML5 3D圖片特效,當(dāng)鼠標(biāo)滑過圖片時(shí),平面的圖片即會(huì)呈現(xiàn)3D的效果,和這款HTML5 3D圖片折疊特效類似,也是通過鼠標(biāo)滑過來展現(xiàn)3D效果。另外,這款HTML5 3D骨牌圖片特效還可以設(shè)置圖片描述信息。
今天我們?cè)賮斫榻B一款實(shí)用的jQuery插件,是基于jQuery UI的。這款jQuery滑桿插件非常漂亮,可以設(shè)置多種顏色,再加上CSS3上運(yùn)用,可以讓滑桿的游標(biāo)變得有立體感,滑桿的Tooltip提示框也出現(xiàn)飛入飛出的動(dòng)畫效果。更多jQuery插件可以移步至jQuery插件欄目。
對(duì)于分步驟表單,我們之前也已經(jīng)有過介紹了,像這款HTML5分步驟注冊(cè)表單就非常不錯(cuò),今天我們要來介紹另外一款分步驟表單,這是一款個(gè)人資料填寫表單,我們可以分兩步來填寫個(gè)人資料,每一步的切換都有淡入淡出的動(dòng)畫效果,你也可以回退到上一步繼續(xù)填寫。
利用CSS3制作的登錄表單的確很漂亮,我們?cè)趆tml5tricks網(wǎng)站上也分享過幾款了,比如CSS3密碼強(qiáng)度驗(yàn)證表單可以顯示密碼的強(qiáng)度,這款純CSS3發(fā)光登錄表單更是絢麗多彩。今天我們要分享一款仿Facebook的登錄表單,無論從外觀還是功能上說,這款登錄表單還是挺接近Facebook登錄表單的。
這是一款線條狀的CSS3進(jìn)度條,這款進(jìn)度條有兩個(gè)特點(diǎn):一是隨著進(jìn)度條的進(jìn)度更新,都會(huì)有數(shù)字百分比實(shí)時(shí)顯示,讓數(shù)據(jù)更加直觀;二是在不同的進(jìn)度階段,進(jìn)度條的顏色會(huì)有所變化,這樣能更好的反應(yīng)當(dāng)前的進(jìn)度狀態(tài)。加上黑色的背景,讓這款CSS3進(jìn)度條更加鮮亮起來。
剛剛我們發(fā)布過一款CSS3開關(guān)切換滑動(dòng)按鈕,應(yīng)該說出了有點(diǎn)3D立體的效果外,其他都很普通。現(xiàn)在我們要來分享一款更酷的CSS3開關(guān)切換按鈕,它不僅具有3D的效果,而且可以發(fā)光,當(dāng)開關(guān)處于打開狀態(tài)時(shí),旁邊的小燈就會(huì)亮起來,然后燈光投射到開關(guān)上,效果挺逼真的。
利用HTML5制作圖表插件也比較常見,我們也收集過幾款很實(shí)用的HTML5圖表插件,它們確實(shí)可以幫助我們?cè)诰W(wǎng)頁上直觀地展示數(shù)據(jù)。今天我們要再來分享一款實(shí)用的HTML5線性圖表插件,這款線性圖表可以在不同的數(shù)據(jù)區(qū)域內(nèi)繪制不同的顏色,讓每一個(gè)數(shù)據(jù)區(qū)域都非常明顯可見。
之前我們分享過好幾款不錯(cuò)的HTML5柱狀圖表了,像這款HTML5/CSS3水平柱狀圖表,非常簡(jiǎn)單實(shí)用的圖表。今天我們要再來分享一款HTML5柱狀圖表,這款圖表插件可以將多張圖表的數(shù)據(jù)合并成一張圖表顯示,在圖表數(shù)據(jù)合并過程中產(chǎn)生融入的動(dòng)畫,挺不錯(cuò)的。
之前我們已經(jīng)分享過一款HTML5/CSS3分步提示框Tooltip ,不過這款提示框主要是用來分步操作提示的,不是真正的Tooltip。今天我們要分享一款利用CSS3實(shí)現(xiàn)的提示框Tooltip動(dòng)畫。當(dāng)鼠標(biāo)移到圖標(biāo)按鈕上時(shí),就會(huì)在按鈕正上方彈出一個(gè)Tooltip提示框,并且伴有淡入淡出的效果。
CSS3菜單我們之前已經(jīng)分享很多了,有3D菜單、下拉菜單、Tab菜單等,具體大家可以移步至CSS3菜單欄目下查找。今天我們要分享的這款HTML5/CSS3滑塊動(dòng)畫菜單非常酷,鼠標(biāo)滑過菜單項(xiàng)時(shí)會(huì)有一個(gè)漂亮的遮罩移動(dòng)過來,并且這款動(dòng)畫菜單還有非常酷的圖標(biāo),菜單整體效果很大氣。
HTML5 Canvas還有一個(gè)比較實(shí)用的應(yīng)用,那就是網(wǎng)絡(luò)畫板,這樣我們就可以在網(wǎng)頁上直接進(jìn)行畫圖操作。今天要分享的這款HTML5 Canvas畫圖工具就可以簡(jiǎn)單實(shí)現(xiàn)網(wǎng)絡(luò)畫圖的功能,我們可以自定義筆刷的類型、粗細(xì)、顏色,也可以定義畫布的大小和背景顏色等。我們也可以對(duì)這款HTML5畫圖工具進(jìn)行擴(kuò)展,讓它的畫圖功能更加完善。
干貨!免費(fèi)領(lǐng)取騰訊高級(jí)講師網(wǎng)頁設(shè)計(jì)教程
點(diǎn)我領(lǐng)取
點(diǎn)擊下方“閱讀原文”結(jié)交更多有才華的設(shè)計(jì)師!
↓↓↓
用說, Flash的效果大家都清楚。實(shí)際上,HTML5和JavaScript擁有很多新屬性,可以用它們來替代Flash。W3Cschool精選16個(gè)超牛逼的HTML5和JavaScript特效,看了這些特效,未來的Web發(fā)展前途無量。
1.特效:FlowerPower
創(chuàng)作者使用花朵作為畫刷,以貝茲曲線方式繪圖。
2.特效:Breathing Galaxies
動(dòng)態(tài)變換直徑及顏色,可通過鼠標(biāo)或鍵盤產(chǎn)生新形狀,這個(gè)效果不錯(cuò)!
3.特效:Noise Field
移動(dòng)鼠標(biāo)可改變粒子運(yùn)動(dòng),點(diǎn)擊可隨機(jī)生成不同粒子效果。
4.特效:HTML5 Canvas粒子效果文字動(dòng)畫特效
W3Cschool利用HTML5,制造出了粒子效果文字動(dòng)畫特效。只要你輸入框中輸入想要展示的文字,回車后即可在canvas上繪制出粒子效果的文字動(dòng)畫,相當(dāng)酷的動(dòng)畫效果。
5.特效:Swirling Tentacles
三維脈沖效果,沿著脈沖線有運(yùn)動(dòng)的顏色漸變模塊。
6.特效:Keylight
雙擊生成兩個(gè)以后的鍵即可發(fā)出聲音,移動(dòng)鍵的位置可產(chǎn)生不同的聲音效果。W3Cschool上面有很多這樣的教程,有興趣可以去看一下!
7.特效:Rotating Spiral
旋轉(zhuǎn)的螺旋效果,單擊可以控制開始和停止旋轉(zhuǎn),是不是覺得高大上?
8.Blob
拖動(dòng)水滴有重力效果,雙擊可以分離,小水滴碰到大水滴會(huì)合并。
9.Trail
彩色顆粒跟隨鼠標(biāo)運(yùn)動(dòng)效果,帶尾巴淡出效果。
10.Graph Layout
一種交互的力向圖布局效果,刷新三觀。
11.Typographic Effects
使用HTML5 Canvas實(shí)現(xiàn)的文本特性,效果超過Flash。
12.Crazy Tentacles
移動(dòng)鼠標(biāo)可以進(jìn)行涂鴉,點(diǎn)擊鼠標(biāo)可以清除畫布,看著確實(shí)瘋狂。
13.Nebula
吸引眼球的粒子系統(tǒng),目的是測(cè)試WebGL性能,如果滑動(dòng)鼠標(biāo),可以產(chǎn)生絢麗效果。
14.WebGL Globe
WebGL Globe 是一個(gè)開放的地理數(shù)據(jù)可視化平臺(tái),我們鼓勵(lì)你復(fù)制代碼,添加自己的數(shù)據(jù),創(chuàng)建自己的應(yīng)用。
15.Particle Playground
用鼠標(biāo)和粒子進(jìn)行交互,能發(fā)現(xiàn)不一樣的精彩。
16.Surface
使用WebGL實(shí)現(xiàn)的水面特效實(shí)驗(yàn),可放入一張照片,使用鼠標(biāo)觸動(dòng)水面會(huì)有奇特效果。
上面的HTML5和JavaScript特效,簡(jiǎn)直趕超F(xiàn)lash。W3Cschool上面有很多用戶留言稱HTML5和JavaScriptit將替代Flash,不過對(duì)于這種說法,也不知道怎么去評(píng)判。畢竟這些用戶說的也是很有道理,你認(rèn)為JavaScriptit會(huì)替代Flash嗎?很想知道你的答案!
公眾號(hào):w3c技術(shù)教程
提供專業(yè)的web技術(shù)教程、手冊(cè)、工具。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。