这些天练习UI组件的编写，顺便模仿一个h5版本的pre标签收缩展开的效果组件：

兼容ie8、9，谷歌，火狐；

图片效果如下：

demo.html代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="js/cnExpandPanel/cnExpandPanel.css" rel="stylesheet"/>

    <style>

        /*可以更改这两个参数来调整内容高度以及放大后的最小高度*/

        .banner-expand{

            height:200px;
            min-height:200px;
        }
        .banner-expand.on {

            min-height:200px;

        }

        /*可以设置内容宽度，以及其他css样式*/

        .banner{

            width:500px;

        }

    </style>

</head>

<body style="background-color:#6C6B6B;margin:0;padding:0">

<div class="banner">

     <pre class="banner-expand">

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,

ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,

ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,

onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,

onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,

ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,

ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,

onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,

onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,

ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,

ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,

onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,

onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,

ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,

ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,

onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,

onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,

ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,

ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,

onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,

onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,

ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,

ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,

onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,

onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

     </pre>

    <div class="banner-footer J_BannerFooter">

        <i class="icon-chevron-down icon-white J_ExpandDown i-show"></i>

        <i class="icon-chevron-up icon-white J_ExpandUp i-hid"></i>

    </div>

</div>

<script src="js/jquery-1.8.3.min.js"></script>

<script src="js/cnExpandPanel/cnExpandPanel.js"></script>

<script>

    cnExpandPanel.initDom();

</script>

</body>

</html>

cnExpandPanel.css代码：

/* 该组件依赖于bootstrap2的图标，如果引用了bootstrap2的css文件，则该段css可以删掉 start */

.icon-chevron-down {

    background-position: -313px -119px;

}

.icon-chevron-up {

    background-position: -288px -120px;

}

.icon-white{

    width: 14px;

    height: 14px;

    margin-top: 1px;

    *margin-right: .3em;

    line-height: 14px;

    vertical-align: text-top;

    background-image: url("img/glyphicons-halflings-white.png");

    background-repeat: no-repeat;

}

/* 该组件依赖于bootstrap2的图标，如果引用了bootstrap2的css文件，则该段css可以删掉 end */

.banner {

    position: relative;

}

.banner-expand {

    white-space: pre;

    white-space: pre-wrap;       /* css-3 */

    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */

    word-wrap: break-word;       /* Internet Explorer 5.5+ */

    display: block;

    margin: 0 0 10px;

    line-height: 1.42857143;

    word-break: break-all;

    background: rgba(0,0,0,0.17);

    border:0 #2b2b2b;

    border-radius:;

    color: #5ca258;

    font-family: Monaco,Consolas,"Lucida Console",monospace;

    font-size: 12px;

    min-height: 100px;

    padding: 10px 20px;

    transition: height .2s ease;

    box-shadow: inset 0 0 1px rgba(0,0,0,0.71);

    height: 200px;

    overflow: hidden;

    position: relative;

}

.banner-expand.on {

    overflow: visible;

    height:auto;

    min-height:200px;

}

.banner-footer{

    bottom:;

    text-align:center;

    background-color: #1d1d1d;

    background: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 90%,rgba(0,0,0,0.65) 100%);

    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(90%,rgba(0,0,0,0.59)),color-stop(100%,rgba(0,0,0,0.65)));

    background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 90%,rgba(0,0,0,0.65) 100%);

    background: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 90%,rgba(0,0,0,0.65) 100%);

    background: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 90%,rgba(0,0,0,0.65) 100%);

    background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 90%,rgba(0,0,0,0.65) 100%);

    filter:alpha(opacity=0,finishOpacity=80,style=1,startx=0,startY=0,finishx=0,finishY=150);

    -ms-filter:alpha(opacity=0,finishOpacity=80,style=1,startx=0,startY=0,finishx=0,finishY=150);

    cursor: pointer;

    position:absolute;

    width:100%;

}

.banner-footer:hover{

    background: rgba(0,0,0,0.74);

    filter:none;

    -ms-filter:none;

}

.i-show{

    display:inline-block;

}

.i-hid{

    display:none;

}

cnExpandPanel.js代码：

/**

 * Created by rise_horizon on 2015/4/3.

 * 依赖于jquery语法

 */

