前端的积累

最新推荐文章于 2023-02-13 16:39:50 发布

竹叶戏雨

最新推荐文章于 2023-02-13 16:39:50 发布

阅读量142

点赞数

分类专栏： web积累文章标签： jsp

本文链接：https://blog.csdn.net/qq_39370658/article/details/85164408

版权

web积累专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1，重置功能

<head>
<script type="text/JavaScript">
    //清空查询条件
    function clearQueryCondition(){
        //设置所有的input标签且typy为text的内容为空
        $("input[type=text]").val("");
        //设置所有的下拉框选择第一个  两个方法根据情况选择 都可以
        $('select').prop('selectedIndex', 0);
    }
</script>
</head>

<body>
    <table>
        <tr>
            <td>
              <input type="button"  value="重置" onclick="clearQueryCondition();">
           </td>
        </tr>
    </table>
</body>

2.后台传一个string[]的数组knowledgeBaseForm.tagsId，一个list<map<key,value>>的list集合tagNameList

 <c:forEach var="tag" items="${tagNameList}">
	 <c:forEach var="tagList" items="${tag}">
	    <input type="checkbox" name="tagsId" value="<c:out value="${tagList.key}"/>"
	    		<c:forEach var="tagsId" items="${knowledgeBaseForm.tagsId}">
	    				 <c:if test="${tagsId eq tagList.key}">checked</c:if> 
	    		</c:forEach>  onclick="return false;" /> 
	        <c:out value="${tagList.value}" />
	 </c:forEach>
</c:forEach>

如今的显示结果是

遍历结果集，将tagsId里的值勾选出来。

因为是回显，且不允许改动，所以要将没被勾选的隐藏，方便观看。经过思路的死路（将没被选择的隐藏，失败了），终于找到了解决的办法，将tagsId里有的显示并选中。

 <c:forEach var="tag" items="${tagNameList}">
	<c:forEach var="tagList" items="${tag}">
		<c:forEach var="tagsId" items="${knowledgeBaseForm.tagsId}">
			<c:if test="${tagsId eq tagList.key}">
				<input type="checkbox" name="tagsId" value="<c:out value="${tagList.key}"/>" checked onclick="return false;" /> 
                                <c:out value="${tagList.value}" />
			</c:if> 
		</c:forEach> 
	</c:forEach>
</c:forEach>

这其实就是一个思路的转变。

3.对于选择时，一定要用label标签！！！

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

4.返回功能的编写

后台：预先写好返回所执行的方法。前台：

 function goback(){
		  var backUrl='<%=(String)request.getSession().getAttribute("backUrl")%>';
		  if(backUrl!=''&&backUrl!='null'){
			 this.window.location=backUrl;
		  }else{
		    history.go(-1);
		  }
   }

5.前台使用ckeditor富文本编辑器，传到后台的数据为，前端为了防止攻击，将格式符号都转换成&lt等，使得回显时无法显示格式。解决办法form中添加一句encType="multipart/form-data"就可以了

6.块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

对于 CSS 里的 visibility 属性，通常其值被设置成 visible 或 hidden。

visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：

1、display:none 元素不再占用空间。
2、visibility: hidden 使元素在网页上不可见，但仍占用空间。

然而，visibility 还可能取值为 collapse 。

当设置元素 visibility: collapse 后，一般的元素的表现与 visibility: hidden 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group、table column group 等，其表现却跟 display: none 一样，也即其占用的空间会释放。

在不同浏览器下，对 visibility: collapse 的处理方式不同：

1、visibility: collapse 的上述特性仅在 Firefox 下起作用。
2、在 IE 即使设置了 visibility: collapse，还是会显示元素。
3、在 Chrome 下，即使会将元素隐藏，但无论是否是与 table 相关的元素，visibility: collapse 与 visibility: hidden 没有什么区别，即仍会占用空间。

8.前台遍历map<list>，并一行存4项

<th align="center" nowrap width="15%">标签</th>
<td colspan="3">
    <table>
	<tr>
		<c:forEach var="tag" items="${tagNameList}" varStatus="status">
			<c:forEach var="tagList" items="${tag}" >
				<c:if test="${status.count eq 1 || (status.count-1) % 4 eq 0}">      
			        <tr >      
			    </c:if> 
					<td >
						<label> 
							<input type="checkbox" name="tagsId" value="<c:out value="${tagList.key}"/>"
							    <c:forEach var="tagsId" items="${knowledgeBaseForm.tagsId}">
									<c:if test="${tagsId eq tagList.key}">checked</c:if>  
								</c:forEach> /> 
							<c:out value="${tagList.value}"/>   		
						</label>
					</td>
			    <c:if test="${status.count % 4 eq 0 || status.count eq 4}">      
			        </tr>      
			    </c:if>  
		    </c:forEach>
	    </c:forEach>
    </tr>
	</table>
</td>

JSTL核心标签库中c:forEach 的 varStatus属性

varStatus属性类型：String 描述：循环的状态信息，可以取值index\count\first\last\current 不可以使用EL表达式

我们常使用<c:forEach>标签来遍历需要的数据，为了方便使用，varStatus属性可以方便我们实现一些与行数相关的功能，如：奇数行、偶数行差异；最后一行特殊处理等等。

count：当前这次迭代从 1 开始的迭代计数

竹叶戏雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的积累

1，重置功能<head><script type="text/JavaScript"> //清空查询条件 function clearQueryCondition(){ //设置所有的input标签且typy为text的内容为空 $("input[type=text]").val(""); //设置所有...
复制链接

扫一扫

专栏目录