HTML + JS 總結

1、引入頁面

<!-- 引用處 -->
<#include "/html/menu/newRank.html"/>
<@sideMenu 'collection'/>

<!-- 頁面 /html/menu/newRank.html -->
<#macro sideMenu menu>
    <div class="sideMenu">
        <ul class="menu">
            <li> ... </li>
            <li data-menutag="collection" class="<#if menu== 'collection'>current</#if>">
                <a href="/newrank/collection/select?activityId=${activity.activityId?c}">作品徵集</a>
            </li>
        </ul>
    </div>
</#macro>

 2、開關 toggle

<div class="entryformHasOpen" style="height: 70px;border: 1px solid #EFEFEF;padding: 20px 0;margin: -21px 0 20px;">
     <div class="name">是否允許上傳作品：</div>
     <div class="cont">
         <div class="toggle toggle-light" data-toggle-on="${(collection.iscollect)!0}" data-toggle-width="65" data-toggle-height="28"></div>
    </div>
</div>

<!-- js -->
   // 是否上下線開關
   function toToggle(obj) {
        $(obj).toggles({
            text: { on: "是", off: "否" }
        });
        $(obj).on('toggle', function(e, active) {
            if (active) {
                $('#isOpen').val(1)
                $('#rankOpenConfirm').show();
                $('#rankOpenConfirm #msg').text('確認要...嗎？');
            } else {
                $('#isOpen').val(0)
                $('#rankOpenConfirm').show();
                $('#rankOpenConfirm #msg').text('確認要...嗎？');
            }
        });
    }

 3、提示信息

<#if message??>
    <div class="frow">
        <p style="color: red;">注意: ${message}</p>
    </div>
</#if>

4、默認值、readonly、disabled

<input type="text" name="starttime" id="startTime" readonly class="input width200" value="${(collection.starttime)!(activity.startTime)}" placeholder="請選擇徵集開始時間" <#if isStart?? && isStart == '1'>disabled</#if>/>

5、只能輸入正整數

<input type='text' onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" />

 6、回顯

<!-- 值不爲空，且大於0時，顯示，格式?c;否則，placehold爲不限 -->
<input type='text' <#if (collection.textmin)?? && collection.textmin &gt; 0>value="${collection.textmin?c}"</#if> placeholder="不限" />

7、單選框的默認值 

<div class="frow">
    <div class="alt">* 作品展示：</div>
    <div class="con">
        <label class="radio-inline">
            <input type="radio" name="isshow" value="0" <#if !(collection.isshow)?? || collection.isshow = "0">checked</#if>> 關閉
        </label>
        <label class="radio-inline">
            <input type="radio" name="isshow" value="1" <#if (collection.isshow)?? && collection.isshow = "1">checked</#if>> 開啓
        </label>
    </div>
</div>

8、時間控件

    var daterangeConfig = {
        singleDatePicker: true,
        autoUpdateInput: false,
        timePickerIncrement: 1,
        timePickerSeconds: false,
        locale: {
            format: 'YYYY-MM-DD HH:mm:ss',
            cancelLabel: '清除'
        }
    };
    // 活動開始時間
    setStartTime('${activity.startTime}', '${activity.endTime}');
    function setStartTime(minDate, maxDate) {
        daterangeConfig.minDate = minDate;
        daterangeConfig.maxDate = maxDate;
        $('#startTime').daterangepicker(daterangeConfig)
            .on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm:ss'));
                $('#endTime').removeAttr('disabled');
            })
            .on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
                $('#endTime').val('');
                $('#endTime').attr('disabled', true);
            });
    }