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

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

图片效果如下：

demo.html代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <link href="js/cnExpandPanel/cnExpandPanel.css" rel="stylesheet"/>
  8.     <style>
  9.         /*可以更改这两个参数来调整内容高度以及放大后的最小高度*/
  10.         .banner-expand{
  11.             height:200px;
                min-height:200px;
  1.         }
  1.         .banner-expand.on {
  2.             min-height:200px;
  3.         }
  4.         /*可以设置内容宽度，以及其他css样式*/
  5.         .banner{
  6.             width:500px;
  7.         }
  8.     </style>
  9. </head>
  10. <body style="background-color:#6C6B6B;margin:0;padding:0">
  11. <div class="banner">
  12.      <pre class="banner-expand">
  13. onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,
  14. ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,
  15. ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,
  16. onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,
  17. onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
  18. onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,
  19. ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,
  20. ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,
  21. onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,
  22. onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
  23. onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,
  24. ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,
  25. ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,
  26. onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,
  27. onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
  28. onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,
  29. ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,
  30. ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,
  31. onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,
  32. onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
  33. onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,
  34. ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,
  35. ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,
  36. onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,
  37. onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
  38. onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,
  39. ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,
  40. ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,
  41. onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,
  42. onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
  43.      </pre>
  44.     <div class="banner-footer J_BannerFooter">
  45.         <i class="icon-chevron-down icon-white J_ExpandDown i-show"></i>
  46.         <i class="icon-chevron-up icon-white J_ExpandUp i-hid"></i>
  47.     </div>
  48. </div>
  49. <script src="js/jquery-1.8.3.min.js"></script>
  50. <script src="js/cnExpandPanel/cnExpandPanel.js"></script>
  51. <script>
  52.     cnExpandPanel.initDom();
  53. </script>
  54. </body>
  55. </html>

cnExpandPanel.css代码：

  1. /* 该组件依赖于bootstrap2的图标，如果引用了bootstrap2的css文件，则该段css可以删掉 start */
  2. .icon-chevron-down {
  3.     background-position: -313px -119px;
  4. }
  5. .icon-chevron-up {
  6.     background-position: -288px -120px;
  7. }
  8. .icon-white{
  9.     width: 14px;
  10.     height: 14px;
  11.     margin-top: 1px;
  12.     *margin-right: .3em;
  13.     line-height: 14px;
  14.     vertical-align: text-top;
  15.     background-image: url("img/glyphicons-halflings-white.png");
  16.     background-repeat: no-repeat;
  17. }
  18. /* 该组件依赖于bootstrap2的图标，如果引用了bootstrap2的css文件，则该段css可以删掉 end */
  19. .banner {
  20.     position: relative;
  21. }
  22. .banner-expand {
  23.     white-space: pre;
  24.     white-space: pre-wrap;       /* css-3 */
  25.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  26.     word-wrap: break-word;       /* Internet Explorer 5.5+ */
  27.     display: block;
  28.     margin: 0 0 10px;
  29.     line-height: 1.42857143;
  30.     word-break: break-all;
  31.     background: rgba(0,0,0,0.17);
  32.     border:0 #2b2b2b;
  33.     border-radius:;
  34.     color: #5ca258;
  35.     font-family: Monaco,Consolas,"Lucida Console",monospace;
  36.     font-size: 12px;
  37.     min-height: 100px;
  38.     padding: 10px 20px;
  39.     transition: height .2s ease;
  40.     box-shadow: inset 0 0 1px rgba(0,0,0,0.71);
  41.     height: 200px;
  42.     overflow: hidden;
  43.     position: relative;
  44. }
  45. .banner-expand.on {
  46.     overflow: visible;
  47.     height:auto;
  48.     min-height:200px;
  49. }
  50. .banner-footer{
  51.     bottom:;
  52.     text-align:center;
  53.     background-color: #1d1d1d;
  54.     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%);
  55.     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)));
  56.     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%);
  57.     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%);
  58.     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%);
  59.     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%);
  60.     filter:alpha(opacity=0,finishOpacity=80,style=1,startx=0,startY=0,finishx=0,finishY=150);
  61.     -ms-filter:alpha(opacity=0,finishOpacity=80,style=1,startx=0,startY=0,finishx=0,finishY=150);
  62.     cursor: pointer;
  63.     position:absolute;
  64.     width:100%;
  65. }
  66. .banner-footer:hover{
  67.     background: rgba(0,0,0,0.74);
  68.     filter:none;
  69.     -ms-filter:none;
  70. }
  71. .i-show{
  72.     display:inline-block;
  73. }
  74. .i-hid{
  75.     display:none;
  76. }

