jQuery操作文件夹

jQuery操作文件夹

添加时间:2021-02-13 13:20:36
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:jQuery插件
  • 模板颜色模板颜色:中级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

纯属娱乐的一款js操作文件方法。
jQuery操作文件夹
分类:其它特效 > jQuery插件 难易:中级

HTML

<ul id="divall">
    <li><input type="text" class="changename" value="我的文件夹一"/></li>
    <li><input type="text" class="changename" value="我的文件夹二"/></li>
    <li><input type="text" class="changename" value="我的文件夹三"/></li>
    <li><input type="text" class="changename" value="我的文件夹四"/></li>
    <li><input type="text" class="changename" value="我的文件夹五"/></li>
    <li><input type="text" class="changename" value="我的文件夹六"/></li>
    <li><input type="text" class="changename" value="我的文件夹七"/></li>
</ul>
<div class="menu-zdy" id="menu">
    <div class="menu-one">
        <a href="#nogo" id="changename">修改文件夹名称</a>
    </div>
    <div class="menu-two">
        <a href="#nogo" id="removethispc">删除此文件</a>
    </div>
</div>
<script type="text/javascript" src="js/jquery-1.8.8.js"></script>
<script type="text/javascript" src="js/menu.js"></script>

jQuery

var $parent = $('#divall'),
$bgcolor = $('#divall li'),
$carry = $('.carrynews'),
$removenews = $('.remove'),
$removeall = $('.removeall'),
$removeright = $('#removethispc'),
$namehide = $('#divall li input.changename'),
$changename = $('#changename');
$removenews.hide();
//新建
$carry.live('click',
function() {
    alert('确定新建文件夹?') setTimeout(function() {
        $parent.append("<li><input type='text' \class='changename'\ value='新建文件夹'/></li>");
    },
    500);
});
//清空
$removeall.live('click',
function() {
    alert('确定清空所有文件夹?') setTimeout(function() {
        $parent.empty();

    },
    500);
}); //新文件夹不起作用!!		
//变色
$bgcolor.live('click',
function() {
    var btns = document.getElementById('removebutton');
    btns02 = document.getElementById('removethispc');
    $removenews.fadeIn(250);
    $(this).addClass('bgclocrc').siblings().removeClass('bgclocrc');
    $(this).attr("id", 'remove').siblings().attr('id', '');
    $(" input[type=text] ").attr("id", 'namecc').siblings().attr('id', ' ');
    btns.onclick = function() { //js 调用
        alert('确定删除文件夹?');
        setTimeout(function() {
            if ($bgcolor.hasClass('bgclocrc')) {
                //alert(123)
                // document.getElementById('remove').remove();//js
                $('#remove').remove(); //jq
                $removenews.fadeOut(250);
            } else {
                alert('请选择文件')
            }
        },
        250)
    } //
    btns02.onclick = function() { //js 调用
        alert('确定删除文件夹?');
        setTimeout(function() {
            if ($bgcolor.hasClass('bgclocrc')) {
                $('#remove').remove(); //jq
                $removenews.fadeOut(250);
            } else {
                alert('请选择文件')
            }
        },
        250)
    } //	右键功能---删除
    //右键菜单
    var container = document.getElementById('remove');
    var menu = document.getElementById('menu');

    /*显示菜单*/
    function showMenu() {

        var evt = window.event || arguments[0];

        /*获取当前鼠标右键按下后的位置,据此定义菜单显示的位置*/
        var rightedge = container.clientWidth - evt.clientX;
        var bottomedge = container.clientHeight - evt.clientY;

        /*如果从鼠标位置到容器右边的空间小于菜单的宽度,就定位菜单的左坐标(Left)为当前鼠标位置向左一个菜单宽度*/
        if (rightedge < menu.offsetWidth) menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";
        else
        /*否则,就定位菜单的左坐标为当前鼠标位置*/
        menu.style.left = container.scrollLeft + evt.clientX + "px";

        /*如果从鼠标位置到容器下边的空间小于菜单的高度,就定位菜单的上坐标(Top)为当前鼠标位置向上一个菜单高度*/
        if (bottomedge < menu.offsetHeight) menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
        else
        /*否则,就定位菜单的上坐标为当前鼠标位置*/
        menu.style.top = container.scrollTop + evt.clientY + "px";

        /*设置菜单可见*/
        menu.style.display = "block";
        LTEvent.addListener(menu, "contextmenu", LTEvent.cancelBubble);
    }
    /*隐藏菜单*/
    function hideMenu() {
        menu.style.display = 'none';
    }
    LTEvent.addListener(container, "contextmenu", LTEvent.cancelBubble);
    LTEvent.addListener(container, "contextmenu", showMenu);
    LTEvent.addListener(document, "click", hideMenu);
    $changename.live('click',
    function() {

        if ($bgcolor.hasClass('bgclocrc')) {
            $('#remove').find('.changename').val('');
            $('#remove').find('.changename').css('border', '1px solid #FF0000')
        } else {
            alert('请选择文件')
        }
    });
});

//修改文件名
$namehide.live('focus',
function() {
    $(this).css('border', '1px solid #FF0000');
    $(this).val('');
});
$namehide.live('blur',
function() {
    alert('确定修改文件名?') $(this).css('border', 'none');
    if ($(this).val() == "") {
        $(this).val('新建文件夹');
    } else {
        // $(this).parent().find('span').text() = $(this).value; 
    }
});
});
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:jQuery操作文件夹

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.130643s