暑假学习11（周五 7.24）

最新推荐文章于 2024-09-27 17:42:37 发布

chunkui7515

最新推荐文章于 2024-09-27 17:42:37 发布

阅读量72

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2411765/blog/484429

版权

今天我们学习的是修改手机上的jsp页面为html，注意：所有的html页面要有对应的<body>标签。在修改过程中，很多时候是与电脑页面的修改时一致的，但是部分还是有所区别。首先是样式表的不一样，在这次修改框架的页面时，我们修改的样式表都是mobile下的css而不再是shop中的了。当然，对于手机的html页面还是使用的thymeleaf解析器，所以还是要页面最上边加上thymeleaf的文件配置。除此之外，我们要注意th:replace标签的使用。其实这个标签与th:fragment是成对使用的，注意两个标签的值要对应的，如：

如果两者不一致，页面无法替换，也就不能正确解析出结果。按钮的功能实现有两种方法，一是通过一个form表单来提交，但是注意button不能是<input type="button">,另一个是通过链接来提交，写法如下：

<a th:href="@{initGuestRegister}"><div><span class="button-t" >注册新用户</span></div></a>

<ul>标签的使用：这个标签是无序标签，其中包括<li>标签，通过这个来显示每一项；<nav>标签是用于定义导航链接时使用的，这个链接可以定义到对应的位置或者不同的页面，例如下面的代码的作用是点击实现页面跳到对应的menu部分，当然这样使用，我们需要在对应的部分加一个<a name="Menu">链接，让它可以找到并跳到对应位置。

</nav>

<image>标签的使用：alt是图像的替代文字，src是图像源，还有对应的高度和宽度属性。如：<img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsInfo.pictureId})}" style="height:185px;width:330px;" />。在使用<span>标签时，有时候我们需要显示一行文字后换行，这时会用<p>标签，这个标签也可以使用th:text属性。

<span style="display:inline;color:red;">*</span>，这个是带有样式的<span>，注意style属性的使用（当前表示以行显示，且为红色字体）。下边这个li标签是特殊的，因为还有th:class,这个属性值判断了后台传到前台的goodForm值然后在成功后该项被激活，呈现被点击的效果。

在javascript脚本中的addNum函数的定义：先找到页面上的id为count的input文本框实现值加一的功能。代码如下：

function addNum() {

document.getElementById("count").value=parseInt(document.getElementById("count").value) + 1;

}

在jsp页面中绑定值是没有th:value而是直接value，它的值为一个el表达式。

下面是验证问题的解决：要求输入文字在验证失败的情况下和验证成功的情况下分别使用不同的css样式，写成了cssClass与cssErrorClass：

点击按钮实现返回上一页的操作，通过onclick事件来通过window.history.back()方法来实现，具体代码如下：

转载于:https://my.oschina.net/u/2411765/blog/484429