バージョン選択

フォーラム

メニュー

オンライン状況

49 人のユーザが現在オンラインです。 (30 人のユーザが フォーラム を参照しています。)
登録ユーザ: 1
ゲスト: 48
ducklife もっと...

サイト内検索

質問 > フロント機能 > 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
居住地: 熊本県・九州・長野県・関東甲信越
投稿: 571
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フォルダを設置。
とのことなので、こちらが正しいパスだと思います。


----------------
+ DAISY inc. -------------------- +
EC-CUBE構築・カスタマイズサービス
EC・WEB構築などお気軽にご相談ください。

デイジー株式会社
http://daisy.link/

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
居住地: 熊本県・九州・長野県・関東甲信越
投稿: 571
Re: jqueryについて
すいません、私の見落としでした。
$.tabs()メソッドは、ul要素ではなくその親の要素に対して行なってください。


今回の場合は、

$('#ui-tab > ul').tabs();

ではなく、

$('#ui-tab').tabs();

としてください。


----------------
+ DAISY inc. -------------------- +
EC-CUBE構築・カスタマイズサービス
EC・WEB構築などお気軽にご相談ください。

デイジー株式会社
http://daisy.link/

blue1112
投稿日時: 2012/12/18 18:30
対応状況: −−−
常連
登録日: 2012/7/18
居住地:
投稿: 31
Re: jqueryについて
DELIGHT 様:ご指摘とおり修正した所、無事表示されました!
困っていたので助かりました!本当にありがとうございました!!
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBEペイメント

公式ストアEC-CUBE4系デザインテンプレート続々リリース中

統計情報

総メンバー数は67,424名です
総投稿数は98,787件です

投稿数ランキング

1
seasoft
7333
2
AMUAMU
2712
3
468
2692
4
nanasess
2115
5
umebius
1788
6
yuh
1612
7
red
1427
8
h_tanaka
1051
9
fukap
907
10
tsuji
863
11
shutta
835
12
tao_s
792
13 ramrun 789
14 karin 657
15 sumida 641
16
homan
633
17 DELIGHT 571
18
patapata
502
19
flealog
485
20 tonton 437


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.