【问题标题】:closing the Jquery mobile panel on submit button在提交按钮上关闭 Jquery 移动面板
【发布时间】:2020-07-29 03:12:24
【问题描述】:

我有一个像这样的 jquery 移动面板:

<a href="#panel2"  class="ss-header-actions-language">
    <span class="ss-header-labels" id="ss-general-label">Language</span>
</a>

<div data-role = "panel" id = "panel2" data-display="overlay" data-position="right" data-swipe-close="false" >
    <asp:RadioButton ID="rdbEng1" AutoPostBack="true"   runat="server" Text="English"  GroupName="lang"   />
    <asp:RadioButton ID="rdbspan1"  AutoPostBack="true"   runat="server" Text="Español"  GroupName="lang"   />
    <asp:Button runat="server" Text="Submit" OnClick="Submit_Click"   />
</div>

我希望面板在单击提交按钮时关闭。现在,当我选择面板内的任何单选按钮时,面板会关闭。如果单击单选按钮,我希望面板保持打开状态,但是一旦单击提交按钮,我希望面板关闭。

我怎样才能做到这一点。任何帮助将不胜感激。

【问题讨论】:

    标签: asp.net jquery-mobile jquery-mobile-panel


    【解决方案1】:

    首先你需要防止回发到服务器,为了做到这一点,将AutoPostBack="false"设置为RadioButton,你可以将asp:Button更改为input

    然后根据JQuery Mobile Panel

    也可以通过调用面板的close 方法来关闭面板 直接。

    所以这应该有效:

    <a href="#panel2" class="ss-header-actions-language">
        <span class="ss-header-labels" id="ss-general-label">Language</span>
    </a>
    
    <div data-role="panel" id="panel2" data-display="overlay" data-position="right" data-swipe-close="false">
        <asp:RadioButton ID="rdbEng1" AutoPostBack="false" runat="server" Text="English" GroupName="lang" />
        <asp:RadioButton ID="rdbspan1" AutoPostBack="false" runat="server" Text="Español" GroupName="lang" />
        <input type="button" onclick="ClosePanel();" name="Submit" value="Submit" />
    </div>
    
    <script type="text/javascript">
        function ClosePanel() {
            $("#panel2").panel("close");
        }
    </script>
    

    【讨论】:

    • 我可以对 Radiobutton 使用 autopostback=true 吗
    • 是的,但你应该在这方面做更多的工作。由于当您选择单选按钮时使用 autopostback=true 页面会回发并再次重新加载,因此在这种情况下,您应该考虑在客户端页面加载时关闭面板。
    猜你喜欢
    • 1970-01-01
    • 2010-12-23
    • 1970-01-01
    • 2013-05-18
    • 1970-01-01
    • 2017-05-20
    • 1970-01-01
    • 2019-11-16
    • 2021-06-23
    相关资源
    最近更新 更多