var cnExpandPanel = (function($){

    function _troggleDom($this) {

        var $J_ExpandUp = $this.find(".J_ExpandUp");

        var $J_ExpandDown = $this.find(".J_ExpandDown");

        if($J_ExpandDown.css("display") != "none") {

            _collapseDom($J_ExpandUp, $J_ExpandDown, $this);

        } else {

            _expandDom($J_ExpandUp, $J_ExpandDown, $this);

        }

    }

    function _collapseDom($J_ExpandUp, $J_ExpandDown, $this) {

        $this.siblings("pre").addClass("on");

        $J_ExpandUp.removeClass("i-hid");

        $J_ExpandUp.addClass("i-show");

        $J_ExpandDown.removeClass("i-show");

        $J_ExpandDown.addClass("i-hid");

    }

    function _expandDom($J_ExpandUp, $J_ExpandDown, $this) {

        $this.siblings("pre").removeClass("on");

        $J_ExpandDown.removeClass("i-hid");

        $J_ExpandDown.addClass("i-show");

        $J_ExpandUp.removeClass("i-show");

        $J_ExpandUp.addClass("i-hid");

    }

    function initDom() {

        $(".J_BannerFooter").on("click",function(){

            var $this = $(this);

            _troggleDom($this);

        });

    }

    return {initDom : initDom}

})(jQuery);

代码都在这里了，两张img图片是bootstrap2里的，可以自行找到，也可下载上传到csdn网站的实例，地址是http://download.csdn.net/detail/tv151579/8576589

创建一个pre标签展开折叠的UI组件（原创）的更多相关文章

  1. new Option() 创建一个option标签

    //add() 方法用于向 <select> 添加一个 <option> 元素. //new Option() 创建一个option标签 school.add(new Opti ...

  2. js如何动态创建一个新的标签

    var DS; DS = CallIVRAjaxClass.GetBranchCallCount().value; var obj = {}; obj.branch = "_branch&q ...

  3. 聊一聊HTML <pre>标签

    聊一聊HTML <pre>标签 我们经常会在要保持文本格式的时候使用pre标签,比如当我们要展示源代码的时候,只要放一个pre标签,然后把源代码直接复制,粘贴,然后在页面上就可以保持好格式 ...

  4. HTML中pre标签的用法

    我们经常会在要保持文本格式的时候使用pre标签,比如当我们要展示源代码的时候,只要放一个pre标签,然后把源代码直接复制,粘贴,然后在页面上就可以保持好格式.不会像放在其它标签里那样,把换行和空格都自 ...

  5. 用Backbone.js创建一个联系人管理系统(五)

    原文: Build a Contacts Manager Using Backbone.js: Part 5 这是这系列教程最后一部分了. 之前所有的增删改都在前端完成. 这部分我们要把Contact ...

  6. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  7. [转载]前端——实用UI组件库

    https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...

  8. 强烈推荐优秀的Vue UI组件库

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

  9. ui组件库

    基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Frameworkhttps:/ ...

随机推荐

  1. CF17E Palisection 差分+manacher算法

    题目大意: 给定一个串$S$,询问有多少对相交的回文子串 直接做的办法: 我们先考虑求出以$i$为结尾的串的数量,这个很好统计 之后,我们再求出所有包含了点$i$的回文串的数目 这个相当于在$i$的左 ...

  2. [BZOJ4237]稻草人/[JOISC2014]かかし

    [BZOJ4237]稻草人/[JOISC2014]かかし 题目大意: 平面上\(n(n\le2\times10^5)\)个点,若一个矩形各边与坐标轴平行,左下角和右上角都在\(n\)个点之中,且内部不 ...

  3. hdu 4531 bfs（略难）

    题目链接:点我 第一次不太清楚怎么判重,现在懂了,等下次再做 /* *HDU 4531 *BFS *注意判重 */ #include <stdio.h> #include <stri ...

  4. spring boot2集成ES详解

    一:运行环境 JDK:1.8 ES:5.6.4 二:学习内容 如何构建spring-data-elasticsearch环境? 如何实现常用的增删改查? 如何实现对象嵌套也就是1对多这种关系? 三:J ...

  5. bzoj 4627: [BeiJing2016]回转寿司 -- 权值线段树

    4627: [BeiJing2016]回转寿司 Time Limit: 10 Sec  Memory Limit: 256 MB Description 酷爱日料的小Z经常光顾学校东门外的回转寿司店. ...

  6. URAL 1873. GOV Chronicles

    唔 神题一道 大家感受一下 1873. GOV Chronicles Time limit: 0.5 secondMemory limit: 64 MB A chilly autumn night. ...

  7. GIT(6)----fork和clone的区别，fetch与pull的区别

    参考资料: [1].Git学习笔记:fork和clone的区别,fetch与pull的区别 [2].在Github和Git上fork之简单指南

  8. 编写简单登陆和注册功能的demo时遇到的问题

    一.注册功能中添加数据不成功 给数据库添加EditText中的内容后,数据库中找不到添加后的数据,并且存在字符串为空的数据 解决方法:EditText registerAccount = (EditT ...

  9. [Database] Redis 随笔

    Redis 随笔 1. 特点 非关系数据库 non-relational database 内存数据库 高性能 主从复制 可持久化存储 发布与订阅 支持脚本 2. 数据类型5种 STRING 可以是字 ...

  10. HDU 4718 The LCIS on the Tree （动态树LCT）

    The LCIS on the Tree Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Oth ...