2

更新:申し訳ありませんが、この質問を複雑にしています。


私が聞きたいのは、ダイアログの高さが大きくなるにつれて、ボタンの位置をjQueryUIダイアログの下部に「固定」するにはどうすればよいかということです。

次のような jQueryUI ダイアログがあります。

<head>
$(function(){
    $("#ChooseStoryCategory").dialog({
        autoOpen: false,
        title: "Upload",
        height: 600,
        width: 500,
        modal: true
    }); 
});
</head>

そして、ダイアログに 2 つのボタンを追加し、常に に配置したいと考えていbottom of the dialogます。コードは次のとおりです。

<body>
<div id= "ChooseStoryCategory">
    <div id="storyCategory"></div>      

    <div><button id="ChooseCategory"><img src= "../pic/chooseOk.png"/></button></div>
    <div><button id="CategoryCancel"><img src= "../pic/close.png"/></button></div>
</div>
</body>

CSS 設定:

#ChooseCategory{
    position: absolute;
    left: 30%;
    top: 85%;
    bottom: 0;

}

#CategoryCancel{
    position: absolute;
    left: 70%;
    top: 85%;
    bottom: 0;
}

しかし、私は常に次のようにダイアログ内の要素を増やします:

for(multiple times)://pseudocode
var categoryName= "PressNum1";
var value= 3;
var $btn= $('<button/>').text(categoryName).width(400).height(80);
$btn.bind('click', function(){console.log(value)});
$("#storyCategory").append($btn);

追加するボタンが増えると、その位置は 2 つのボタン (ChooseCategoryとCategoryCancel) を超えます。2 つのボタンを jQueryUI ダイアログの下部にドッキングするにはどうすればよいですか?

2 つのボタンの最初の一番上の位置を取得しようとしました。各ボタンがダイアログに追加されると、. の位置を変更するだけtwo buttonsです。

$("#CategoryCancel").css("height") = $("#ChooseStoryCategory").css("height") * 0.85 + $btn.css("height");

しかし 

$("#ChooseStoryCategory").css("height") * 0.85 + $btn.css("height");

を追加しませんでしpxた。数字と文字列を組み合わせただけです...


jqueryUIダイアログの下部にある2つのボタンをドッキングする簡単な代替アプローチはありますか?

4

1 に答える 1

4

なぜあなたはbuttonsオプションを使わないのですか？

$( "#ChooseStoryCategory" ).dialog({
  autoOpen: false,
  title: "Upload",
  height: 600,
  width: 500,
  modal: true
  buttons: {
    "Choose category": function() {
      // Do something
      $( this ).dialog( "close" );
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  }
});

jquery-ui のページ ( http://jqueryui.com/dialog/ ) 内の例を確認するか、API ドキュメント ( http://api.jqueryui.com/dialog/#option-buttons ) を確認してください。

これが jsFeedle です: http://jsfiddle.net/6gb4v/ (@rusln フィドルを取り、そこから始めました)。

于 2013-06-28T04:21:39.367 に答える