jQuery ui .dialog ボックスの使い方、大胆さ、実際に新しい ui .position 関数のドキュメントを読むのが少し上手になってきましたが、試してみたいと思います。
DOM に大きな隠しテーブルがあります。.dialog に配置すると「非表示」になります。コードは次のとおりです。
$( "#addupdateinsurance" ).dialog({
height: 350,
width: 700,
modal: true,
title: "Add/Update insurance company",
autoOpen: true,
closeOnEscape: true
});
これはうまくいきます。今、私はそれをDOMの特定の場所に配置したいと思っていて、「新しい」.position関数について読んでいました。私は「カスケード」の概念が好きで、今では古い「success:」の代わりに ajax 呼び出しの後に .done を使用しています。だから私はこれをしました：
$( "#addupdateinsurance" ).dialog({
height: 350,
width: 700,
modal: true,
title: "Add/Update insurance company",
autoOpen: true,
closeOnEscape: true
}).position({
my:"right center",
at:"right center",
of:"#centraldiv" });
そして、それはうまくいきました。ダイアログは私が望んでいた位置にうまく移動しましたが、テーブルは別の位置に置き去りにされました。
しばらく遊んで .dialog と .position のドキュメントを読んだ後、次のことを試してみましたが、うまくいきました。
$( "#addupdateinsurance" ).dialog({
height: 350,
width: 700,
modal: true,
title: "Add/Update insurance company",
autoOpen: true,
closeOnEscape: true,
position:{my:"right center",
at:"right center",
of:"#centraldiv" }
});
だから私の質問は：
- 最初のインスタンス/エラー/機能で、テーブルが $().dialog() に配置されたときにテーブルが .dialog に「バインド」されないのはなぜですか? ダイアログと共に移動しないのはなぜですか?
- .position をカスケード形式で他のもの (div、span など) と一緒に使用できますか?
再度、感謝します！
ちょっと大きいので、最初に載せませんでしたが、ここにあります：
<!--start add/update table-->
<table id="addupdateinsurance" class="addinsurancecotable">
<tr>
<td class="tablerjc" style="width:120px" >Company Name:</td><td style="width:200px" class="tableljc"><input id="companyname"></td>
<td style="width:120px" class="tablerjc">Name Type:</td><td style="width:200px" class="tableljc"><input id="companyname2"></td></tr>
</tr>
<tr>
<td class="tablerjc">Company Number:</td><td class="tableljc"><input id="companynum"></td>
<td class="tablerjc">Intermediary:</td><td class="tableljc"><input id="intermediary"></td>
</tr>
<tr>
<td class="tablerjc">Street 1:</td><td class="tableljc"><input id="street1" name="street1"></td>
<td class="tablerjc">Street 2:</td><td class="tableljc"><input id="street2"></td>
</tr>
<tr>
<td class="tablerjc">City:</td><td class="tableljc"><input id="city"></td>
<td class="tablerjc">State:</td><td class="tableljc"><input id="state" size = "5" name="state">
Zip:<input id="zip" size = "8" name="zip"></td>
</tr>
<tr>
<td class="tablerjc">Elig phone:</td><td class="tableljc"><input id="phoneelig" name="phoneelig"></td>
<td class="tablerjc">Business phone:</td><td class="tableljc"><input id="phone1" name="phone1"></td>
</tr>
<tr>
<td class="tablerjc">Elig web:</td><td class="tableljc"><input id="siteelig" name="siteelig"></td>
<td class="tablerjc">Business FAX:</td><td class="tableljc"><input id="fax" name="fax"></td>
</tr>
<tr>
<td colspan="4">
<button id="resetbutton" style="float:left;"> CLEAR ALL</button> <!--reset all input-->
<button id="submitbuttonadd" style="float:right"> Add/Update</button> <!--add problem-->
</td>
</tr>
</table>
<!--end add/update table-->
CSS は次のとおりです。
.addinsurancecotable {
height:200px;
margin:10px auto 10px auto;
background-color:#E2E4FC;
display:none;}
.addinsurancecotable td {
border:0px solid black;
font-family:"Times New Roman", Times, serif;
font-size:14px;}