• 締切済み

なぜｊQuery UIを使う時こんなにｊｓファイルを使うの？

どうもはじめまして。 早速ですがjQueryについて質問です。 jQuery UIのアコーディオンにしてもtabsにしても、使う時4つも5つもｊｓファイルを取り込みますよね？これってなぜなんでしょうか？ 単純にコピー＆ペーストで一つにまとめることってできないのでしょうか？ 知っている方いましたらよろしくお願いします。

みんなの回答

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

コピペでまとめて動いちゃいましたか…^^; 考えてみれば順番さえ前後してなければファイル自体は一個でも分かれてても問題ないはずでしたね。失礼しました。

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

詳しくはみていませんが、各ファイルを読み込ませる順序も決まりがあるようなので、必要なライブラリの有無や多重読み込みのチェックもやっているでしょうから単純にコピペで一つにまとめても動かないでしょう。 いくつもに分かれている、と、考えるよりは、いくつもを組み合わせて機能を実現していると考えた方がいいでしょう。 例えばアコーディオンだけを使うのであれば一つにもとまったものがあればいいでしょうけど、他の機能を使うときに同じようにまとまったものを組み合わせて、と、やっていくと内容が被る無駄な部分を大量に読み込む結果になっていきます。

cyon905
質問者

お礼

一度失敗をしたので諦めていたのですが、もう一度すべてをJSの順番通りにコピー＆ペーストしてみたところ、すべてのブラウザーで上手く動くことができました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQuery UI Tabでタブの一つを新しいウインドウで開きたい

    jQuery UI Tabでタブの一つを新しいウインドウで開きたい jQuery UI Tabを使用してまして、 タブの一つを<div id="ui-tab-xx">の中に表示ではなくて 新しくウィンドウを開いて表示したいのですが、 どのようにカスタマイズすればできますでしょうか。 JS初心者なのでご教授いただければと思います。 使用しているJSは http://allabout.co.jp/internet/javascript/closeup/CU20000121J/ui.tabs.js こちらから拝借しました。 よろしくお願いいたします。

  • jquery ui.resizable 使い方

    jquery ui.resizable でdivをリサイズするとき同時に内部にあるdivをリサイズしたいのですができません。 <div id="out"> <div id="inner"> </div> </div> で、 http://stacktrace.jp/jquery/ui/interaction/resizable.htmlを参考にして、 $('#out').resizable({proportionallyResize:["#inner"]}); としてみたのですが、#outは、リサイズできますが、#innerを同時にリサイズできません。 組み込んだjs、cssは、 http://jqueryui.com/download よりDLした、jquery-jquery-ui-1.8.7-0-g12bea93.zipに納められていた jquery.dimensions.js jquery.ui.core.js jquery.ui.widget.js jquery.ui.mouse.js jquery.ui.resizable.js jquery.ui.draggable.js 及び jquery.ui.resizable.css を、記載の順に組み込みました。 行いたいことは、divをリサイズしたとき、その内部のdivも同時にリサイズすることです。 proportionallyResizeを使う方法でなくても構いません。 方法のわかる方なにとぞよろしくお願いいたします。

  • jQuery UI - Tabs

    jQuery UI - Tabsについて質問です。 jQuery UI - Tabsのｒｏｔａｔｅを利用して、自動的にタブが切り替わり、アクティブなタブの色が変わるといったプログラムを作成しました。 選択されたタブの色をCSSに直接記述してある時は、自動的にアクティブなタブの色が切り替わるのですが、"選択されたタブ.css("#555555")"というよプログラム上で指定した場合は正しく色が切り替わりません。 プログラム上で色を指定した場合でも、正しく色が切り替わるようにするにはどのようにしたらよいでしょうか。 お分かりの方がいらっしゃいましたら、ご教示願います。

  • jquery uiが動かない

    jquery uiが動きません。 何度も見直し、プログラムを書いてもどこがいけないかわかりません。 教えていただけたら幸いです。お願いいたします <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> </head> <body> <div id="box">box</div> <style> #box{ width:100px; height:100px; background:red; } </style> <script> $(function(){ $("#box").draggable( axis: 'x'; ); }); </script> </body> </html>

  • 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でダウンロードしてきたＵＩを見に行くようにしてあります。 参考にしたサイト（jQuery-UI） http://d.hatena.ne.jp/deeeki/20090907/wp_enqueue_jquery_ui フローティングメニューについて参考にしたサイト http://www.skuare.net/test/jScrollFollow.html

    • ベストアンサー
    • PHP
  • jQuery を書くファイルはどれですか

    ほんっとうに基本的なことすぎて見つけられないのかもしれないのですが、 2日間ググってもわからないのでお助けください。 jQuery でアコーディオンメニューを作りたいと思っています。 だいたいのサイトをみると、サイトより jQueryをダウンロードしろと 書かれているのでuncompressedのものをダウンロードして、jQuery.jsと リネームしたのちに jsフォルダ内に格納しました。 あとは、html、CSS、jQuery の3つの記述が掲載されているのですが、 jQuery をどこに書くのかわかりません。 どういう名前のどの拡張子(js？)でhtmlファイルに読み込ませるのか、 それともhtmlファイルに書くのかすらわかりません。 なにとぞご教示お願いいたします。

  • jqueryの tabを使用して外部リンクをしたい

    jqueryの tabを使用して外部リンクをしたい このサイトの下の方の マウスオーバーで切り替えを使用しているのですが タブをマウスオーバーで切り替えつつ、 タブ部分をクリックしたら外部にリンクさせるようするには どうしたらいいでしょうか？ http://5am.jp/jquery/jquery_ui_tabs/ 以下タグです。 初心者で大変申し訳ありませんが、ご教授ください。 とても困っています。 よろしくお願いいたします。 ************************************************************* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <head> <!-- jQuery --> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="/jquery-ui-1.8.12.custom.min.js"></script> </head> <body> <script type="text/javascript"> <!-- jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs( { event: "mouseover" } ); } ); // --> </script> <div id="jquery-ui-tabs"> <ul> <li><a href="#jquery-ui-tabs-1">タブ１</a></li> <li><a href="#jquery-ui-tabs-2">タブ2</a></li> <li><a href="#jquery-ui-tabs-3">タブ2</a></li> </ul> <div id="tab_area"> <div id="jquery-ui-tabs-1"> <ul> <li>タブ１内容</li> </ul> </div> <div id="jquery-ui-tabs-2"> <ul> <li>タブ2内容</li> </ul> </div> <div id="jquery-ui-tabs-3"> <ul> <li>タブ3内容</li> </ul> </div> <!--/#tab_area--></div> <!--/#jquery-ui-tabs--></div> </body> </html>

  • jQueryでタブの中に表を入れる

    ｊQueryを使ってページを表示させようと思っています。 その中で、 http://5am.jp/jquery/jquery_ui_tabs/ このタブのメニューの中に http://styler.jp/blog/2013/01/18/handsontable/ こちらの表を入れ込みたいのですが、どうも上手く行きません。 css/jquery.handsontable.full.cssとjs/jquery.handsontable.full.js、js/jquery-2.min.jsを指定するとタブが上手く表示されず、外すとタブは表示されるのですが表が出て来ません。 どなたか似たようなことやったことのある方、ご教授よろしくお願いします。

  • jQuery UI accordionの改造

    jQueryについて質問させていただきます。 ただいま、jQuery UIのアコーディオンのプラグインを用いてWebサイトを制作しているのですが、このプログラムを少々改造したいと考えています。 行わせたいアクションは、jQuery UIを反映させたナビゲーション（video, photo, illust, text, contact　といった具合にカテゴリーを設けています）に置かれているリンクをクリックした際に、そのリンク部分（例えば、videoというカテゴリーを選択したときにはvideoというコンテンツ名）とアコーディオン内に格納されている内容を上に向かってアニメーションさせる、といったものです。 浅学なうえ、javascriptやactionscriptなどのプログラミングが非常に苦手で手詰まりの状態です。 拙い説明ではございますが、よろしければ皆さまならどのように解決するかを教えていただけませんでしょうか？ よろしくお願いいたします。

  • jQuery UI Accordion Plugin(jQuery U

    jQuery UI Accordion Plugin(jQuery UI　アコーディオン　プラグイン)でアコーディオンメニューを作っています。 下記のような要素を ↓html <div id="accordion"> <h3><a href="#">First header</a></h3> <div>First content</div> <h3><a href="#">Second header</a></h3> <div>Second content</div> </div> プラグインを読み込んで ↓javascript $("#accordion").accordion(); みたいな簡単な記述でアコーディオンメニューが実装できます。 サンプルURL：http://jquery.bassistance.de/accordion/demo/ これを自動で上から順に一定間隔で展開するようにしたいのですが（クリックして展開する動作も生きで）、 動きイメージ：http://www.au.kddi.com/ aubyKDDIサイトの左側のメニュ↑ このプラグインを使わないやり方とかでもいいです。 ご教授の程お願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する