jquery ui dialog 読み込んだ外部htmlファイル内でのjqueryの実行
- jquery ui dialogを使用して読み込んだ外部htmlファイル内で、jqueryの実行について質問があります。
- 外部htmlファイルをjqueryのloadメソッドで読み込んで表示させた後、読み込まれた要素にjqueryによる装飾や操作を行いたい場合、どのような方法があるのでしょうか？
- 現在はjqueryのcssメソッドを使って要素の背景色を変更しようとしていますが、読み込まれたタイミングで要素が読み込まれていないため、うまく動作しません。
- ベストアンサー
jauery ui dialog 読み込んだ外部htmlファイル内での
jauery ui dialog 読み込んだ外部htmlファイル内でのjqueryの実行 お世話になります。 iwatuturuturu と申します。 jqueryで読み込んだ外部htmlファイル内でのjqueryのセレクターを使用した装飾等ができません。 ［index.html］にてjqueryのloadを使用し、同じ階層内の［text.html］のファイルを読み、それをjQuery uiを使用したdialogで表示させています。 読み込まれたdialog内の要素に装飾を行ないたいと考えておりますが、下記のソースにあります［$("p").css("background-color", "red");］が読み込まれたタイミングで、［$("p")］が読み込まれていない為か背景色の変更が行えません。（jqueryを使用し、テーブルの行を一行毎に色付けをしたりしたいのでこのような質問にしました。） loadなどで外部ファイルを読み込んで、読み込まれた要素にjqueryによる装飾や操作を行いたい場合はどのようなやり方があるのでしょうか？ 【ソース［index.html］】－－－－－－－－－－－－－－－－－－－－－－－－ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" href="../css/common/jquery-ui-1.8.4.custom.css" rel="stylesheet" /> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/jquery-ui.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ /* dialogを読み込む領域を作成 */ $("body").append("<div id='dialog_window'></div>"); /* loadで外部htmlファイルの読み込み */ $("div#dialog_window").load("text.html"); /* loadで読み込まれたhtmlファイルをdialogとして表示 */ $("div#dialog_window").dialog({ autoOpen: true, width: 1100, }); /* dialog内の装飾 */ $("p").css("background-color", "red"); }); }); </script> </head> <body> <button>ウィンドウopen</button> </div> </body> </html> 【ソース［text.html］】－－－－－－－－－－－－－－－－－－－－－－－－ <p>読み込み完了</p> －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ よろしくお願いいたします。
- iwatuturuturu
- お礼率100% (7/7)
- JavaScript
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
$.load()の第３引数には、読み込み完了後の実行関数を指定できますよ。 http://semooh.jp/jquery/api/ajax/load/+url%2C+data%2C+callback+/ ただ、例のように読み込み後に背景色を変更したいだけなのであれば、JSを使わずに、あらかじめCSS側で指定した方がスマートですね。
関連するQ&A
- 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>
- ベストアンサー
- JavaScript
- 外部ファイルを読み込む方法について
外部ファイルを読み込む方法について様々なサイトを参考にしている中、 jQuery.jsを使った方法についてご質問させていただきます。 ファイルは以下のように <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function(){ $("#header").load("header.html"); }); // --> </script> （HTMLファイル） <div id="header></div> （外部ファイル header.html） <p>外部ファイルのテスト</p> 上記のとおり設定しブラウザで確認（IE及びFirefox）すると IEでは画面上外部ファイルが読み込まれた状態で表示はされているが、 ソースは<div id="header></div>と表示。 一方FirefoxのFirebugで確認すると<div id="header><p>外部ファイルのテスト</p></div> と表示しています。 ここでお聞きしたいのが、巡回ロボットはIEでソース表示されるような認識になるのか・・・ あるいは、外部ファイルが読み込まれた状態のソースで認識してくれるのか・・・ 疑問に感じましたのでご質問させていただきました。 なお、参考にさせていただいたサイト内の注意点として上記の方法だと「空div」でひっかかります。と記載がありました。 なにとぞ、よろしくお願いいたします。
- ベストアンサー
- HTML
- 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を使う方法でなくても構いません。 方法のわかる方なにとぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQuery 読み込んだ外部htmlファイル内での関数の実行ができない
jQuery 読み込んだ外部htmlファイル内での関数の実行ができない お世話になります。 iwatuturuturu と申します。 jQueryで読み込んだ外部htmlファイル内での関数の実行ができません。 ［index.html］にてjQueryのloadを使用し、同じ階層内の［basic.html］のファイルを読み込んでいます。 slideToggleをしようしてアコーディオンをつけたいのですが、外部htmlの［basic.html］のアコーディオンみ動きません。 【ソース［index.html］】------------------------------------------------------------ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="../js/jquery.js"></script> <script> $(function(){ //外部ファイルの読み込み $("#basic").load("basic.html"); // アコーディオン $('dt').click(function(){ $(this).next().slideToggle('slow'); }); }); </script> </head> <body> <dl class="accordion"> <dt>アコーディオン</dt> <dd>ここの表示非表示が切り替わる</dd> </dl> <div id="basic"></div> </body> </html> 【ソース［basic.html］】------------------------------------------------------------ <div style="border:1px solid #666666"> <p>読み込み込まれるテキスト</p> <dl class="accordion"> <dt>ここをクリック</dt> <dd>ここの表示非表示が切り替わる</dd> </dl> </div> ------------------------------------------------------------------------------------ もともと外部より読み込まれたファイル内のjavasicriptは実行されない仕様なのでしょうか？ また、他のやり方で同じ動作を実現する方法などありましたらご教授お願い致します。 よろしくお願いいたします。
- 締切済み
- JavaScript
- jQuery UIのdraggableについて
こちらでは初めて質問させていただきます。 よろしくお願いします。 現在、jQuery UI の draggable を使用してWebブラウザ上での ドラッグ＆ドロップを実装中なのですが、 期待通りに動作させることが出来ません。 <script></script> …… (1) <html> <head> <script type="text/javascript" src="jQuery/jquery-1.3.2.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.core.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.draggable.js"></script> <style> #a { height:100px; width:300px; overflow:scroll; border:solid 1px Black; } #b { width:60px; height:40px; background:lime; position:absolute; top:10px; left:50px } #c { width:60px; height:40px; background:lime; position:absolute; top:60px; left:50px } </style> <script type="text/javascript"> $j = jQuery.noConflict(); $j(function($) { $('#b').draggable(); }); $j(function($) { $('#c').draggable(); }); </script> </head> <body> <div id="a"> <span id="b">Drag Element1</span> <span id="c">Drag Element2</span> </div> </body> </html> ドラッグ対象は複数存在するため、ドラッグ対象を<div>エリア内で スクロール（必須です）させています。 ドラッグ対象を<div>エリア外にドラッグしたいのですが、 <div>エリア内しかドラッグできません。 ((1)の記述がないと、ドラッグ対象が<div>エリア内でスクロール しませんでした。？？？) どなたか、よきアドバイスをお願いします。
- 締切済み
- JavaScript
- javascriptファイルは１つに統合できますか
javascript初心者のため、どなたかご教示いただけるとありがたいです。 html内に外部javascriptファイルを読み込むようにscript要素で記述しているのですが、複数の外部jsを読み込んでおり、可能であればhtml内の記述を簡略化したいと思っております。 ＜現状＞ <script type="text/javascript" src="・・・/js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="・・・/js/jquery.page-scroller.js" charset="utf-8"></script> <script type="text/javascript" src="・・/js/jquery.cookie.js"></script> <script type="text/javascript" src="・・・/js/ui.core.js"></script> <script type="text/javascript" src="・・・/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="・・・/js/jquery.scrollfollow.js"></script> <script type="text/javascript" src="・・・/js/jquery.bxslider.js"></script> <script type="text/javascript" src="・・・/js/set_slider.js"></script> ・・・ jsに対する基礎的な質問ですが、上記のような複数の外部jsファイルを、1つの外部jsファイルにまとめることは可能なのでしょうか？ （単純に1箇所にコピー＆ペーストするようなイメージで） お手数ですが、ご教示のほど、宜しくお願い致します。
- ベストアンサー
- JavaScript
- 外部ファイルを読み込んだhtmlをinclude
外部ファイルを読み込んだhtmlをincludeしたいです。 ディレクトリの階層は、 index.php style.css /pic/picture.html /pic/css/style1.css /pic/css/style2.css : /pic/css/style13.css /pic/js/jquery1.js /pic/js/jquery2.js : /pic/js/jquery15.js : （画像などが他にもいっぱい） となっています。 ----- picture.html内には <link rel="stylesheet" type="text/css" href="css/style1.css"> <link rel="stylesheet" type="text/css" href="css/style2.css"> : <link rel="stylesheet" type="text/css" href="css/style13.css"> <link rel="stylesheet" type="text/css" href="js/jquery1.js"> <link rel="stylesheet" type="text/css" href="js/jquery2.js"> : <link rel="stylesheet" type="text/css" href="js/jquery15.js"> : と書かれています。 ---- このときindex.phpのbody内に <?php include('./picture.html'); ?> とした場合、相対パスによる記述なのでpicture.html以外のcssやjsは適用されませんよね。 しかし/pic/内にあるすべてのpicture.htmlに関係するファイルは非常に数が多いので、これらすべてをincludeするのは厳しいです。 すべての外部ファイルを読み込んだ状態のpicture.htmlをbody内に表示したいのですが、そんなことは可能でしょうか。 どなたかご教示ください。どうかよろしくお願いします。
- ベストアンサー
- PHP
- 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>
- 締切済み
- JavaScript
- jQueryのUIのDialogでページ遷移
jQueryのUIのDialogを使用してログイン画面を作成しています。 http://stacktrace.jp/jquery/ui/widgets/dialog.html 何とかjQueryのUIのDialogを使用してログイン画面を表示する事ができましたが... 下記がソースコードです。 $(document).ready(function(){ $("#dialog:ui-dialog").dialog("destroy"); $("#dialog-form").dialog({ autoOpen: false, height: "auto", width: 350, modal: true, buttons: { "ログイン": function() { ↑ ここに記述 ↓ } } }); $("#dialog-form").dialog("open"); }); <DIV id="dialog-form" title="ログイン"> <FORM method="post" action="login.php"> <FIELDSET> <LABEL for="username">ユーザ名</LABEL> <INPUT type="text" name="txtUsername" id="username" class="text ui-widget-content ui-corner-all" /> <LABEL for="password">パスワード</LABEL> <INPUT type="password" name="txtPassword" id="password" value="" class="text ui-widget-content ui-corner-all" /> </FIELDSET> </FORM> </DIV> 行いたい事は下記の通りです。 1.各テキストボックスの入力チェック 2.OKの場合はページ遷移(login.php)して ※login.htmlで入力された値(ユーザ名、パスワード)をlogin.phpに受け渡す。 3.入力エラーの場合はエラーダイアログを表示。 エラーダイアログのOKボタンをクリックして再度、ログイン入力。 箇条書きで申し訳ありませんがどのように記述すればいいのでしょうか。 また上記の処理を実現するのに参考になるサイトがありましたら教えて下さい。 情けないんですがここ1週間、これで悩んでいます。 藁をもつかむ思いで... 些細な事でも何でも構いませんので宜しくお願いします。
- ベストアンサー
- JavaScript
- jQueryのタブにスクロールバーをつけたい
jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？
- ベストアンサー
- JavaScript
お礼
早速のご回答ありがとうございます。 教えて頂きましたやり方で、解決致しました！ 助かりました、ありがとうございました。