0

jQuery初心者はこちら：

ボタンのクリック時にメッセージを表示し、数秒後にフェードする次のメッセージ div があります。これはうまくいきます。ただし、ページの読み込み時にメッセージ div を非表示にし、ボタンのクリック時に表示したいと思います。

これまでのところ、hideDiv クラスをメッセージ div に追加しようとしましたが、messageDiv がまったく表示されません (ロード時またはボタン クリック時)。また、Div をラップする親を非表示/表示しようとしました (ここには表示されていません)。

提案？ 

<div id="messageDiv" runat="server" class="alert">Row Deleted</div>

.

<style type="text/css">
.alert{display:block;width:100%;color:#900000;font-size: 1.4em;}
.hideDiv{display:none;}
</style>

.

<script type="text/javascript">
$(document).ready(function () {
$(document.getElementById('<%= messageDiv.ClientID %>')).addClass("alert"); setTimeout(function () {
$(document.getElementById('<%= messageDiv.ClientID %>')).fadeOut("slow", function () {
$(document.getElementById('<%= messageDiv.ClientID %>')).remove();
});
}, 4000);
});
</script>

.

<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> 

protected void Button1_Click(object sender, EventArgs e)
{messageDiv.InnerText = "Row Action Completed";}
4

3 に答える 3

0

したがって、メッセージdivをdisplay：noneに設定します。css経由でね？

$('#Button1').click(function() {
    $('#messageDiv').hide();
});

それを試してみてください。

ただし、fadeOutを自動的に実行することもできます。

$(document).ready(function() {
    setTimeout(function(){ $('#messageDiv').fadeOut(); }, 2000);
});
于 2012-09-22T17:23:15.343 に答える
0

だから私は私自身の解決策を考え出しました。もっと簡潔な解決策があると確信していますが（それを聞いてうれしいです）、最終的に次の部分になりました：

解決：

  • メッセージ div は、ページの読み込み時に非表示 (display:none) にする必要があります。
  • ページ レベルのサーバー側変数を false に設定して、メッセージをまだ表示しないことを示します (解決策はこちら)
  • サーバー側のボタンクリックイベントでその変数をtrueに設定します
  • コードを呼び出して Div を表示/フェードする前に、jQuery で var = true を確認します。
  • アラート クラスとフェード効果を追加する前に、既存の隠しクラスを messageDiv から削除します。

したがって、すべての作業部分:

サーバー側スクリプト:

<script type="text/C#" runat="server">
    Boolean UserHasClicked = false;
    protected void Button1_Click(object sender, EventArgs e)
    {
        UserHasClicked = true;
        messageDiv.InnerText = "Row deleted successfully.";
    }
</script>

.

クライアント側スクリプト:

<script type="text/javascript">
var userHasClicked = '<%= this.UserHasClicked %>' == 'True'
$(document).ready(function () {
if (userHasClicked) {
$(document.getElementById('<%= messageDiv.ClientID %>')).removeClass("hideDiv");
$(document.getElementById('<%= messageDiv.ClientID %>')).addClass("alert");
$(document.getElementById('<%= messageDiv.ClientID %>')).delay(4000).fadeOut("slow");      
}
});
</script>

これは興味深い演習でしたが、.net でメッセージを表示/フェードするためのより洗練されたコントロールまたはソリューションがどこかにあると確信しています。

于 2012-09-22T21:32:12.230 に答える
0

jQuery UI ダイアログを見てください。

警告メッセージを表示するための多くのオプションがあります。

独自のソリューションを作成するよりも優れています。

于 2012-09-22T17:25:35.280 に答える