欧美午夜精品一区二区蜜桃,freewebvideo性欧美,国产精品久久久一区二区

首頁 > 博客列表 > layui框架表單開關(guān)彈出詢問框

博主信息

博文 64

粉絲 2

評論 3

訪問量 88689

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

最新下載

更多>

網(wǎng)站特效

網(wǎng)站源碼

網(wǎng)站素材

前端模板

layui框架表單開關(guān)彈出詢問框

清雨的博客

原創(chuàng)

1619人瀏覽過

layui 框架表單提交開關(guān)詢問框

index頁面

首頁沒有任何重點，主要是引用layui框架css以及js,其中采用layui的手風(fēng)琴樣式來實現(xiàn)左側(cè)菜單，

左側(cè)菜單注意問題

在div中加入 lay-accordion用于實現(xiàn)點擊對應(yīng)的折疊面板，將關(guān)閉其他的折疊面板；
加入layui-show將為實現(xiàn)默認打開，去除打開為折疊；其中如果在折疊面板的父級DIV加入lay-accordion，相同會實現(xiàn)，點擊對應(yīng)的面板，將關(guān)閉其他面板；
折疊樣式在layui中，采用js加載方式，并且使用element 按需加載；

內(nèi)容區(qū)域：

內(nèi)容區(qū)域主要采用iframe 其注意內(nèi)容

iframe 用于載入頁面，其可以設(shè)置，去除邊框；去除右側(cè)滾動條及下方滾動條：分別為：

frameborder=0 為無邊框1位有邊框；
scrolling : 滾動條，其中參數(shù)有 auto(需要時出現(xiàn)滾動條)yes（始終顯示滾動條）no（始終隱藏滾動條）

iframe 在設(shè)置時盡量使用寬度以及高度 100%；控制其大小在父級div中控制寬度及高度；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layui</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
<!--頭部-->
<div style="height: 50px;line-height: 50px;background-color: #0C0C0C;padding: 0 10px">
    <div style="color: #fff;float: left">
        <span>layuiAdmin</span>
    </div>
    <div style="color: #fff;float: right">
        <span style="margin-right: 10px"><i class="layui-icon layui-icon-username" style="margin-right: 5px"></i>admin</span>
        <span><a style="color: #fff" href="">退出</a></span>
    </div>
</div>
<!--頭部結(jié)束-->
<!--右側(cè)菜單-->
<div style="width: 10%;float: left">
    <div class="layui-collapse" lay-accordion>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">用戶管理</h2>
            <div class="layui-colla-content">內(nèi)容區(qū)域</div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">管理員管理</h2>
            <div class="layui-colla-content">內(nèi)容區(qū)域</div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">分類管理</h2>
            <div class="layui-colla-content">內(nèi)容區(qū)域</div>
        </div>
    </div>
</div>
<!--右側(cè)菜單結(jié)束-->
<!--左側(cè)內(nèi)容區(qū)域-->
<div style="width: 90%;height: 820px;float: left">
    <iframe style="width: 100%;height: 100%" src="cont.html" frameborder="0"></iframe>
</div>
<!--左側(cè)內(nèi)容區(qū)域結(jié)束-->

<script>
    //注意：折疊面板 依賴 element 模塊，否則無法進行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
</script>
</body>
</html>

cont頁面，終點在于開關(guān)，判斷是否為開啟或則為禁用狀態(tài)，并且彈出詢問框；

開關(guān)采用checkbox來實現(xiàn)其中調(diào)用layui定義好的lay-skin="switch" 其中在js部分實現(xiàn)監(jiān)聽switch來實現(xiàn)判斷是否為true或false

監(jiān)聽switch 判斷是否為true或false
if判斷如果為true將彈出詢問框是否啟用，取消將返回不變，點擊啟用將設(shè)置為false；
如果為false將彈出詢問框是否禁用，取消將返回不變，點擊禁用將設(shè)置為true；

