Справка, разочарование: размещение диалога относительно триггера с использованием только jQuery UI dialog + position - PullRequest
Новая
       25

Справка, разочарование: размещение диалога относительно триггера с использованием только jQuery UI dialog + position

0 голосов
/ 25 июля 2011

Можно ли разместить диалог на основе пользовательского интерфейса jQuery относительно его ссылки триггера, используя только диалог jQuery UI и сценарии позиционирования (а не какой-либо другой плагин или метод)?Я не могу найти жизнеспособных демонстраций, и метод Jensbits, на который здесь ссылаются, часто разваливается в IE8, который я должен поддерживать.закомментированная часть, начинающаяся с «var offset», только смещает content внутри диалога, а не само диалоговое окно, и, похоже, не помогает в расположении диалога под кнопкой.Как показано, диалоговое окно загружает центр страницы по умолчанию.

Я очень признателен за любую помощь в этом.Спасибо!--cg 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>

<!-- YUI3 reset only: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.3.0/build/cssreset/reset-min.css">

<!-- JQuery CDN -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<!-- JQuery UI CDN -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

<!-- JQuery UI scripts -->
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.dialog.js"></script>

<style media="screen" type="text/css">
<!--
/* styles for demo purposes only, do not copy */
body{width:97%;margin:0 1.5%;font:13px/1.231 'Arial Unicode MS',Arial,Verdana,sans-serif !important}
strong{font-weight:bold}
a{color:#034ea2}
a:hover{color:#ff7600}
p{margin:0 0 1em}
#page{min-width:780px;max-width:1260px;margin:12px auto}
/* end demo styles */

/* dialog base */
.dialog.ui-dialog{overflow:hidden;border:1px solid #a2aaaf;-moz-box-shadow:0px 1px 3px #7c888f;-webkit-box-shadow:0px 1px 3px #7c888f;box-shadow:0px 1px 3px #a2aaaf;background:#ffffff}
.dialog .ui-dialog-titlebar{margin-bottom:6px;padding:4px 6px;border-bottom:1px solid #dadddf;background:#eceeef;font-size:11px;color:#455560}
.dialog .ui-dialog-title-dialog{float:left}
.dialog .ui-dialog-titlebar-close
{float:right;width:17px;height:17px;position:relative;top:-1px;text-indent:-9999px;background:orange}
.dialog .ui-dialog-titlebar-close:hover{background-position:0 -30px}
.dialog .ui-dialog-content{padding:4px 10px 8px}

-->
</style>
</head>

<body>

<div id="page">

    <!-- dialog trigger -->
    <button id="opendialog01">Open dialog</button>

</div>

<!-- dialog -->
<div class="dialog" id="dialog01" title="Test dialog">

    <p>[dialog content]</p>

</div>

<!-- initialize dialog -->
<script type="text/javascript">
<!--
$.fx.speeds._default = 100;

$(function() {

    $(".dialog").dialog({
        autoOpen: false,
        show: "blind",
        hide: "blind",
        width: 400,
        modal: false,
        draggable: false,
        resizable: false,
        dialogClass: "dialog"
    });

    var showDialog = function (e, $trigger, $dialog) {
        e.preventDefault();
          /*
          var offset = $trigger.offset();
          $dialog.position({
            of: $trigger,
            my: "left top",
            at: "left bottom"
          });
          */
          $dialog.dialog("open");
        return false;
     };

    $("#opendialog01").click(function(e) {
        return showDialog( e, $(this), $("#dialog01") );
    });

});
-->
</script>

</body>
</html>

1 Ответ

2 голосов
/ 29 июля 2011

Получил помощь по этому вопросу в автономном режиме от коллег-дизайнера. Решение для позиционирования диалогового окна на основе jQuery относительно ссылки / кнопки с использованием позиции jQuery (мой метод at http://docs.jquery.com/UI/Position) приведен ниже. Работает в основных браузерах, включая IE, обратно в v7. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>

<!-- YUI3 reset only: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.3.0/build/cssreset/reset-min.css">

<!-- JQuery CDN -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<!-- JQuery UI CDN -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

<style media="screen" type="text/css">
<!--
body{width:97%;margin:0 1.5%;font:13px/1.231 'Arial Unicode MS',Arial,Verdana,sans-serif}
#page{min-width:780px;max-width:1260px;margin:12px auto}

/* dialog base */
.dialog.ui-dialog{overflow:hidden;border:1px solid #a2aaaf;-moz-box-shadow:0px 1px 3px #7c888f;-webkit-box-shadow:0px 1px 3px #7c888f;box-shadow:0px 1px 3px #a2aaaf;background:#ffffff}
.dialog .ui-dialog-titlebar{margin-bottom:6px;padding:4px 6px;border-bottom:1px solid #dadddf;background:#eceeef;font-size:11px;color:#455560}
.dialog .ui-dialog-title-dialog{float:left}
.dialog .ui-dialog-titlebar-close
{float:right;width:17px;height:17px;position:relative;top:-1px;text-indent:-9999px;background:orange/* color for illo purposes only */ url('[image]') 0 0 no-repeat}
.dialog .ui-dialog-titlebar-close:hover{background-position:0 -30px}
.dialog .ui-dialog-content{padding:4px 10px 8px}

-->
</style>
</head>

<body>

<div id="page">

    <!-- dialog trigger -->
    <button id="opendialog01">Open dialog</button>

</div>

<!-- dialog -->
<div class="dialog" id="dialog01" title="Test dialog">

    <p>[dialog content]</p>

</div>

<!-- initialize dialog -->
<script type="text/javascript">
<!--
$.fx.speeds._default = 100;

$(function() {

    $(".dialog").dialog({
        autoOpen: false,
        show: "blind",
        hide: "blind",
        width: 400,
        modal: false,
        draggable: false,
        resizable: false,
        dialogClass: "dialog"
    });

    function showDialog (e, $trigger, $dialog) {
        e.preventDefault();
        $dialog.dialog("option", "position", {
            my: "left top",
            at: "left bottom",
            of: $trigger
        });
        $dialog.dialog("open");
    };

    $("#opendialog01").click(function(e) {
        return showDialog (e, $(this), $("#dialog01") );
    });

});
-->
</script>

</body>
</html>
...