• 締切済み

githubのjqueryの使い方

jqueryの使い方を教えてください。 https://github.com/kennethkufluk/js-mindmap こちらをローカルのwordpressで修正できるようにしたいのです。 よろしくお願いします。

みんなの回答

回答No.1

以下の前提で ・このライブラリ自体最近メンテされていない ・サンプルのjQueryのバージョン古すぎ ・ライブラリとしてAPI仕様が書かれているものはないみたい(自分でコード読んで判断しろ的な) ・自動で設定してくれるようなものではないみたい(自分で必要なものを追加していく) なので、以下のサンプルをみながらざっくりいえば、 https://github.com/kennethkufluk/js-mindmap/blob/master/index.html 多分以下が必須モジュール <link rel="stylesheet" type="text/css" href="js-mindmap.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/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> サンプルは以下のソースを記載して実装 <link href="style.css" type="text/css" rel="stylesheet"/> <script src="script.js" type="text/javascript"></script> 実装している内容を見ると、 1. 基準となるDOM(タグ)を設定(サンプルではbodyタグ) 2. マインドマップの根っこになる最初のノードを設定(サンプルではKenneth) 3. マインドマップの根っこの枝葉を子DOMをを追って設定していく という内容が https://github.com/kennethkufluk/js-mindmap/blob/master/script.js に書かれています。 なので、この手順を追って実装していけばよいのではないでしょうか。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • jquery3系がうまくいかない

    jquery3系が出ていたので使ってみたのですが、CDNはうまくいったのですが、そのものをダウンロードして使うほうがうまくいきません。 https://code.jquery.com/jquery-3.1.1.min.js のソースコードをコピペしてjquery-3.1.1.min.jsというファイルを自分で作って下記のようにしているのですが、CDNが読み込まれなかった場合に読み込むというやり方のようです。 <!-- start load jquery --> <!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"><\/script>')</script> <![endif]--> <!--[if gte IE 9]><!--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-3.1.1.min.js"><\/script>')</script> <!--<![endif]--> <!-- end load jquery --> ・もちろん下記のようにもしましたが駄目でした。 <!-- start load jquery --> <!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"><\/script>')</script> <![endif]--> <!--[if gte IE 9]><!--> <script>window.jQuery || document.write('<script src="/js/jquery-3.1.1.min.js"><\/script>')</script> <!--<![endif]--> <!-- end load jquery -->

  • jQuery

    http://bmath.org/wordpress/?p=663 上記を参考にWEBページをつくってみたのですが、上手くいきません。 javascript部分をhtmlの <script type="text/javascript" src="js/site.js"></script>にいれたからでしょうか? また、jsフォルダは<script type="text/javascript" src="js/jquery.scrollTo-min.js">ではなく、jquery.scrollTo-1.4.3.1を使っています。 よきアドバイスお願いします。

    • ベストアンサー
    • CSS
  • jquery

    とあるサイトの 1つのソースの中に <scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> と <scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> があるのですが この二つは意味が違うのでしょうか? バージョンが 1.7.1と1.11.1になっていますが 1.11.1が数字が高いから、1.11.1だけあればいいのでしょうか?

  • wordpressでcookie.jsを使う

    wordpressの初心者です。 こちら http://blog.idea-clippin.com/?p=129 の機能をwordpressで作っているサイトに搭載したいと考えています。 jsは別の部分でつかっていて動くので indexと同じ階層にjsフォルダを作りその中にjquery.layerBoard.jsをつっこみ imgフォルダに同じ画像名の画像を。 hederとbodyにコピペをしたのですが、文字しか出なかったのでおそらく欠けているのはcookie.jsと考えています。 cookie.jsを入れれば使えるとおもうのですが、紹介サイトでも省略されていていまいちよくわかりませんでした。 https://github.com/carhartl/jquery-cookieは見てみたもののリンク切れなのかダウンロードボタンはありませんでした。 ワードプレスにcookie.jsを導入するにはどのような方法がありますか?

  • WordPressでjQuery-UIの使い方

    WordPressでjQuery-UIの使い方を教えてください。 現在、WordPressで作ったサイトにフローティングメニューを取り入れたいと思っています。 フローティングメニューを入れるにあたり、jQuery-UIを読み込まなければならないのですが ちゃんと読み込まれていないようです。 WordPressではなくテストでサイトを作り、読み込ませるとちゃんと動作するので、 WordPress特有の問題かと思います。 WordPressでjQuery-UIを読み込ませる方法を教えてください。 下記に参考にしたサイトと、ソースを記述しました。 -------WordPressのヘッダ内の記述と参考にしたサイト------- <?php wp_deregister_script('jquery.ui.core.min'); wp_enqueue_script('jquery.ui.core', get_bloginfo('template_url') . '/js/jquery.ui.core.js'); ?> wp_deregister_scriptでWordPressのjquery.uiを見に行かないようにして、 wp_enqueue_scriptでダウンロードしてきたUIを見に行くようにしてあります。 参考にしたサイト(jQuery-UI) http://d.hatena.ne.jp/deeeki/20090907/wp_enqueue_jquery_ui フローティングメニューについて参考にしたサイト http://www.skuare.net/test/jScrollFollow.html

    • ベストアンサー
    • PHP
  • jQueryが動きません。

    表題のとおりです。 fademover(http://www.detelu.com/fademover/)を動かそうと思って 導入しても動いてくれません。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.fademover.js"></script> <script> $(function(){ $('body').fadeMover({'effectType': 2,'inSpeed': 5000}); }); </script> の部分。 Chromeだと Uncaught TypeError: Object [object Object] has no method 'fadeMover' index.html:14 (anonymous function) index.html:14 n ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 o.fireWith ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 e.extend.ready ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 c.addEventListener.B Safariだと TypeError: 'undefined' is not a function (evaluating '$('body').fadeMover({'effectType': 2,'inSpeed': 5000})') と出ます。 jsやjqueryはあまりいじったことないので 手が出ない状態です。 よろしくお願いします。

  • githubについておしえてください

    デザイナーです。 バージョン管理システムを導入しようと思い、githubを今試している所です。 git自体どういうものかがようやくわかってきた所で実際にどうすればいいのか分からない点があります。 サイトを運営していて、本番環境とローカルテスト環境があるのですが、 どのようにgithubと連携させればよいのかわかりません。 ローカルテスト環境である程度作ってからgithubのリポジトリにコミットした後、 どうやって本番環境に反映させるのでしょう。 (そもそもすでに手順が間違っているのでしょうか) また、複数人でいじる時はそれぞれにローカル開発環境を用意させる必要があるのでしょうか。 よろしくお願いします。

  • jqueryのアニメーションが動かない!!

    $(".skinTitleArea").css("opacity","0"); $(function(){ $(".skinTitleArea").animate({"opacity","1"},500); }; って入れても動かない。 http://ameblo.jp/koko5666/ アメブロなのですが、append等はちゃんと反映されてるのでjquery本体は読み込まれてます。なのにアニメーションanimateが動かない。入れるとjqueryが読み込まなくなって、他の記述も反映されなくなる。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="https://dl.dropbox.com/u/63681173/loveinstagram/jquery.common.js"></script> アニメーションが入ってるjavascriptは現在消してます https://dl.dropbox.com/u/63681173/loveinstagram/jquery.common.js

  • jQuery

    http://blog.daichifive.com/archives/602 このページにあるようなスクロールをさせたいのですが、 jquery.scroller.d5.jsはページ内でダウンロードできますが、 jquery.jsはどこからダウンロードすればよいのですか? jQueryeasysliderのjqueryjsをつかってみたのですが、 上記サイトではjsファイルの最下部でスクロールさせたいものだけをカスタマイズできるとあるので、 easysliderのjqueryjsは使えないような気がします。 初歩的な質問ですみません。 あまり詳しくないです。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • CakePHPでjQueryを使うには

    ローカル環境にてCakePHPでwebサービスを制作しています。 ブラウザでviewを確認しながら構築しているのですが、この環境でgoogleAPIのjQueryを動作させることは出来るのでしょうか? もしできるとしたら、 <?php echo $this->Html->script('http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');?> <script type="text/javascript"> jQuery('#more').click(function(){$('innerboxes').clone().appendTo('box')}); </script> で動かないのは何が問題なのでしょうか? また、googleAPIを使わない方法でも以下のように試しましたが、これも動かない原因はどこにあるのでしょうか? jQueryのホームページでver1.5のソースをコピーし作ったjQuery1.5.jsを、 webroot /jsに入れる。 Controllerに var $helpers=array('Ajax','Javascript'); を記述。 Viewに、 <?php echo $javascript->link('jQuery.1.5.js'); ?> <script type="text/javascript"> jQuery('#more').click(function(){$('innerboxes').clone().appendTo('box')}); </script> 宜しくお願いします。