这些天练习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. Codeforces 1090J $kmp+hash+$二分

    题意 给出两个字符串\(s\)和\(t\),设\(S\)为\(s\)的任意一个非空前缀,\(T\)为\(t\)的任意一个非空前缀,问\(S+T\)有多少种不同的可能. Solution 看了一圈,感觉 ...

  2. 20162307 课堂测试 hash

    20162307 课堂测试 hash 作业要求 利用除留余数法为下列关键字集合的存储设计hash函数,并画出分别用开放寻址法和拉链法解决冲突得到的空间存储状态(散列因子取0.75) 关键字集合:85, ...

  3. 王彪-20162321-Java程序设计与数据结构2nd-第十周学习总结

    学习目标 讨论有向图和无向图 定义带权图并讨论它们的应用 定义图的广度优先遍历和深度优先遍历 定义最小生成树 讨论图的实现策略 书中图的基本定义 图是由结点及结点间的连接组成的,结点称为顶点,结点间的 ...

  4. Windows 安装 Jenkins 2.6

    最近都是Windows下干活啊... 一.下载和安装 官网地址:https://jenkins.io/index.html,选择了2.X系列的Windows版本,自动在浏览器下载到了jenkins-2 ...

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

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

  6. 移动web开发经验总结(1)

    1.<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-sca ...

  7. Bootstrap_CSS概览

    在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 H ...

  8. Ubuntu16.04配置Android5.0编译环境

    1.安装jdk7 Ubuntu16.04的安装源已经默认没有openjdk7了,所以要自己手动添加仓库,如下: $ sudo add-apt-repository ppa:openjdk-r/ppa ...

  9. ThinkPHP中I('post.')与create()方法的对比

    简要归纳: 1.二者都可用来接收post表单提交的数据. 2.I('post.')方法可直接接收赋值给变量如$post=I('post.'),create()方法源于父类模型封装,需先实例化父类模型, ...

  10. javascript小记-作用域

    一.全局作用域 全局作用域的变量不论在什么时候都可以直接引用,而不必通过全局对象:满足以下条件的变量属于全局作用域:1.在最外层定义的变量2.全局对象的属性3.任何地方隐式定义的变量(未定义直接赋值的 ...