2014-01-15 34 views
1

此代碼的jQuery創建標籤:爲什麼不能通過jquery在joomla中創建標籤?

<link rel="stylesheet" href="../../../../../js/themes/base/jquery.ui.all.css"> 
     <script src="../../../../../js/jquery-1.9.1.js"></script> 
     <script src="../../../../../js/ui/jquery.ui.core.js"></script> 
     <script src="../../../../../js/ui/jquery.ui.widget.js"></script> 
     <script src="../../../../../js/ui/jquery.ui.tabs.js"></script> 
     <link rel="stylesheet" href="../../../../../css/demos.css"> 
     <script> 
      $(function() { 
       $("#tabs").tabs(); 
      }); 
     </script> 

    <?php 
    // No direct access to this file 
    // defined('_JEXEC') or die('Restricted access'); 
    ?> 

    <div id="tabs"> 
     <ul> 
      <li><a href="#tabs-1">Nunc tincidunt</a></li> 
      <li><a href="#tabs-2">Proin dolor</a></li> 
      <li><a href="#tabs-3">Aenean lacinia</a></li> 
     </ul> 
     <div id="tabs-1"> 
      tab 1 
     </div> 
     <div id="tabs-2"> 
      tab 2 
     </div> 
     <div id="tabs-3"> 
      tab 3 
     </div> 
    </div> 

如果我把這些代碼在一個頁面例正常。它顯示選項卡確定: enter image description here

但是,如果我把該代碼在Joomla頁面。它無法顯示選項卡: enter image description here

爲什麼不能通過jquery在joomla中創建選項卡?或如何在Joomla的頁面中創建標籤? 謝謝大家。

+0

它看起來像是缺少樣式表或您正在使用的某些樣式正在被覆蓋。 – Mike

+1

檢查路徑是否正確,因爲這太瘋狂了...... ../../../../../' –

+0

嘗試打開Firebug或Chrome開發者工具,然後點擊「網絡」選項卡並刷新這一頁。它會告訴你引用的任何內容是否加載失敗。 – Mike

回答

1

您應該使用$this->baseurljs and css paths和使用jQuery,而不是$no confliction一樣,

<script src="<?php echo $this->baseurl;?>js/jquery-1.9.1.js"></script> 
<!-- other scripts --> 
<script> 
    jQuery(function() { 
     jQuery("#tabs").tabs(); 
    }); 
</script> 
+0

我曾嘗試,但沒有工作 – mum

+0

檢查你的'頁面源',你是否得到了'正確urls''js和css',使用可以使用'CDN'來添加'jquery和jqery-ui' –

+0

查看路徑。沒關係。 – mum

1

我已經解決了我的jQuery UI的選項卡之間)和衝突(的Joomla SEF將此代碼添加到我的腳本:

//Get app object 
$app = JFactory::getApplication(); 
// Dispatch the application. 
$app->dispatch(); 
// added these to lines 
$document = JFactory::getDocument(); 
$document->setBase("http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]); 
相關問題