マインドマップが描画できるjQueryプラグイン「js-mindmap」を紹介します。
jQueryプラグイン「js-mindmap」
jQueryプラグイン「js-mindmap」は、ul、liタグで言葉をつなぐだけで簡単にマインドマップが作成できる便利なプラグインです。
便利?というか!!かっこいいので、デモを触ってみてください。
「js-mindmap」のデモ
デモのソース(HTML + jQuery)
< meta name = "description" content = "js-mindmap のデモでーす。" > |
< title >js-mindmap - jQuery Plugin Demo</ title > |
< link href = "style.css" type = "text/css" rel = "stylesheet" /> |
< link href = "js-mindmap.css" type = "text/css" rel = "stylesheet" /> |
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type = "text/javascript" ></ script > |
< script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js" ></ script > |
< script type = "text/javascript" src = "raphael-min.js" ></ script > |
< script type = "text/javascript" src = "js-mindmap.js" ></ script > |
< script type = "text/javascript" src = "script.js" ></ script > |
< h1 >js-mindmapのデモでーす。</ h1 > |
< li >< a href = "#" >アルファベット</ a > |
< li >< a href = "#" >A</ a ></ li > |
< li >< a href = "#" >B</ a ></ li > |
< li >< a href = "#" >C</ a ></ li > |
< li >< a href = "#" >D</ a ></ li > |
< li >< a href = "#" >E</ a ></ li > |
jsファイルのダウンロード、その他オプションなどの詳細とはこちらからどうぞ。