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

随机推荐

Lunix/Mac下根据最后修改时间复制文件和文件夹，保持原有的目录结构
度娘知道:http://zhidao.baidu.com/link?url=DD47jm6qDgT7yxsnz9e-NC4Fqd33oRoiIwcGLkw5TL4cbf50VKY2IONbHKH0IE ...
SDWebImage支持WebP格式图片
SDWebImage本身就已经支持了webp格式的图片 1.下载libwebp https://github.com/webmproject/libwebp 然后你需要先安装好有homebrew或者m ...
Java线程锁&分布式锁的理解及应用
了解Java线程锁之前,先理解线程和进程的定义.进程是操作系统分配资源(CPU)的基本单位,线程是CPU执行的基本单位,一个进程可拥有多个线程,同进程间的多个线程共享分配给进程的资源.比如启动JVM时 ...
C++反汇编-虚函数
学无止尽,积土成山,积水成渊-<C++反汇编与逆向分析技术揭秘> 读书笔记在C++中,使用关键字virtual声明为虚函数. 虚函数地址表(虚表) 定义:当类中定义有虚函数时,编译器会把 ...
SQLServer存储过程返回值总结
1. 存储过程没有返回值的情况(即存储过程语句中没有return之类的语句) 用方法 int count = ExecuteNonQuery(..)执行存储过程其返回值只有两种情况 (1)假如通 ...
oracle 取整的几种方法
--1.取整(大) select ceil(-1.001) value from dual ; --2.取整(小) select floor(-1.001) value from dual ...
OC学习那些事：第一个OC类
一.创建一个新的OC类: 1.点击File->New File,打开Choose a template for your new file窗口,选择Objective-C class,点击Nex ...
在MyEclipse上安装svn插件
最近需要用到myeclipse做一个商城的项目开发,用svn作为项目的版本控制软件.但是在myeclipse上安装svn插件就是装不好,反复折腾了好几次都安装不成功.网上提供的安装办法有两种,一是:在 ...
关于TFS2010 远程无法创建团队项目的若干问题总结
今天遇到一个TFS的问题,折腾了好几个小时,故将其记录,给有遇到类似问题的朋友一些参考. 1.本文前提:服务器端只安装了TFS2010,本地没有安装Visual Studio 2010,因此不能在服务 ...
CHM编写软件
工具选择 1. HTML编辑工具:就是用什么软件写文档的问题.一直都是做.NET开发,所以选择HTML编辑也大都在MS阵营里选.主要有以下几种HTML编辑器. (1) Dr ...

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

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

随机推荐

热门专题