在标题中显示提交按钮

发布于 2024-10-03 21:23:28 字数 1007 浏览 0 评论 0原文

我目前正在将 jQTouch Web 项目移植到 jQuery Mobile,并遇到了以下问题:我需要在页面标题中显示表单提交按钮,但除非我将提交按钮设置为标题中的操作(而不是输入)内容中的提交类型)jQuery Mobile 始终会将该按钮呈现为表单的一部分。

这将起作用(按钮将显示在页面标题的右侧):

<div data-role="header" data-theme="b">
     <a href="#" class="ui-btn-right" data-icon="check"><%: Resources.View.Account.Labels.DoLogOn %></a>
</div>

事情是,我必须编写自定义 JavaScript 来触发提交,这显然是我不愿意的。另一方面,如果我在表单内处理此问题,即

<% using (Html.BeginForm("LogOn", "Account", 
     new { returnUrl = Request.QueryString["ReturnUrl"] }, FormMethod.Post,         
     new { @class = "ui-body ui-body-c" }))
   {%>
      <fieldset class="ui-grid-a" data-theme="c">
         <input data-icon="check"
                class="ui-btn-right"
                type="submit" 
                value="<%= Resources.View.Account.Labels.DoLogOn %>" />
      </fieldset>
<% } %>  

按钮将显示在内容内。

有没有办法让 jQuery Mobile 使用后一种方法在标题中显示提交按钮?

I'm currently porting a jQTouch web project to jQuery Mobile and have run into the following issue: I need to display a form submit button in the page header, but unless I make the submit button an action in the header (instead of an input of type submit in the content) jQuery Mobile will always render that button as part of the form.

This will work (button will show on the right side of the page header):

<div data-role="header" data-theme="b">
     <a href="#" class="ui-btn-right" data-icon="check"><%: Resources.View.Account.Labels.DoLogOn %></a>
</div>

Thing is, I'd have to write custom javascript to trigger the submit, which obviously I'd rather not. If, on the other hand I handle this inside the form, i.e.

<% using (Html.BeginForm("LogOn", "Account", 
     new { returnUrl = Request.QueryString["ReturnUrl"] }, FormMethod.Post,         
     new { @class = "ui-body ui-body-c" }))
   {%>
      <fieldset class="ui-grid-a" data-theme="c">
         <input data-icon="check"
                class="ui-btn-right"
                type="submit" 
                value="<%= Resources.View.Account.Labels.DoLogOn %>" />
      </fieldset>
<% } %>  

the button will be displayed inside the content.

Is there a way to make jQuery Mobile display the submit button in the header using the latter approach?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

清眉祭 2024-10-10 21:23:28

我知道我迟到了几个月,但我发现这篇文章正在研究另一个问题。要通过标题中的按钮提交页面,您可以使用以下按钮标记:

<a href="#" onclick="$('form#Account').trigger('submit')" class = "ui-btn-right" data-role="button" >Logon</a>

I know I'm a few months late, but I came across this post researching another problem. To submit a page from a button in the header you can use the following button markup:

<a href="#" onclick="$('form#Account').trigger('submit')" class = "ui-btn-right" data-role="button" >Logon</a>
爱要勇敢去追 2024-10-10 21:23:28

我不熟悉 jQTouch,但是像下面这样怎么样?
问题可能与所使用的 css 类以及使用它们的位置有关。

<% using (Html.BeginForm("LogOn", "Account", 
     new { returnUrl = Request.QueryString["ReturnUrl"] }, FormMethod.Post))
   {%>
   <div data-role="header" data-theme="b">
     <fieldset class="ui-grid-a" data-theme="c">
     <input data-icon="check"
            class="ui-btn-right"
            type="submit" 
            value="<%= Resources.View.Account.Labels.DoLogOn %>" />
     </fieldset>
   </div>
   <div id="Content" class="ui-body ui-body-c">
      ...content here
   </div>
<% } %>  

I am not familiar with jQTouch, but how about something like the following?
The issue is probably around the css classes used and where you have used them.

<% using (Html.BeginForm("LogOn", "Account", 
     new { returnUrl = Request.QueryString["ReturnUrl"] }, FormMethod.Post))
   {%>
   <div data-role="header" data-theme="b">
     <fieldset class="ui-grid-a" data-theme="c">
     <input data-icon="check"
            class="ui-btn-right"
            type="submit" 
            value="<%= Resources.View.Account.Labels.DoLogOn %>" />
     </fieldset>
   </div>
   <div id="Content" class="ui-body ui-body-c">
      ...content here
   </div>
<% } %>  
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文