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/>

换行标签