文档章节

html 可拖动宽度的div方法

孟飞阳
 孟飞阳
发布于 2017/09/12 12:55
字数 178
阅读 29
收藏 0
Css

效果演示:http://www.gbtags.com/gb/rtreplayerpreview/569.htm

HTML:

<h4>鼠标移动到矩形分割线</h4>

<div class="wrap">
    <div class="resizable resizable1"></div>
    <div class="resizable resizable2"></div>
</div>

<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.gbtags.com/jqueryui/1.10.4/jquery-ui.min.js"></script>

JS:

$(function () 
{
    $(".resizable1").resizable(
    {
        autoHide: true,
        handles: 'e',
        resize: function(e, ui) 
        {
            var parent = ui.element.parent();
            var remainingSpace = parent.width() - ui.element.outerWidth(),
                divTwo = ui.element.next(),
                divTwoWidth = (remainingSpace - (divTwo.outerWidth() - divTwo.width()))/parent.width()*100+"%";
                divTwo.width(divTwoWidth);
        },
        stop: function(e, ui) 
        {
            var parent = ui.element.parent();
            ui.element.css(
            {
                width: ui.element.width()/parent.width()*100+"%",
            });
        }
    });
});
    

CSS:

@import url('http://cdn.gbtags.com/jqueryui/1.10.4/css/jquery-ui.min.css');

*{
  font-family: 'microsoft yahei',Arial,sans-serif;
}

.wrap {
    width: 100%;
    border: 1px solid #999;
    font-size: 0;
}

h4{
  font-weight: normal;
}

.resizable {
    width: 50%;
    height: 120px;
    padding: 0.5em;
    background-color: orange;
    display: inline-block;
}

.resizable2 {
    background-color: #08a3ca;
}

.ui-resizable-e { 
    cursor: e-resize; 
    width: 16px; 
    right: -5px; 
    top: 0; 
    bottom: 0; 
    background-color: #666;
}

 

© 著作权归作者所有

共有 人打赏支持
孟飞阳
粉丝 204
博文 955
码字总数 540957
作品 5
朝阳
个人站长
jQuery刻度尺滚动滑块插件

jQuery刻度尺滚动滑块插件 需要用到一个刻度尺插件,网上找来找去都是那几种,所以用jQuery自己写了一个。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta n......

皇上洗碗
2016/12/28
83
0
HTML5 如何实现拖放'N'拖放

在网络开发人员需要掌握的所有技术中,看起来最容易造成混淆和潜在问题的是拖拽。 这不是一项新技术,它已存在多年,但许多开发人员仍然执着于基于jQuery的旧方法,以牵连复杂(有时很慢且不...

3487690675
04/17
0
0
js原生刻度尺滚动滑块插件

js原生刻度尺滚动滑块插件 用的MUI框架,原生兼容性很好,性能也更好,所以费了很大的力气改成原生的分享给大家。 有时间了改成手机版。 <!doctype html> <html> <head> <meta charset="UTF...

皇上洗碗
2016/12/28
81
0
HTML+CSS+JS实现TABLE固定列(常见浏览器兼容)的最佳实践

BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好。一些重量级的JS组件库也都有这...

李玉珏
2015/04/23
0
0
ExtJS 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Vie...

声明:本文案例讲解摘自资料,部分资料收集自他人博客。 通过此文能学习到如下内容 1.创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewp...

郏高阳
2012/05/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

angular指令监听ng-repeat渲染完成后执行自定义事件方法

今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令。 在ng-repeat模板实例内部会暴露出一些特殊属...

孟飞阳
43分钟前
1
0
URLEncoder和URLDecoder

public static void main(String[] args) { String str1 = "https://test1-life.pingan.com/ilifecore/productMall/loading.html?productId=8000000241&channelCode=XCX00001&productCode=00......

鬼才王
53分钟前
2
0
对象及变量的并发访问-第一篇

方法内部的变量为线程安全变量 “非线程安全”问题存在于“共享变量”中,如果是方法内部的私有变量,则不存在“非线程安全”问题,所得结果也就是“线程安全”的。 package chaprer3;/**...

简心
54分钟前
1
0
程序媛眼中的程序猿原来是这样子的!

一直都想写一篇关于描述程序员的文章,但是一直没能开头,一来因为文笔不好,更主要的原因是貌似对程序员既熟悉又不熟悉,很怕写出来的是以偏概全,给大家造成对程序员的既定印象,不过,管他...

Java小铺
今天
1
0
bean标签

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 bean标签 bean标签中的init-method属性,该属性...

凯哥学堂
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部