文档章节

html 可拖动宽度的div方法

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

 

© 著作权归作者所有

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

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

皇上洗碗 ⋅ 2016/12/28 ⋅ 0

HTML5 如何实现拖放'N'拖放

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

3487690675 ⋅ 04/17 ⋅ 0

表格操作二三事。。。

table这个html标签,总是那么让人又爱有恨。爱是因为它良好的兼容性,不像div那样各种费事。恨呢,是因为它做的不是很完善,当我们想做一些高级应用的时候就比较难了。本文讲介绍一些表格所欠...

The-Dawn ⋅ 2015/08/05 ⋅ 4

js原生刻度尺滚动滑块插件

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

皇上洗碗 ⋅ 2016/12/28 ⋅ 0

jquery gridster 拖拽功能 中文文档

先上git连接 http://git.oschina.net/alexgaoyh/Draging/blob/master/src/main/webapp/gridster/adding-widgets-dynamically.html 效果截图: 1)动态添加模块(http://gridster.net/demos/a......

alexgaoyh ⋅ 2015/06/19 ⋅ 0

HTML+CSS+JS实现TABLE固定列(常见浏览器兼容)的最佳实践

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

李玉珏 ⋅ 2015/04/23 ⋅ 0

jQuery处理元素和浏览器窗口的尺寸

jQuery 尺寸 通过 jQuery,很容易处理元素和浏览器窗口的尺寸。 jQuery 尺寸方法 jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHeight() outerWidth() outerHe...

人人都能学编程 ⋅ 2017/12/29 ⋅ 0

zyUpload界面绝佳、体验超棒的HTML5上传插件

一、概述 在上一篇文章已经把zyFile骨骼部分讲完了,接下来要讲的是整个插件的血肉部分,zyUpload处理的东西比较多,比如:对文件格式、大小的过滤,设置文件上传状态等。今天我把java版的源...

Louis_88 ⋅ 2015/12/14 ⋅ 0

ExtJS 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Vie...

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

郏高阳 ⋅ 2012/05/13 ⋅ 0

clientWidth,clientHeight,offsetWidth,offsetHeigh含义

网页可见区域宽:document.body.clientWidth; 网页可见区域高:document.body.clientHeight; 网页可见区域宽:document.body.offsetWidth;(包括边线的宽) 网页可见区域高:document.body.off...

文文1 ⋅ 2015/05/16 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

1.01-StringUtils的使用

import org.apache.commons.lang.StringUtils; 一、StringUtils 常用的方法: 1. 判断某一字符串是否为空 , 为空的标准是 str==null 或 str.length()==0 StringUtils.isEmpty(null) ==>tr......

静以修身2025 ⋅ 14分钟前 ⋅ 0

几道Spring 面试题

1、BeanFactory 接口和 ApplicationContext 接口有什么区别? ApplicationContext 接口继承BeanFactory接口 Spring核心工厂是BeanFactory BeanFactory采取延迟加载,第一次getBean时才会初始...

职业搬砖20年 ⋅ 15分钟前 ⋅ 0

包饺子

http://storage.slide.news.sina.com.cn/slidenews/77_ori/2018_24/74766_826131_625489.gif

霜叶情 ⋅ 17分钟前 ⋅ 0

兑吧:从自建HBase迁移到阿里云HBase实战经验

摘要: 业务介绍 兑吧集团包含兑吧网络和推啊网络,兑吧网络是一家致力于帮助互联网企业提升运营效率的用户运营服务平台,提供积分商城和媒体运营服务。推啊网络是一家互动式广告平台,经过多...

猫耳m ⋅ 28分钟前 ⋅ 0

xml解析

方法一: String s_xml1 = "<xml>" + "<head>lalalalal</head>" + "<body>1234</body>" + "</xml>"; try { DocumentBuilderFactory documentBuilderFactory......

GithubXD ⋅ 29分钟前 ⋅ 0

reuse stream

Although Java streams were designed to be operated only once, programmers still ask how to reuse a stream. From a simple web search, we can find many posts with this same issue ......

idoz ⋅ 29分钟前 ⋅ 0

兑吧:从自建HBase迁移到阿里云HBase实战经验

摘要: 业务介绍 兑吧集团包含兑吧网络和推啊网络,兑吧网络是一家致力于帮助互联网企业提升运营效率的用户运营服务平台,提供积分商城和媒体运营服务。推啊网络是一家互动式广告平台,经过多...

阿里云云栖社区 ⋅ 31分钟前 ⋅ 0

从世界杯看国内运动体育社交新能量

2018年世界杯已正式拉开帷幕,一场全世界球迷的狂欢也正式开始。 世界杯影响力:30亿+球迷的狂欢+社交话题 世界杯这个超级IP和对社交网络的引爆让更多的人目光聚焦到国内运动体育社交这个层...

ThinkSNS账号 ⋅ 31分钟前 ⋅ 0

不固定值替换

<?php$arr = 20;$data = str_replace(array(10,20,30,40),array("blue","red","green","yellow"),$arr);print_r($data);...

nsns ⋅ 33分钟前 ⋅ 0

Job for nginx.service failed 错误解决方案

今天刚在centos7上安装了nginx-1.2.11,/etc/init.d/nginx start启动时,出现 Job for nginx.service failed because the control process exited with error code. See "systemctl status n......

河图再现 ⋅ 35分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部