Jquery Dialogue - несколько на одной странице - PullRequest
Новая
       10

Jquery Dialogue - несколько на одной странице

4 голосов
/ 07 апреля 2009

Я пытаюсь реализовать диалоговое окно jquery несколько раз на одной странице - в основном я хочу показать дополнительную информацию о человеке, когда пользователь нажимает на его имя.

Я создаю страницу с php.

Я пытался сделать это, и это частично работало, но я могу заставить работать только первый экземпляр на странице. Пожалуйста, кто-нибудь может привести мне пример, потому что те, что на странице пользовательского интерфейса, не так полезны, так как они автоматически появляются при открытии страницы.

Я воздержался от публикации своего кода, так как считаю, что это неправильный способ сделать это.

Так заранее.

Ответы [ 2 ]

3 голосов
/ 07 апреля 2009

Вся необходимая информация находится прямо на странице документации по пользовательскому интерфейсу, внизу на вкладках с надписями «Опции» и «Методы». Эти ребята ваши друзья и расскажут вам (почти) все, что может сделать виджет. Например, 

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying
       information. The dialog window can be moved, resized and
       closed with the 'x' icon.</p>
</div>
...
<a href="" onclick="openDialog('Peter Smith', '<p>Peter Smith likes dirt bike riding, mountain climbing and punk music.</p>'); return false;">Peter Smith</a>
...
<script type="text/javascript">

    $(document).ready( function() {
       $("#dialog").dialog({ autoOpen: false, modal: true });
    });

   function openDialog(title, text) {
        $("#dialog").html(text).dialog('option','title',title).dialog('open');
   }
</script>
1 голос
/ 07 апреля 2009

Следующее должно работать как действительный пример. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7 -->
<head>
  <meta http-equiv="Content-Type" content="application/text+html;utf-8"/>

  <title>Sandbox</title>

  <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" charset="utf-8" />
  <link rel="stylesheet" href="css/print.css" type="text/css" media="print" charset="utf-8" />
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<style type="text/css">

</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1.3.2");
    google.load("jqueryui", "1.7.0");
</script>
<script type="text/javascript">
google.setOnLoadCallback(function() {

      $(document).ready(function() {
        $('.more-text').toggle();
        $('.more').click(function() {
            $(this).parent().next('p').dialog();
        })


    });
});
</script>
</head>
<body>
    <div id="container">
        <div id="person-1">
        <p>Short text for person one <a href="#" class="more">Show more</a></p>
        <p class="more-text">This is more of the text</p>
        </div>
        <div id="person-2">
        <p>Short text for person two <a href="#" class="more">Show more</a></p>
        <p class="more-text">This is more of the text with a longer description that
        is supposed to go into a popup</p>
        </div>
    </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...