文档章节

html 可拖动宽度的div方法

孟飞阳
 孟飞阳
发布于 2017/09/12 12:55
字数 178
阅读 36
收藏 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;
}

 

© 著作权归作者所有

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

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

皇上洗碗
2016/12/28
83
0
Element源码分析系列10 - Slider(滑块)

简介 滑块组件总体来说还是比较简单的,但是还是涉及到了很多原生的js知识,下图是一个最基本的滑块组件 可以看出主要分为滑块轨道部分和滑块按钮这2大部分,而滑块轨道已滑过的蓝色部分也是...

超级索尼子
08/31
0
0
Element源码分析系列7-InputNumber(数字输入框)

简介 数字输入框,如下图,就是一个有着加减按钮的input而已,多用于购物车商品数目添加减少,这个输入框组件初看上去应该不是很难,但是Element的具体实现却有很多值得学习的地方,看完源码...

超级索尼子
08/23
0
0
HTML5 如何实现拖放'N'拖放

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

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

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

皇上洗碗
2016/12/28
81
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring中static变量不能@value注入的原因

今天本想使用@Value的方式使类中的变量获得yml文件中的配置值,然而一直失败,获得的一直为null。 类似于这样写的。 public class RedisShardedPool { private static ShardedJedisPool pool...

钟然千落
12分钟前
0
0
CentOS7防火墙firewalld操作

firewalld Linux上新用的防火墙软件,跟iptables差不多的工具。 firewall-cmd 是 firewalld 的字符界面管理工具,firewalld是CentOS7的一大特性,最大的好处有两个:支持动态更新,不用重启服...

dingdayu
今天
1
0
关于组件化的最初步

一个工程可能会有多个版本,有国际版、国内版、还有针对各种不同的渠道化的打包版本、这个属于我们日常经常见到的打包差异化版本需求。 而对于工程的开发,比如以前的公司,分成了有三大块业...

DannyCoder
今天
2
0
Spring的Resttemplate发送带header的post请求

private HttpHeaders getJsonHeader() { HttpHeaders headers = new HttpHeaders(); MediaType type = MediaType.parseMediaType("application/json; charset=UTF-8"); ......

qiang123
昨天
3
0
Spring Cloud Gateway 之 Only one connection receive subscriber allowed

都说Spring Cloud Gateway好,我也来试试,可是配置了总是报下面这个错误: java.lang.IllegalStateException: Only one connection receive subscriber allowed. 困扰了我几天的问题,原来...

ThinkGem
昨天
31
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部