私はこのinfoflyout.ascxを持っています
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<script type="text/javascript">
$(document).ready(function () {
$("#flyoutdialog").dialog({ autoOpen: false });
$('#opener').click(function () {
$("#flyoutdialog").dialog('open');
return false;
});
});
</script>
<a class="flyouticon" href="#">
<img src="<%= Url.Content("~/img/help.png") %>" alt="Flyout" width="16" /></a>
<div id="flyoutdialog" title="<%: Model.Title %>">
<p>
<%: Model.Message %></p>
</div>
これは、フォームをより理解しやすくするのに役立つはずです。
私が欲しいのは、フォームフィールドの後ろにある疑問符アイコンです。ユーザーがホバーすると、いくつかの追加情報を含むダイアログが開きます。物の上にカーソルを置いて開閉するjquery、私は理解できると確信しています。
renderpartial を次のように呼び出したい:
<% Html.RenderPartial("infoflyout", new {Title="This is the title", Message="You have to fill in a date, dummy!"}); %>
<a>
問題は、要素に IDを与える方法です。これでクラスが作成されましたが、フォームにこれらのレンダーパーシャルが複数ある場合、1 にカーソルを合わせるとすべてのダイアログが開きます。<a>
それで、MVCは私が使用できるIDをレンダリングできますか? または、jQuery コードを変更してこれを機能させることはできますか、それとも renderpartial を使用すべきではありませんか?
編集:追加の質問
next() は機能しません。これは現在のJSファイルです:
$(document).ready(function () {
$(".flyoutdialog").dialog({ autoOpen: false });
$('.flyouticon').click(function () { return false });
$('.flyouticon').hoverIntent({
over: function () {
// alert("over");
alert($(this).attr('class')); //gives me flyouticon
alert($(this).next(".flyoutdialog").attr('class')); //undefined
alert($(this).next().html()); //null
$(this).next(".flyoutdialog").dialog('open'); //no dialog shows.
},
timeout: 500,
out: function () {
// alert("and out");
$(this).next(".flyoutdialog").dialog('close');
}
});
});
レンダーパーシャル:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<a href="#" class="flyouticon">
<img src="<%= Url.Content("~/img/help.png") %>" alt="Flyout" width="16" /></a>
<div class="flyoutdialog" title="<%: Model.Title %>">
<p>
<%: Model.Message %></p>
</div>
HTML
<div class="editor-label">
<label for="Postcode">Postcode</label>
</div>
<div class="editor-field">
<input id="postcode" name="postcode" type="text" value="" />
<a href="#" class="flyouticon">
<img src="/img/help.png" alt="Flyout" width="16" /></a>
<div class="flyoutdialog" title="This is the title">
<p>
You have to fill in a date</p>
</div>
</div>