java 页面html常用写法总结

​(注意:本文章默认base html中已经引入bootstrap.min.css、style.css等css样式)

input :输入标签

<#input required="必填"  id="cycle" name="周期" underline="true" style="width:75%" itype="int" placeholder="最多输入100个字" maxlength="35" clickFun="xxxxx()" readonly="readonly" disabled="disabled" hintWord="注意“ chgId="cycleDiv"/>

required:是否必填
name:页面展示文字
underline:下划线
style:样式(可选择多种)
itype:数据类型
placeholder:备注
maxlength:最大长度
clickFun/changeFun:点击方法/改变值方法
readonly:只读
disabled:不可变
hintWord:红字提醒
chgId:div标签

input标签还能设置多选框:

<div class="col-sm-9" style="padding-top: 5px;">
     <input type="hidden" name="scenes" id="scenes">
     <input name="scene" type="checkbox" value="0"/>&nbsp;首页&nbsp;&nbsp;&nbsp;&nbsp;
     <input name="scene" type="checkbox" value="1"/>&nbsp;福利&nbsp;&nbsp;&nbsp;&nbsp;
     <input name="scene" type="checkbox" value="2"/>&nbsp;个人中心&nbsp;&nbsp;&nbsp;&nbsp;
</div>

scene:是单个选项的属性值,scenes是为了保存所有的选项值

<input type="hidden" id="fileName" name="fileName" value="文件名">

type=“hidden”:input的隐藏域,此input标签不会在页面展示,但是可以将页面id="fileName"中的value属性值,即代码中的 “文件名” 值传到相应的js页面

textarea :文本域标签

<#textarea id="remark" name="备注:" maxlength="500" />

inputTime :时间格式

<#inputTime id="beginTime" name="开始时间:" required="必填" isTime="true" pattern="YYYY-MM-DD hh:mm:ss"/>

radio :单选标签

<#radio id="jumpType" name="跳转类型"  required="必填" arr="活动,充值页,个人中心" arrValue="0,1,2" changeFun="xxxxxxx()" underline="true" disabled="disabled" hintWord="注意"/>

arr:页面展示每个选项的文字
arrValue:页面文字对应的属性值
clickFun/changeFun:点击后执行方法

select :下拉单选框
此标签有两种写法:
第一种:所有选项在页面定义:

<#select id="status" name="状态:" required="必填" underline="true" readonly="readonly" disabled="disabled" changeFun="xxxxxxxx()">
     <option value="1">有效 </option>
     <option value="0">无效 </option>
 </#select>

第二种:所有选项在后端传入:

 <#select id="status" name="状态:" required="必填" changeFun="xxxxxxx()">
       @for(slt in sltArr){
          <option value="${slt.status}"> ${slt.name}</option>
       @}
</#select>

后端将选项放入list中,如果后端带有model对象,可以放入model对象中

model.addAttribute("sltArr", StatusEnum.values());

如果后端没有model对象,可以放入自定义对象中

setAttr("sltArr", StatusEnum.values());

另外,我们可以在option标签中,自定义一些属性传入js页面

<div id="productDiv">
     <#select id="product" name="商品:" required="必填" changeFun="xxxxxxxx()">
         @if(isNotEmpty(productConfArray)){
             @for(item in productConfArray){
                  <option value="${item.product}" cycleUnit="${item.cycleUnit}" cycleValue="${item.cycleValue}" price="${item.price}">${item.productId}</option>
              @}
         @}
     </#select>             
</div>

在相应的js页面中,获取相应的option标签,即可以通过attr方法,获取自定义标签的属性值,
附:js页面获取方法

var conf = $("#productId option:selected");
var cycleUnit = conf.attr("cycleUnit");
var cycleValue = conf.attr("cycleValue");
var price = conf.attr("price");

button标签

<#button btnCss="info" name="增加" icon="fa-plus" clickFun="xxxxxxx()"/>

icon:图标
btnCss:btn样式


其他涉及页面样式的标签,大致说一下:

div 标签

<div style="margin:0;padding:0; width:100%;height:2px;background-color:#cccccc;overflow:hidden;"></div>

style:样式,包括width宽、height高、background背景色

<div class="row">
    <div class="col-sm-6 b-r">
    </div>
    <div class="col-sm-6">
    </div>
 </div>

row行
col-sm-6 此div占小屏幕的6列 即1/2row,b-r竖线
*上面的代码将屏幕左右二等分,中间用竖线隔开

form、label 、span 标签

<div class="form-group">
     <label class="col-sm-3 control-label">
           <span class="require-input" style="color:#F06D6F;"></span>
                字体
     </label>
     <div class="col-sm-9">
	     <select id="font" name="font" class="form-control">
	          <option value="">请选择</option>
	          <option value="1">楷体</option>
	          <option value="2">宋体</option>
	     </select>
    </div>
</div>

hr标签

<hr/>

换行标签

你可能感兴趣的:(JAVA,html,java,html,开发语言)