cnExpandPanel.js代码：

  1. /**
  2.  * Created by rise_horizon on 2015/4/3.
  3.  * 依赖于jquery语法
  4.  */
  5. var cnExpandPanel = (function($){
  6.     function _troggleDom($this) {
  7.         var $J_ExpandUp = $this.find(".J_ExpandUp");
  8.         var $J_ExpandDown = $this.find(".J_ExpandDown");
  9.         if($J_ExpandDown.css("display") != "none") {
  10.             _collapseDom($J_ExpandUp, $J_ExpandDown, $this);
  11.         } else {
  12.             _expandDom($J_ExpandUp, $J_ExpandDown, $this);
  13.         }
  14.     }
  15.     function _collapseDom($J_ExpandUp, $J_ExpandDown, $this) {
  16.         $this.siblings("pre").addClass("on");
  17.         $J_ExpandUp.removeClass("i-hid");
  18.         $J_ExpandUp.addClass("i-show");
  19.         $J_ExpandDown.removeClass("i-show");
  20.         $J_ExpandDown.addClass("i-hid");
  21.     }
  22.     function _expandDom($J_ExpandUp, $J_ExpandDown, $this) {
  23.         $this.siblings("pre").removeClass("on");
  24.         $J_ExpandDown.removeClass("i-hid");
  25.         $J_ExpandDown.addClass("i-show");
  26.         $J_ExpandUp.removeClass("i-show");
  27.         $J_ExpandUp.addClass("i-hid");
  28.     }
  29.     function initDom() {
  30.         $(".J_BannerFooter").on("click",function(){
  31.             var $this = $(this);
  32.             _troggleDom($this);
  33.         });
  34.     }
  35.     return {initDom : initDom}
  36. })(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. [BZOJ4237]稻草人/[JOISC2014]かかし

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

  2. nginx 站点代理，负载均衡

    nginx服务器IP是192.168.1.201 web服务器 IP 192.168.1.200,192.168.1.199 1.主配置文件是/etc/nginx/下的nginx.conf,另外一个是 ...

  3. Codeforces Round #FF (Div. 1) A. DZY Loves Sequences 动态规划

    A. DZY Loves Sequences 题目连接: http://www.codeforces.com/contest/446/problem/A Description DZY has a s ...

  4. SMACH专题（二）----Concurrent状态机

    Concurrent状态机是一种同时执行多个状态的状态机.如下图所示.状态FOO和BAR同时执行,当两个状态输出的结果同时满足一个组合条件时(FOO输出outcome2,BAR输出outcome1)才 ...

  5. Hyper-V创建固定大小虚拟机

    1.新建硬盘 点击确定,就创建好了一个固定大小的vhd文件,下面我们开始创建虚拟机. 2.创建虚拟机 输入虚拟机名称 选择第一代虚拟机 我这里给虚拟机分配512MB内存 网络配置 在这之前我们已经创建 ...

  6. Tasker to answer incoming call by pressing power button

    nowadays, the smartphone is getting bigger in size, eg. samsung galaxy note and note 2, sorta big in ...

  7. 【Go入门教程9】并发（goroutine，channels，Buffered Channels，Range和Close，Select，超时，runtime goroutine）

    有人把Go比作21世纪的C语言,第一是因为Go语言设计简单,第二,21世纪最重要的就是并行程序设计,而Go从语言层面就支持了并行. goroutine goroutine是Go并行设计的核心.goro ...

  8. shader 4 杂 一些和函数名词、数据结构

    Normal:  法线 Normao mapping: 法线贴图 Lighting mapping: 光照贴图 Bump mapping:     凹凸贴图:模拟粗糙外表面的技术. FX-Water ...

  9. 使用stream(流)实现多表数据传输

    使用stream(流)实现多表数据传输 几乎所有的TCP和HTTP通信控件都支持stream(流)的传输. 使用stream(流)是可以实现多表数据传输的. 但这需要自定义协议了: 合并后的strea ...

  10. iOS-实现最简单的画线功能 . 转

    前提:CoreGraphics.framework - (void)viewDidLoad { [super viewDidLoad]; UIImageView *imageView=[[UIImag ...