Использование всплывающих подсказок инструментов JQuery с вкладками пользовательского интерфейса - PullRequest
Новая
       13

Использование всплывающих подсказок инструментов JQuery с вкладками пользовательского интерфейса

0 голосов
/ 07 октября 2011

Я пытаюсь использовать плагин всплывающих подсказок для инструментов JQuery на сайте, который я создаю для класса сценариев. Проблема в том, что я использую вкладки пользовательского интерфейса JQuery для навигации по сайту, и, очевидно, эти две библиотеки плохо работают вместе. Когда я загружаю сайт за пределы страницы индекса (сайт, на котором есть вкладки), плагин подсказок работает нормально, только когда я загружаю страницу со вкладок, подсказки перестают работать. Вот как настроена моя страница указателя: 

<html>
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="scripts/jquery.tools.min.js" type="text/javascript"></script>

<link href="styles/mainStyle.css" rel="stylesheet" type="text/css">
<link href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />


<script>
$(document).ready(function() {
    $('#tabs').tabs();
});
</script>
</head>

<body>

<div class="container">

    <div id="tabs">
    <ul id="info-nav">
          <li><a href="home.html" title="home">Home</a></li>
          <li><a href="product.html" title="products">Products</a></li>
          <li><a href="UIDesign.html" title="Order">Order</a></li>
          <li><a href="photos.html" title="FAQ">FAQ</a></li>
          <li><a href="feedback.html" title="About">About</a></li>
    </ul>

  <!-- end .container --></div>

  </div>
</body>
</html>

Страница, на которой у меня есть подсказки, находится здесь: 

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="scripts/jquery.tools.min.js" type="text/javascript"></script>
<script src="scripts/mainScript.js" type="text/javascript"></script>
<link href="styles/mainStyle.css" rel="stylesheet" type="text/css">
<link href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="header">
<h1 class="pageTitle">Products</h1>
</div>

<div id="sidebar">
<h2 class="subTitle">Sign up</h2>
<form>
<label  for="fName">First Name:</label><br />
        <input type="text" class="textbox" name="fName" width="5px"><br />

        <label  for="lName">Last Name:</label><br />
        <input type="text" name="lName"><br />

        <label  for="email">e-mail:</label><br />
        <input type="text" class="textbox" name="email"><br />

        <label  for="uName">Username:</label><br />
        <input type="text" class="textbox" name="uName"><br />

        <label  for="password">Password:</label><br />
        <input type="password"class="textbox" name="password"><br />

        <label for="age">Age:</label>
        <select name="age">
                <option>Select Age Group:</option>
                <option>16-20</option>
                <option>21-25</option>
                <option>26-30</option>
                <option>31-35</option>
                <option>36-40</option>
                <option>41-50</option>
                <option>51-60</option>
                <option>61-70</option>
                <option>71+</option>
        </select><br />

        <label for="gender">Gender:</label><br />
        <input type="radio" name="gender" value="Male">Male<br />
        <input type="radio" name="gender" value="Female">Female<br />

        <input type="Submit" value="Submit">
        <input type="reset">
</form>
</div>

<div class="content" id="bladeContent">
<h2 class="subTitle">GTX 590</h2> 
<p class="productContent">
<img src="images/GTX590/GTX590-0.jpg" class="productThumb" alt="GTX 590">
<div class="tooltip">
    <div class="photoGallery">
    <img src="images/GTX590/GTX590-1.jpg">
    <img src="images/GTX590/GTX590-2.jpg">
    <img src="images/GTX590/GTX590-3.jpg">
    <img src="images/GTX590/GTX590-4.jpg">
    </div>

    <table class="tooltipTable">
    <tr>
        <td>GPU: </td>
        <td>GeForce GTX 590 (Fermi)</td>
    </tr>

    <tr>
        <td>Core Clock: </td>
        <td>612Mhz</td>
    </tr>

    <tr>
        <td>Stream Processors: </td>
        <td>1024 (512x2) Processor Cores</td>
    </tr>

    <tr>
        <td>Effective Memory Clock: </td>
        <td>3420Mhz</td>
    </tr>

    <tr>
        <td>Memory Size: </td>
        <td>3072MB</td>
    </tr>

    <tr>
        <td>Memory Interface: </td>
        <td>768-bit</td>
    </tr>

    <tr>
        <td>Memory Type: </td>
        <td>GDDR5</td>
    </tr>
    </table>
</div>
 With 1024 CUDA cores, 
6 billion transistors, 3GB of GDDR5 memory, and over 2200 individual components
all packed into an 11 inch dual slot PCB, GTX 590 is nothing short of an 
engineering marvel.  Designed to deliver not only the world’s fastest DirectX 11 
performance, but also the world’s quietest acoustics for a dual chip graphics card,
the GTX 590 offers 50% faster performance than GTX 580 while nearly matching its 
little brother’s award winning acoustics.
</p>

</div>

Извините за количество кода, я пытался уменьшить его до того уровня, где, как мне кажется, проблема, но она оказывается довольно сложной. То, чего я действительно не понимаю в закладках пользовательского интерфейса, это где я импортирую скрипты и стили, это должно быть на моей странице индекса или на каждой странице?

1 Ответ

1 голос
/ 28 ноября 2011

Проблема в том, что инструменты jquery ui и jquery используют одну и ту же библиотеку вкладок.это вызывает конфликт.если вы загружаете только инструменты jquery без вкладок, это должно решить эту проблему.

...