1

でフローティングパネルを作ろうとしています

var self = this;

this.$widget = (function() {
    var $panel = $("#tmpl-float-panel").tmpl({
        title : title
    });

    //close on click on cross
    $panel.find(".ui-dialog-titlebar-close").click(function() {
        self.hide();
    });

    $panel.draggable({
        containment : "parent",
        handle : "div.ui-dialog-titlebar",
        opacity : 0.75
    }).appendTo($container);

    return $panel;
})();

後でコンテンツを挿入します

this.$widget.find(".ui-dialog-content").append($content);

パネルの作成に使用される jquery テンプレートは次のとおりです。

<script id="tmpl-float-panel" type="text/x-jquery-tmpl">
    <div class="ui-widget ui-dialog ui-corner-all ui-widget-content float-panel no-select">
        <div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix">
            <span class="ui-dialog-title">${title}</span>
            <a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
                <span class="ui-icon"></span>
            </a>
        </div>
        <div class="ui-dialog-content ui-widget-content">
        </div>
    </div>
</script>

これが質問です。パネルをドラッグしようとすると (タイトル バーをクリックしてマウスを動かす)、ウィジェット全体が消えます。誰かが理由を教えてもらえますか?

UPD:クロムでは、クリックしても消えませんが、何らかの理由ですべての可能な幅が必要です。

html ラッピング フローティング パネルは次のとおりです。

<div id="idA">
<div id="idB">
<!-- here I have panels and other divs -->
</div>
</div>

私が持っているCSSで

#idA {
  height: auto !important;
  min-height: 100%;
}

#idB {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
4

4 に答える 4

1

最初に追加してから、ドラッグ可能でサイズ変更可能なものを呼び出してみてください。

$ panel.appendTo（$ container）.resizable（）。draggable（）;

于 2013-02-15T15:02:30.870 に答える
1

あなたが提供したコードに基づいて、jsfiddleを作成しました。

jsfiddle 内で、パネルは私がテストしたすべてのブラウザー (FF、Safari、Chrome、Opera を含む) で期待どおりに動作します。

あなたの問題は、jQuery テンプレートで jqueryui ダイアログの閉じるボタンを適切に定義しておらず、タイトル バーのクリックが ".ui-dialog-titlebar-近い"。私のjsfiddleで私が定義した：

<a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
    <span class="ui-icon ui-icon-close"></span>
</a>

それが違いを生むかもしれません。

ここにjsfiddleへのリンクがあります。

于 2013-02-18T13:36:00.783 に答える
1

私はそれを一度持っていましたが、問題は親 div に css プロパティがあったことでしたposition: absolute。その効果は、アイテムをドラッグし始めた瞬間に画面の右下隅に配置されたということでした. 最初は消えたと思ったのですが、左上にドラッグすると出てきます。

于 2013-02-15T15:04:53.287 に答える
0

display: inline-blockフロートパネルに追加して問題を解決しました

<script id="tmpl-float-panel" type="text/x-jquery-tmpl">
    <div style="display: inline-block" class="ui-widget ui-dialog ui-corner-all ui-widget-content float-panel no-select">
        <div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix">
            <span class="ui-dialog-title">${title}</span>
            <a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
                <span class="ui-icon"></span>
            </a>
        </div>
        <div class="ui-dialog-content ui-widget-content">
        </div>
    </div>
</script>

よりエレガントなソリューションのアイデアはありますか?

于 2013-02-19T22:20:38.477 に答える