页面设计< a href>，<按钮>，<输入>在JSP中 [英] Design of page <a href>, <button>, <input> in JSP
本文介绍了页面设计< a href>，<按钮>，<输入>在JSP中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我收到了一个向HTML页面添加功能的任务（JSP）。该页面仅来自设计师/前端开发人员，因此在某些地方我需要将 a href 更改为按钮或 input 但它会弄得乱七八糟，所有的设计都会改变。这是一段代码：
< div class =col-md-3 col-sm-5 col-sx -12id =leftmenu>
< nav>
< ul class =nav nav-pills nav-inlineid =addchild>
< li>
< a href =＃id =add>
< i class =glyphicon glyphicon-plus>< / i>
< / a>
< / li>
< li>
< a href =＃id =addtext>添加小孩/学生< / a>
< / li>
< / ul>
< ul class =nav nav-pillsid =parentinfo>
< li>
< a href =＃class =listItemid =edit>
< span class =editicon>编辑< / span>
< / a>
< / li>
< li>
< a href =＃class =listItemid =edittext>
< span class =parentInfo>父资讯< / span>
< / a>
< / li>
< / ul>
< ul class =nav nav-pills nav-stacked>
< li>
< a href =＃class =listItemid =upgradestyle =color：#FFFFFF！important;>升级包< / a>
< / li>
< li>
< a href =＃class =listItemid =catalogstyle =color：#FFFFFF！important;> Wow Catalog< / a>
< / li>
< / ul>
< / nav>
我希望它像下面一样，而不会改变外观：
< div class =col-md-3 col-sm-5 col -sx-12id =leftmenu>
< nav>
< ul class =nav nav-pills nav-inlineid =addchild>
< li>
< a href =/ register / studentSignuptype =submitid =add>
< i class =glyphicon glyphicon-plus>< / i>
< / a>
< / li>
< li>
< a href =/ register / studentSignuptype =submitid =addButton> Add Child / Student< / a>
< / li>
< / ul>
< ul class =nav nav-pillsid =parentinfo>
< li>
< input type =submitclass =listItemname =actionvalue =editParentInfoid =edit/>
< span class =editicon>编辑< / span>
< / li>
< li>
< input type =submitclass =listItemname =actionvalue =editParentInfoid =editParent/>
< span class =parentInfo>父资讯< / span>
< / li>
< / ul>
< ul class =nav nav-pills nav-stacked>
< li>
< a href =upgradeclass =listItemid =upgradestyle =color：#FFFFFF！important;>升级包< / a>
< / li>
< li>
< a href =＃class =listItemid =catalogstyle =color：#FFFFFF！important;> Wow Catalog< / a>
< / li>
< / ul>
< input type =hiddenname =parentIDpath =parentIDvalue =$ {parentInfo.parentID}>
< input type =hiddenname =$ {_ csrf.parameterName}value =$ {_ csrf.token}/>
< / nav>
解决方案
你不应该改变给你的设计。在HTML中添加/更改 visible 元素会改变布局。
同样做这些修改不仅会给设计带来混乱， HTML代码。
锚标记没有 type =submit属性。此属性可用于按钮和 input 元素中。
修改 href 属性可在悬停时显示URL。这不是设计者强加的行为。可能他/她应该给你指示如何继续执行代码以不改变设计。在这种情况下，可以使用javascript函数处理 onclick 和 onsubmit 事件以提交表单。
这里的例子显示你可以提交一个带有验证的表单。
$ b 注意：该代码仅适用于 Edit 按钮。
$ b HTML： p>
< form id =editFormonsubmit =return doValidate（）;>
< div class =col-md-3 col-sm-5 col-sx-12id =leftmenu>
< nav>
< ul class =nav nav-pills nav-inlineid =addchild>
< li>
< a href =＃id =add>
< i class =glyphicon glyphicon-plus>< / i>
< / a>
< / li>
< li>
< a href =＃id =addtext>添加小孩/学生< / a>
< / li>
< / ul>
< ul class =nav nav-pillsid =parentinfo>
< li>
< a href =＃class =listItemid =editonclick =doSubmit（）>
< span class =editicon>编辑< / span>
< / a>
< input type =hiddenname =paramvalue =editParentInfo/>
< / li>
< li>
< a href =＃class =listItemid =edittext>
< span class =parentInfo>父资讯< / span>
< / a>
< / li>
< / ul>
< ul class =nav nav-pills nav-stacked>
< li>
< a href =＃class =listItemid =upgradestyle =color：#FFFFFF！important;>升级包< / a>
< / li>
< li>
< a href =＃class =listItemid =catalogstyle =color：#FFFFFF！important;> Wow Catalog< / a>
< / li>
< / ul>
< / nav>
< / div>
< / form>
JavaScript：
函数doSubmit（）{
alert（The form is submitting）;
var form = document.getElementById（editForm）;
form.action =/ register / studentSignup;
form.method =post;
submitForm（form）;
函数doValidate（）{
var form = document.getElementById（editForm）;
alert（正在提交表单\\\
+action =+ form.action +，param =+ form.param.value）;
返回false;
$ / code>
函数submitForm（form）{
//获取表单元素的文档以创建带有
的输入控件（这种方式可以在IE8中的窗口中工作）
var button = form.ownerDocument。的createElement（ '输入'）;
//确定它不能被看到/破坏布局（甚至是暂时的）
button.style.display ='none';
//使它能够在点击时调用提交
button.type ='submit';
//追加并单击它
form.appendChild（button）.click（）;
//如果被阻止，确保我们没有得到按钮的构建
form.removeChild（button）;
参考文献：
I have received a task to add functionality to a HTML page (JSP). The page is just from designers/frontend devs so in some places I need to change a href to button or input but it makes a mess and all the design is changed. Here is a piece of code:
<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
<nav>
<ul class="nav nav-pills nav-inline" id="addchild">
<li>
<a href="#" id="add">
<i class="glyphicon glyphicon-plus"></i>
</a>
</li>
<li>
<a href="#" id="addtext">Add Child / Student</a>
</li>
</ul>
<ul class="nav nav-pills" id="parentinfo">
<li>
<a href="#" class="listItem" id="edit">
<span class="editicon">Edit</span>
</a>
</li>
<li>
<a href="#" class="listItem" id="edittext">
<span class="parentInfo">Parent Info</span>
</a>
</li>
</ul>
<ul class="nav nav-pills nav-stacked">
<li>
<a href="#" class="listItem" id="upgrade" style="color:#FFFFFF !important;">Upgrade Package</a>
</li>
<li>
<a href="#" class="listItem" id="catalog" style="color:#FFFFFF !important;">Wow Catalog</a>
</li>
</ul>
</nav>
I want it to be like the below, without changing appearance:
<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
<nav>
<ul class="nav nav-pills nav-inline" id="addchild">
<li>
<a href="/register/studentSignup" type="submit" id="add">
<i class="glyphicon glyphicon-plus"></i>
</a>
</li>
<li>
<a href="/register/studentSignup" type="submit" id="addButton">Add Child / Student</a>
</li>
</ul>
<ul class="nav nav-pills" id="parentinfo">
<li>
<input type="submit" class="listItem" name="action" value="editParentInfo" id="edit" />
<span class="editicon">Edit</span>
</li>
<li>
<input type="submit" class="listItem" name="action" value="editParentInfo" id="editParent" />
<span class="parentInfo">Parent Info</span>
</li>
</ul>
<ul class="nav nav-pills nav-stacked">
<li>
<a href="upgrade" class="listItem" id="upgrade" style="color:#FFFFFF !important;">Upgrade Package</a>
</li>
<li>
<a href="#" class="listItem" id="catalog" style="color:#FFFFFF !important;">Wow Catalog</a>
</li>
</ul>
<input type="hidden" name="parentID" path="parentID" value="${parentInfo.parentID}">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
</nav>
解决方案
You should not change the design given to you. Adding/changing visible elements in HTML changes the layout.
Also doing that modifications you not only bring a mess to the design but add errors to the HTML code.
The anchor tag doesn't have type="submit" attribute. This attribute is available in buttons and input elements.
Modifying href attribute on links makes URL visible on hover. It's not intended behavior imposed by the designer. Probably he/she should give you directions how to proceed with the code to not change the design. In this case onclick and onsubmit events could be handled with javascript functions to submit a form.
Here the example show you could submit a form with validations.
Note: The code only works with Edit button.
HTML:
<form id="editForm" onsubmit="return doValidate();">
<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
<nav>
<ul class="nav nav-pills nav-inline" id="addchild">
<li>
<a href="#" id="add">
<i class="glyphicon glyphicon-plus"></i>
</a>
</li>
<li>
<a href="#" id="addtext">Add Child / Student</a>
</li>
</ul>
<ul class="nav nav-pills" id="parentinfo">
<li>
<a href="#" class="listItem" id="edit" onclick="doSubmit()">
<span class="editicon">Edit</span>
</a>
<input type="hidden" name="param" value="editParentInfo"/>
</li>
<li>
<a href="#" class="listItem" id="edittext">
<span class="parentInfo">Parent Info</span>
</a>
</li>
</ul>
<ul class="nav nav-pills nav-stacked">
<li>
<a href="#" class="listItem" id="upgrade" style="color:#FFFFFF !important;">Upgrade Package</a>
</li>
<li>
<a href="#" class="listItem" id="catalog" style="color:#FFFFFF !important;">Wow Catalog</a>
</li>
</ul>
</nav>
</div>
</form>
JavaScript:
function doSubmit() {
alert("The form is submitting");
var form = document.getElementById("editForm");
form.action="/register/studentSignup";
form.method="post";
submitForm(form);
}
function doValidate() {
var form = document.getElementById("editForm");
alert("The form is being submitted\n"+"action="+form.action+", param="+form.param.value);
return false;
}
function submitForm(form) { //get the form element's document to create the input control with //(this way will work across windows in IE8) var button = form.ownerDocument.createElement('input'); //make sure it can't be seen/disrupts layout (even momentarily) button.style.display = 'none'; //make it such that it will invoke submit if clicked button.type = 'submit'; //append it and click it form.appendChild(button).click(); //if it was prevented, make sure we don't get a build up of buttons form.removeChild(button); }
References:
- Should jQuery's $(form).submit(); not trigger onSubmit within the form tag?
- What are the allowed tags inside a <li>?
这篇关于页面设计< a href>，<按钮>，<输入>在JSP中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