select 做了關(guān)聯(lián)互動，其采用js select 監(jiān)聽，主要監(jiān)聽value值，在后期做后端后，通過監(jiān)聽獲取value,json發(fā)送后臺查詢并且反饋前端顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script type="text/javascript" src="./layui/layui.js"></script>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-header">用戶注冊</div>
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用戶名</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="username">
                </div>
                <div class="layui-form-mid layui-word-aux">作為用戶唯一登錄名</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">昵稱</label>
                <div class="layui-input-inline">
                    <input type="password" class="layui-input" name="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                    <select name="province" lay-filter="test">
                        <option value="">請選擇城市</option>
                        <option value="0">山西省</option>
                        <option value="1">上海</option>
                        <option value="2">廣州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </div>
                <div class="layui-input-inline" name="city">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性別</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="1" title="男">
                    <input type="radio" name="sex" value="2" title="女" checked>
                    <input type="radio" name="sex" value="0" title="保密">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">興趣愛好</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="like[music]" title="音樂">
                    <input type="checkbox" name="like[sports]" title="體育" checked>
                    <input type="checkbox" name="like[swimming]" title="游泳" checked>
                    <input type="checkbox" name="like[football]" title="足球">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否啟用</label>
                <div class="layui-input-inline">
                    <input type="checkbox" lay-filter="test1" lay-text="啟用|禁用" name="switch" lay-skin="switch">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文本域</label>
                <div class="layui-input-block" style="width: 400px">
                    <textarea name="desc" placeholder="請輸入內(nèi)容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

</div>
<script type="text/javascript">
    layui.use(['form'],function () {
        form = layui.form;
        $ = layui.jquery;
        form.on('select(test)', function(data){
            console.log(data.value); //得到被選中的值
            if (data.value==0){
                //該處可以使用ajax 接口調(diào)用數(shù)據(jù)庫數(shù)控
                var citys = ['太原市','朔州市','大同市','陽泉市'];
                //向html中插入select
                var html = '<select>';
                $.each(citys,function (i,v) {
                    html+=('<option>'+v+'</option>');
                });
                html += '</select>';
                $('div[name="city"]').html(html);
                form.render();
            }
        });

        form.on('switch(test1)', function(data){

            console.log(data.elem.checked); //開關(guān)是否開啟，true或者false
            //詢問框判斷是否開啟
            if (data.elem.checked==true){
                layer.confirm('您確定要啟用？', {
                    btn: ['啟用','取消'] //按鈕
                }, function(){
                    layer.msg('啟用成功', {icon: 1});
                }, function(){
                    $(data.elem).prop('checked',false)
                    form.render();
                });
            }else {
                layer.confirm('您確定要禁用？', {
                    btn: ['禁用','取消'] //按鈕
                }, function(){
                    layer.msg('禁用成功', {icon: 1});
                }, function(){
                    $(data.elem).prop('checked',true)
                    form.render();
                });
            }
        });

    });
</script>
</body>
</html>

layui 框架其中封裝的方法幾乎在日常開發(fā)中已經(jīng)基本夠用，其中可能涉及到特殊需求需要自己編寫，一般情況采用layui即可實現(xiàn)；

在后端級前端開發(fā)中，重點主要在與js 因為涉及到需要與后端進行交互，html無法實現(xiàn)將采用js,其中如表單驗證；

提示框、詢問框，都會涉及到j(luò)s,layui中已經(jīng)將常用方法進行封裝，在更具需要編寫對應(yīng)代碼方可實現(xiàn)；

如上代碼中詢問框。

首先實現(xiàn)詢問框彈出；
在進行if判斷，判斷如果為true將實現(xiàn)對應(yīng)提示，否則將執(zhí)行什么；

批改老師：

天蓬老師

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

一幅圖搞清楚PHP中empty、isset和is_null的區(qū)別

2018-03-16 18:19:02

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