質問 > フロント機能 > jqueryについて |
フロント機能
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
blue1112 |
投稿日時: 2012/12/18 14:17
対応状況: −−−
|
常連 登録日: 2012/7/18 居住地: 投稿: 31 |
jqueryについて [EC-CUBE] 2.12.1
[レンタルサーバ] さくらインターネット [OS] [PHP] PHP 5.2.17 [データベース] MySQL [WEBサーバ] Apache [ブラウザ] chrome,safari [現象] jqueryのuiタブを使用し、トップページにタブを設置しようと思っているのですが、色々試してみたのですが、うまくいきません。 どなたがご教授頂けると大変助かります。 自分が試した方法です。 まず html/jsのディレクトリにjquery.js、jquery.ui.core.js、jquery.ui.tabs.js、jquery.ui.widget.jsのそれぞれのファイルを設置。 html/user_data/css/内にダウンロードしたthemeフォルダを設置。 その後data/Smarty/templates/default/site_frame.tplでそれぞれのファイルを読み込む <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.js"></script> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.ui.core.js"></script> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.ui.tabs.js"></script> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.ui.widget.js"></script> <link rel="stylesheet" href="<!--{$smarty.const.ROOT_URLPATH}-->css/theme/base/jquery.ui.all.css" type="text/css" media="all" /> <script type="text/javascript"> $(function() { $('#ui-tab > ul').tabs(); }); </script> html内の記述 <div id="ui-tab"> <ul> <li><a href="#fragment-1"><span>タブ1</span></a></li> <li><a href="#fragment-2"><span>タブ2</span></a></li> <li><a href="#fragment-3"><span>タブ3</span></a></li> </ul> <div id="fragment-1"> <p>タブ1の内容</p> </div> <div id="fragment-2"> <p>タブ2の内容</p> </div> <div id="fragment-3"> <p>タブ3の内容</p> </div> </div> どこが間違っているのでしょうか?? お手数ですがよろしくお願い致します。 |
DELIGHT |
投稿日時: 2012/12/18 16:01
対応状況: −−−
|
仙人 登録日: 2010/2/3 居住地: 熊本県・九州・長野県・関東甲信越 投稿: 572 |
Re: jqueryについて <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.js"></script>
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.ui.core.js"></script> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.ui.widget.js"></script> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.ui.tabs.js"></script> の順に読み込んでください。(jquery.ui.tabs.jsはjquery.ui.widget.jsを必要とするので。) それと、cssのパスが間違っていませんか? <link rel="stylesheet" href="<!--{$smarty.const.ROOT_URLPATH}-->user_data/css/theme/base/jquery.ui.all.css" type="text/css" media="all" /> >>html/user_data/css/内にダウンロードしたthemeフォルダを設置。 とのことなので、こちらが正しいパスだと思います。
|
blue1112 |
投稿日時: 2012/12/18 16:34
対応状況: −−−
|
常連 登録日: 2012/7/18 居住地: 投稿: 31 |
Re: jqueryについて DELIGHT 様:ご回答大変ありがとうございました。
ご指摘して頂いた通り修正したのですが、駄目でした。 このタブなんですが、トップページで使用しようとしておりまして、そのトップ画のスライドにjqueryのnivo sliderを使用しているのですが、それが原因という可能性もあるのでしょうか? |
DELIGHT |
投稿日時: 2012/12/18 17:22
対応状況: −−−
|
仙人 登録日: 2010/2/3 居住地: 熊本県・九州・長野県・関東甲信越 投稿: 572 |
Re: jqueryについて すいません、私の見落としでした。
$.tabs()メソッドは、ul要素ではなくその親の要素に対して行なってください。 今回の場合は、 $('#ui-tab > ul').tabs(); ではなく、 $('#ui-tab').tabs(); としてください。
|
blue1112 |
投稿日時: 2012/12/18 18:30
対応状況: −−−
|
常連 登録日: 2012/7/18 居住地: 投稿: 31 |
Re: jqueryについて DELIGHT 様:ご指摘とおり修正した所、無事表示されました!
困っていたので助かりました!本当にありがとうございました!! |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |