实用的 html 前端组件源代码总结

最新推荐文章于 2024-02-07 10:05:00 发布

antony9118

最新推荐文章于 2024-02-07 10:05:00 发布

阅读量3.2k

点赞数 4

分类专栏： js 文章标签： html bootstrap 前端

本文链接：https://blog.csdn.net/antony9118/article/details/52213956

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这次被拉过去临时做前端，遇到了一些不错的常用组件，在这篇博客中整理一下，会持续更新。（提前声明，本文中所有的例子都引入了bootstrap框架）

1 图片铺满整个网页背景

这次我帮忙做的页面没有复杂的组件，做完之后觉得整个网页光秃秃的，后来就想加入虚化的城市图片作为网页背景，效果如下：

这里写图片描述

背景的填充实现代码如下：

<body background="img\city_bg.jpg"
style=" background-repeat:no-repeat ;
background-size:cover;
background-attachment: fixed;"
>

2 下拉选择框

这里还顺便给下拉选择框加入了关键字搜索的功能，效果如下：

这里写图片描述

实现代码：

<div class="form-group">
    <div class="col-md-5">
        <!--没有下面这一步，下拉选择框可能会右移，视具体情况而定-->
           <style>
           .col-md-5{
        padding-left:0;
        }
       </style>
           <label class="form-label">所属主题</label>
       <script type="text/javascript">  
                           $(window).on('load', function () {  

                           $('.selectpicker').selectpicker({  
                             'selectedText': 'cat'  
                             });  

                           // $('.selectpicker').selectpicker('hide');  
                          });  
                       </script>  
               <div class="container">  
                  <form class="form-horizontal" role="form">  
                     <div class="form-group">  
                      <div class="col-md-5">  
                        <select id="bs3Select" class="selectpicker show-tick form-control" multiple data-live-search="true">  
                            <option>java</option>  
                            <option>C#</option>
                            <option>python</option>  
                        </select>  
                      </div>  
                     </div>  
                  <form>  
              </div> 
                    </div>

3 步骤进度条

有个页面里面要求按照步骤上传软件，一个步骤进度条可以清晰地显示现在到了哪一步，接下来还有几步等等，效果如下：

第一步：
这里写图片描述

第二步：
这里写图片描述

第三步：
这里写图片描述

源代码如下：

用到的图片 stepbar.png
这里写图片描述
首先在css文件夹里新建一个文件 flow_steps.css，源代码如下：

