dragFrame

使用此扩展要先引入jquery-1.9.1库 下载dragFrame-v1.0.0.zip
示例1 示例2
上下框架上下拖动框架示例代码
复制代码
<div class="td-frame" id="td-ud-frame2">
    <div class="td-up">
        框架上边内容
    </div>
    <div class="td-line">
        <div class="drag-line-s1"></div>
        <div class="drag-line-s2"></div>
        <div class="drag-line-s3"></div>
    </div>
    <div class="td-down">
        框架下边内容
    </div>
</div>
<script type="text/javascript">
    var obj = dragFrame.init({
        type: 2,
        mainFrame: '#td-frame',
        frame1: '.td-left',
        frame2: '.td-right',
        frameL: '.td-line',
        callback: function(event) {
            dragFrame.resetSize();
        }
    });
</script>
            
左右框架左右拖动框架示例代码
复制代码
<div class="td-frame" id="td-frame">
    <div class="td-left">
        左边
    </div>
    <div class="td-line">
        <div class="drag-line-s1"></div>
        <div class="drag-line-s2"></div>
        <div class="drag-line-s3"></div>
    </div>
    <div class="td-right">
        右边
    </div>
</div>
<script type="text/javascript">
    var obj = dragFrame.init({
        type: 1,
        mainFrame: '#td-frame',
        frame1: '.td-left',
        frame2: '.td-right',
        frameL: '.td-line',
        callback: function(event) {
            dragFrame.resetSize();
        }
    });
</script>
            
混合框架上下左右拖动框架示例代码
复制代码
<div class="td-frame" id="td-frame">
    <div class="td-left">
        <div class="acecls">
            <div class="td-frame" id="td-ud-frame3">
                <div class="td-up">
                    框架上边内容
                </div>
                <div class="td-line">
                    <div class="drag-line-s1"></div>
                    <div class="drag-line-s2"></div>
                    <div class="drag-line-s3"></div>
                </div>
                <div class="td-down">
                    框架下边内容
                </div>
            </div>
        </div>
    </div>
    <div class="td-line">
        <div class="drag-line-s1"></div>
        <div class="drag-line-s2"></div>
        <div class="drag-line-s3"></div>
    </div>
    <div class="td-right">
        <div class="td-frame" id="td-ud-frame">
            <div class="td-up">
                框架上边内容
            </div>
            <div class="td-line">
                <div class="drag-line-s1"></div>
                <div class="drag-line-s2"></div>
                <div class="drag-line-s3"></div>
            </div>
            <div class="td-down">
                框架下边内容
            </div>
        </div>
    </div>
</div>
            
type拖动类型/方向
类型:int 默认为 1
框架布局类型1左右 2上下
mainFrame主框架的容器选择器
类型:jquery选择器 默认为:#td-frame
拖动框架的父容器
bili框架比例
类型:Array 默认为:[1,1]
框架的宽度或高度比例
minSize框架最小宽/高度
类型:int 默认为:50
框架可以拖动到的最小宽度和高度
frameL拖动线
类型:jquery选择器 默认为:.td-line
框架中的拖动线,直接写拖动线类选择器
frame1第一个框架
类型:jquery选择器 默认为:.td-left
框架容器中的第一个框架元素的类选择器
frame1Size第一个框架默认大小
类型:int 默认为:0
框架容器中的第一个框架元素的默认宽度或高度
frame2第二个框架
类型:jquery选择器 默认为:.td-right
框架容器中的第二个框架元素的类选择器
frame2Size第二个框架默认大小
类型:int 默认为:0
框架容器中的第二个框架元素的默认宽度或高度
callback拖动回调
类型:function 默认为:null
拖动过程中的回调函数,有一个参数为event(当前鼠标事件)
dragFrame.resetSize重置框架大小
类型:function
当多个框架嵌套的时候需要在回调函数中执行dragFrame.resetSize();同步其它框架大小

FlashCopy

此扩展无需引入任何第三方js库,可以直接使用,因为里面使用到啦flash所以要在服务器环境下测试(支持谷歌,火狐,ie等主流浏览器) 下载FlashCopy-v1.1.0.zip
示例
使用方法复制文字示例
第一种方法直接传入元素id值绑定复制
复制代码
<a href="javascript:;" id="copytxt" class="btn" style="width:200px; height:100px;">点击复制1</a>
<script type="text/javascript">
    FlashCopy.setCopy({
        domid:'copytxt',
        getCopyText:function(dom){
            return '这是第一个要复制的数据';
        },
        copySuccess:function(dom,text){
            console.log(dom);
            console.log(text+' copy ok');
        }
    });
</script>
            
第二种方法通过jquery选中一系列元素绑定复制
复制代码
//使用jquery通过类选择器选中一个元素列表
$('.btn btn-small copybtn').each(function(index, el) {
    var _t = $(this);
    FlashCopy.setCopy({
        domid: _t[0], //把jquery对象转为普通dom对象
        getCopyText: function(dom) {
            // 在这里返回要复制的值
                        //dom是当前点击的元素对象
            return $(dom).text();
        },
        copySuccess: function(dom, text) {
            // //复制成功后会调用参数为调用的文本
            // alert(text);
            alert('代码复制成功');
        }
    });
});
            
domid元素的id
类型:字符串
要绑定复制事件的元素id值
getCopyText(dom)设置复制文本的回调函数
类型:回调函数
当点击绑定的元素后会调用这个回调,并且这里面要返回一个要复制的字符串,这里有一个dom参数,是当前点击的元素对象
copySuccess(dom,text)复制成功时的回调函数
类型:回调函数
当复制成功的时候会调用这个回调函数,参数dom为当前点击元素,text为复制成功的字符串