ui-choose实现列表标签勾选多选效果代码-html代码-BFW代码库

ui-choose实现列表标签勾选多选效果代码

代码语言：html

所属分类：其他

代码描述：ui-choose实现列表标签勾选多选效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/ui-choose.css">
    <style>
        .demo-box {
            margin: 40px auto;
            width: 600px;
            padding: 20px;
          
        }
        
        .demo-table {
            border-collapse: collapse;
            width: 100%;
        }
        
        .demo-table caption {
            border-bottom: 1px dashed #ccc;
            height: 40px;
            margin-bottom: 20px;
            font: 18px/1.2 normal 'microsoft yahei';
        }
        
        .demo-table tr td {
            padding: 8px 10px;
            font: 16px/1.8 normal 'microsoft yahei';
            vertical-align: top;
        }
        
        .ui-input {
            vertical-align: top;
            height: 18px;
            font-size: 16px;
            line-height: 20px;
            border: 1px solid #aaa;
            padding: 6px 8px;
            border-radius: 3px;
        }
        
        
    </style>
</head>

<body>
    <article class="htmleaf-container">

        <div class="demo-box">
            <table class="demo-table">
                <caption>选择插件演示</caption>
                <tr>
                    <td style="width:120px;">
                        <label>普通(ul)</label>
                    </td>
                    <td>
                        <ul class="ui-choose" id="uc_01">
                            <li>html</li>
                            <li>css</li>
                            <li>javascript</li>
                            <li>php</li>
                            <li>nodejs</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>普通(select)</label>
                    </td>
                    <td>
                        <select class="ui-choose" id="uc_02">
	                        <option value="a">html</option>
	                        <option value="b">php</option>
	                        <option value="c">css</option>
	                        <option value="d">javascript</option>
	                        <option value="e">nodejs</option>
	                    </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>多选(ul)</label>
                    </td>.........完整代码请登录后点击上方下载按钮下载查看