master

分支 (1)

管理

管理

master

layui_modules
/
number_input.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字输入框</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-lg12">
                    <h3>安装代码</h3>
                </div>
                <div class="layui-col-lg4">
                    <pre class="layui-code" lay-title="JavaScript">
layui.config({
    base:'/js/layui_modules/'
}).extend({
    numberInput:'numberInput/numberInput'
});
                    </pre>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-lg12">
                    <h3>使用方法一</h3>
                </div>
                <div class="layui-col-lg4">
                    <input type="text" class="layui-input" number-input>
                    <p class="layui-word-aux">加上<b>lay-ignore</b>将被忽略</p>
                </div>
                <div class="layui-col-lg12">
                    <h3>代码示例</h3>
                </div>
                <div class="layui-col-lg4">
                    <pre class="layui-code" lay-title="JavaScript">
layui.use('numberInput',function () {
    var numberInput = layui.numberInput;
    numberInput.render();
});
                    </pre>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-lg12">
                    <h3>设置数字限制</h3>
                </div>
                <div class="layui-col-lg4">
                    <input type="text" class="layui-input" number-input min="0" max="3" value="0">
                </div>
                <div class="layui-col-lg12">
                    <h3>代码示例</h3>
                </div>
                <div class="layui-col-lg4">
                    <pre class="layui-code" lay-title="HTML" lay-encode="true">
<input type="text" class="layui-input" number-input min="0" max="3" value="0">
                    </pre>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-lg12">
                    <h3>设置增加步长</h3>
                </div>
                <div class="layui-col-lg4">
                    <input type="text" class="layui-input" number-input step="0.01" value="0.01" autocomplete="off">
                </div>
                <div class="layui-col-lg12">
                    <h3>代码示例</h3>
                </div>
                <div class="layui-col-lg4">
                    <pre class="layui-code" lay-title="HTML" lay-encode="true">
<input type="text" class="layui-input" number-input step="0.01" value="0.01">
                    </pre>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-lg12">
                    <h3>渲染指定元素</h3>
                </div>
                <div class="layui-col-lg4">
                    <input type="text" class="layui-input" id="example_input" autocomplete="off">
                </div>
                <div class="layui-col-lg12">
                    <h3>代码示例</h3>
                </div>
                <div class="layui-col-lg4">
                    <pre class="layui-code" lay-title="JavaScript">
layui.use('numberInput',function () {
    var numberInput = layui.numberInput;
    numberInput.render({
       elem:'#example_input'
    });
});
                    </pre>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
    <script src="/js/layui/layui.js"></script>
    <script>
        layui.config({
            base:'/js/layui_modules/'
        }).extend({
            numberInput:'numberInput/numberInput'
        });
        layui.use('numberInput',function () {
            var numberInput = layui.numberInput;
            numberInput.render();
            numberInput.render({
               elem:'#example_input'
            });
        });
        layui.code();
    </script>
</html>