创建一个pre标签展开折叠的UI组件（原创）

这些天练习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组件（原创）的更多相关文章

new Option() 创建一个option标签
//add() 方法用于向 <select> 添加一个 <option> 元素. //new Option() 创建一个option标签 school.add(new Opti ...
js如何动态创建一个新的标签
var DS; DS = CallIVRAjaxClass.GetBranchCallCount().value; var obj = {}; obj.branch = "_branch&q ...
聊一聊HTML <pre>标签
聊一聊HTML <pre>标签我们经常会在要保持文本格式的时候使用pre标签,比如当我们要展示源代码的时候,只要放一个pre标签,然后把源代码直接复制,粘贴,然后在页面上就可以保持好格式 ...
HTML中pre标签的用法
我们经常会在要保持文本格式的时候使用pre标签,比如当我们要展示源代码的时候,只要放一个pre标签,然后把源代码直接复制,粘贴,然后在页面上就可以保持好格式.不会像放在其它标签里那样,把换行和空格都自 ...
用Backbone.js创建一个联系人管理系统(五)
原文: Build a Contacts Manager Using Backbone.js: Part 5 这是这系列教程最后一部分了. 之前所有的增删改都在前端完成. 这部分我们要把Contact ...
16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...
[转载]前端——实用UI组件库
https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件官网:https:/ ...
强烈推荐优秀的Vue UI组件库
Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...
ui组件库
基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Frameworkhttps:/ ...

随机推荐

BZOJ 4605 崂山白花蛇草水（权值线段树+KD树）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4605 [题目大意] 操作 1 x y k 表示在点(x,y)上放置k个物品, 操作 2 ...
【SPFA】POJ1860-Currency Exchange
[题目大意] 给出每两种货币之间交换的手续费和汇率,求出从当前货币s开始交换,能否赚. [思路] 反向运用SPFA,判断是否有正环.每次队首元素出队之后,判断一下到源点s的距离是否增大,增大则返回tr ...
OpenGL 模型视图投影矩阵仿射矩阵
矩阵基础知识要对矩阵进行运算,必须先要了解矩阵的计算公式,这个知识的内容涉及到了线性代数. 我们知道在Cocos2dx中,有关于平移,旋转,缩放等等操作,都必须要进行矩阵的乘法. 只需要一张图就能理 ...
C# 传统的ToString
C# 传统的ToString DataRow dr=item; var str=dr["Name"]; str.ToString();//dr["Name"]= ...
php在linux后台执行
<?php ignore_user_abort();//后台运行 ini_set('default_socket_timeout', -1);//socket不超时 set_time_limit ...
flash 跨域加载二次加载
var url2:String = "http://thirdapp0.qlogo.cn/qzopenapp/fa5d80ebf9fc89aaa1d7ddb0e1b861e58d77b409 ...
Git_分支管理
分支就是科幻电影里面的平行宇宙,当你正在电脑前努力学习Git的时候,另一个你正在另一个平行宇宙里努力学习SVN. 如果两个平行宇宙互不干扰,那对现在的你也没啥影响.不过,在某个时间点,两个平行宇宙合并 ...
js 闭包范式概述
在前几篇文章中我介绍过js的闭包,这一篇主要简单的介绍一下js中闭包的范式. 那么何谓闭包的范式呢? 首先回想一下闭包的概念,闭包是外部函数与函数内部之间通信的桥梁,通过对函数的返回,使得外部的函数能 ...
探究Linux下参数传递及查看和修改方法
http://m.blog.csdn.net/blog/moonvs2010/11392959
redis java操作
Redis Java连接操作连接到Redis服务器 import redis.clients.jedis.Jedis; public class RedisJava { public static ...

创建一个pre标签展开折叠的UI组件（原创）

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

随机推荐

热门专题