.flow_steps ul li { float:left; height:23px; padding:0 40px 0 30px; line-height:23px; text-align:center; background:url(../img/stepbar.png) no-repeat 100% 0 #E4E4E4; font-weight:bold;}
.flow_steps ul li.done { background-position:100% -46px; background-color:#FFEDA2;}
.flow_steps ul li.current_prev { background-position:100% -23px; background-color:#FFEDA2;}
.flow_steps ul li.current { background-color:#FFEDA2;}
.flow_steps ul li.last { background-image:none;} 
.flow_steps ul li.lastcurrent { background-image:none;background-color:#FFEDA2;}

之所以列成上面这样，是为了说明如果我们需要六步甚至七步，都可以在css文件中进行调整。本例中实际上只用到了四种状态：done, current, last, lastcurrent。下面给出html文件中每一步的源代码：
引入css文件：

<link rel="stylesheet" href="css/stepbar.css" />

第一步：

<div class="flow_steps">
    <ul>
       <li class="current">软件版本</li>
       <li>主题分类</li>
       <li class="last">软件上传</li>
    </ul>
</div>

第二步：

<div class="flow_steps">
     <ul>
        <li class="done">软件版本</li>
        <li class="current">主题分类</li>
        <li class="last">软件上传</li>
     </ul>
</div>

第三步：

<div class="flow_steps">
      <ul>
         <li class="done">软件版本</li>
         <li class="done">主题分类</li>
         <li class="lastcurrent">软件上传</li>
      </ul>
</div>

4 点击“添加”多出一栏或者“删除“减少一栏

实在是想不到什么言简意赅的名字了。。。。下面说一下使用需求：

这里写图片描述

在平台中需要上传软件和附加文档，第一栏中上传软件和相应的平台（input=”text”)，第二栏中上传文档。我们经常会遇到的情况是，不止想上传一款软件，或者不止想上传一个附加文档，而是想根据具体需求上传多个。另外，软件和附加文档的添加与删除也应该互相独立，效果如下：

点击“继续添加软件”
点击“继续添加文档”

如果误点“添加”，点击对应行的“删除”就可以。

主要难点在于：

软件和文档的继续添加与删除是相互独立的；
动态添加和删除

下面上源代码：
html源代码如下

<div class="form-group">
    <!--<input type="button" id="btn_addtr" value="继续添加">-->
    <button class="smallbtn" id="btn_addtr">继续添加软件</button>
    <div style="height: 12px;"></div>

    <table id="dynamicTable0" width="400" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td height="30" align="center" bgcolor="#CCCCCC">平台（源代码/windows/linux)</td>
            <td align="center" bgcolor="#CCCCCC">软件上传</td>
            <td></td>
        </tr>
        <tr>
            <!--<td height="30" align="center"><input type="text" size="2" value="1" /></td>-->
            <td align="center"><input type="text"></td>
            <td align="center"><input type="file"></td>

            <td><input type="button" value="删除" onclick="deltr(this)" /></td>
        </tr>
    </table>
</div>

<div class="form-group">
    <button class="smallbtn" id="btn_addtr1">继续添加文档</button>
    <div style="height: 12px;"></div>
    <table id="dynamicTable1" width="400" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td height="30" align="center" bgcolor="#CCCCCC">上传文档</td>
            <td></td>
        </tr>
        <tr>
            <td align="center"><input type="file"></td>
            <td><input type="button" value="删除" onclick="deltr1(this)" /></td>
        </tr>
    </table>
</div>

js源代码如下：

<script type="text/javascript">
    $(function() {
        var show_count = 20;
        var count = $("input:text").val();
        var fin_count = 0;

        $("#btn_addtr").click(function() {
            fin_count = $("#dynamicTable0 tr").length - 1
            if(fin_count < show_count) {
                $("#dynamicTable0 tr:eq(1)").clone().appendTo("#dynamicTable0");
                //          $("tr:last td input:first").val(++count);
            }
        });
    });

    function deltr(obj) {
        var length = $("#dynamicTable0 tr").length;
        if(length <= 2) {
            alert("至少保留一行");
        } else {
            $(arguments[0]).parent().parent().remove();
        }
    }
</script>
//
<script type="text/javascript">
    $(function() {
        var show_count = 20;
        var count = $("input:text").val();
        var fin_count = 0;

        $("#btn_addtr1").click(function() {
            fin_count = $("#dynamicTable1 tr").length - 1
            if(fin_count < show_count) {
                $("#dynamicTable1 tr:eq(1)").clone().appendTo("#dynamicTable1");
                //          $("tr:last td input:first").val(++count);
            }
        });
    });

    function deltr1(obj) {
        var length = $("#dynamicTable1 tr").length;
        if(length <= 2) {
            alert("至少保留一行");
        } else {
            $(arguments[0]).parent().parent().remove();
        }
    }
</script>

antony9118

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
实用的 html 前端组件源代码总结

这次被拉过去临时做前端，遇到了一些不错的常用组件，在这篇博客中整理一下，会持续更新。（提前声明，本文中所有的例子都引入了bootstrap框架）1 图片铺满整个网页背景这次我帮忙做的页面没有复杂的组件，做完之后觉得整个网页光秃秃的，后来就想加入虚化的城市图片作为网页背景，效果如下：背景的填充实现代码如下：<body background="img\city_bg.jpg"style=" backg
复制链接

扫一扫