HTML + JS 总结_html+js结论-优快云博客

本文链接：https://blog.youkuaiyun.com/u010374380/article/details/89227780

本文深入探讨了Freemarker模板引擎的使用技巧，包括页面引入、开关toggle组件、提示信息展示、输入限制、数据回显及单选框默认值设置等关键特性。同时，文章还介绍了如何利用Freemarker进行时间控件的配置，为开发者提供了全面的指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
            });
    }