赞
踩
最近项目需要,把以前封装的页面分割控件又重写完善了一遍,支持参数定义分割条的样式,是否启用拖动分割、是否启用点击开闭、缩放时是按比例缩放还是按宽度缩放等等。
由于新封装采用了弹性布局方式,因此效果比以前好多了,也不用拓展标签的resize事件了。
其他功能大家各自挖掘吧,上代码:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>test</title>
- <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
- <style type="text/css">
- html,body{ margin:0;padding:0;width:100%;height:100%; }
- </style>
- </head>
- <body>
- <div id="testContent" style="width:50%;height:50%;margin:50px;border: 1px solid red;"></div>
- </body>
- </html>
- <script type="text/javascript">
-
- 'use strict';
- $.fn.AddUESplit = function (cfg) {
- function mySplit(p, f) {
- var switchSize = 0;
- var parentWidth = 0;
- var parentHeight = 0;
- var contentSize = 0;
- var prevSize = 0;
- var mouseDown = 0;
- var mouseX = 0;
- var mouseY = 0;
- var other = this;
- var config = $.extend({
- resizeType: 'size', // 缩放方式,size:按尺寸缩放, tatio:按比例缩放
- switch: false, // 是否开启开关功能
- type: 's', // 分割方向, s:竖排横切,w:横排竖切
- width: 0, // 分割线宽度,竖切为宽度,横切为高度
- rate: '1:1', // 分割比例, 也可以直接像素指定,如:'200px',':600px'
- style: '' // 分割线的样式, 空值表示无分割线,default表示默认
- }, cfg);
- var myStyle = `
- <style id="ue_split" type="text/css">
- .ue_split_parent {padding:0px;margin:0px;display:flex;}
- .ue_split_prev {}
- .ue_split_midpd {flex:1;background-color:transparent;}
- .ue_split_switch {}
- .ue_split_next {flex:1}
- .ue_split_mid {background-image:radial-gradient(#215fb1,#ffffff,#215fb1);display:flex;}
- </style>`;
- var resize = function(){
- parentWidth = parseInt(other.parent[0].clientWidth, 10);
- parentHeight = parseInt(other.parent[0].clientHeight, 10);
- contentSize = (config.type == 's' ? parentHeight : parentWidth) - (config.style ? config.width : 0);
- var l = config.rate.split(':');
- var intp = parseInt(l[0] || 0, 10);
- var intn = parseInt(l[1] || 0, 10);
- if(config.rate.indexOf('px') == -1){
- prevSize = Math.floor(contentSize * intp / (intp + intn));
- }else{
- prevSize = l[0] ? intp : (contentSize - intn) ;
- }
- show();
- };
- var bindEvent = function(){
- other.parent.on('resize', function(){
- resize();
- })
- if(config.style && config.switch){
- other.switch.on('click', function(){
- if(switchSize){
- prevSize = switchSize;
- switchSize = 0;
- other.switch.css('background-image', 'url(../skin/base/img/splitC' + (config.type == 's' ? 'W' : 'S') + '.png)');
- }else{
- switchSize = prevSize;
- prevSize = 0;
- other.switch.css('background-image', 'url(../skin/base/img/splitO' + (config.type == 's' ? 'W' : 'S') + '.png)');
- }
- show();
- })
- other.midDom.on('mousedown', function (e) {
- mouseDown = 1;
- mouseX = e.pageX;
- mouseY = e.pageY;
- //s_t.midDom.fadeTo(20, 0.5);//点击后开始拖动并透明
- $(document).on('mousemove.splitMove', function (e) {
- if (mouseDown) {
- prevSize += config.type == 's' ? (e.pageY - mouseY) : (e.pageX - mouseX);
- prevSize = prevSize < 0 ? 0 : prevSize > contentSize ? contentSize : prevSize;
- mouseX = e.pageX;
- mouseY = e.pageY;
- switchSize = 0;
- show();
- }
- }).on('mouseup.splitUp', function () {
- mouseDown = mouseX = mouseY = 0;
- //s_t.midDom.fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
- $(document).off('mousemove.splitMove').off('mouseup.splitUp');
- });
- });
- }
- };
- var show = function () {
- if (config.type == 's') {
- if(config.style){
- other.midDom.css({ width: '100%', height: config.width });
- }
- other.prevDom.css({ width: '100%', height: prevSize });
- other.nextDom.css({ width: '100%' });
- } else {
- if(config.style){
- other.midDom.css({ width: config.width, height: '100%' });
- }
- other.prevDom.css({ width: prevSize, height: '100%' });
- other.nextDom.css({ height: '100%' });
- }
- if(config.resizeType == 'size'){
- config.rate = prevSize + 'px'; // 按宽度缩放
- }else{
- config.rate = prevSize + ':' + (contentSize - nextSize); // 按比例缩放
- }
- };
- if($('head').find('#ue_split').length == 0){
- $('head').append(myStyle);
- }
- //console.log('switch:' + config.switch)
- console.log(JSON.stringify(config))
- this.parent = p.html('').addClass('ue_split_parent').css('flex-direction', (config.type == 's' ? 'column' : 'row'));
- this.prevDom = $('<div class="ue_split_prev"></div>').appendTo(p);
- if(config.style){
- this.midDom = $('<div class="ue_split_mid ' + config.style + '" style="cursor:' + config.type + '-resize;flex-direction:' + (config.type == 's' ? 'row' : 'column') + ';"></div>').appendTo(p);
- this.midDom.append('<div class="ue_split_midpd"></div>');
- this.switch = $('<div style="cursor:pointer;background-image:url(../skin/base/img/' + (config.type == 's' ? 'splitCW' : 'splitCS') + '.png);width:' + (config.type == 's' ? '173' : '9') + `px;height:` + (config.type == 's' ? '9' : '173') + 'px;"></div>').appendTo(this.midDom);
- this.midDom.append('<div class="ue_split_midpd"></div>');
- }
- this.nextDom = $('<div class="ue_split_next"></div>').appendTo(p);
- resize();
- bindEvent();
- }
- return new mySplit($(this), cfg);
- };
-
- var tmp = $('#testContent').AddUESplit({switch: true, type: 'w', rate: '200px', width: 9, style: 'default' });
- console.log(JSON.stringify(tmp))
- tmp.nextDom.AddUESplit({type: 's', rate: '2:5' });
-
- </script>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。