创建一个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:/ ...

随机推荐

Codeforces.714D.Searching Rectangles(交互二分)
题目链接 $Description$ 在一个$n*n$的二维平面中有两个不相交的整点矩形,每次可以询问两个矩形有几个完全在你给出的一个矩形中.200次询问内确定两个矩形坐标. \(Soluti ...
[xsy2913]enos
题意:一棵树,点有$0,1,2$三种颜色,支持路径修改颜色和查询点所在同色连通块的大小 lcm太可怕了,于是去问了sk,得到一个优质做法考虑lct维护子树信息,$vs_{x,i}$为$x$的虚儿子中 ...
Vue 生命周期方法
一.Vue 生命周期 Vue的生命周期即是实例从创建到销毁的一个过程.之前在学习Vue的时候,看过官网的教程,但是经常用到的是mounted,所以对其他生命周期方法不是很熟悉,这里有空做个总结,也方便 ...
HAproxy和TIME WAIT的一次问题排查
近日平稳运行了将近4年的发号器突然出现问题,在元旦0分的时候出现短暂的性能下降,导致发号失败率飙高到一个不可接收的值,哎,意外总是发生在你想不到的地方. 这几天赶紧和小伙伴们赶紧追查原因,制定改造方案 ...
POJ 1330 Nearest Common Ancestors (LCA,倍增算法，在线算法)
/* *********************************************** Author :kuangbin Created Time :2013-9-5 9:45:17 F ...
IntelliJ IDEA 学习（五）类注释和自定义方法注释
intellj idea的强大之处就不多说了,相信每个用过它的人都会体会到,但是我们经常会感觉他很复杂,尤其刚从eclipse转过来的童鞋,相信刚开始的那段经历都是不堪回首的如何实现 ...
使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容
□ ListGroup展示内容当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3 ...
【linux】centos7终端中文显示乱码，命令返回中文乱码
centos7终端中文显示乱码,命令返回中文乱码 1.查看服务器编码的命令 1.1 echo $LANG 1.2 locale 1.3 查看终端xshell编码如果以上的三点依旧保持一致,而依旧乱码 ...
hadoop安装入门
1.jdk安装和配置 1.1下载最新jdk文件 http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-18802 ...
AES算法工具类
什么是对称加密算法? AES已经变成目前对称加密中最流行算法之一:AES可以使用128.192.和256位密钥,并且用128位分组加密和解密数据. 对称加密算法安全吗? 看过间谍局的知友们一定知道电台 ...

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

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

随机推荐

热门专题