jQuery简易自定义表单模块及拖拽排序代码免费下载

jQuery简易自定义表单模块及拖拽排序代码,支持添加/编辑/删除模块,点击保存获取参数值。

JS代码

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery-sortable-min.js"></script> 
<script> 
    $(function () { 
 
        $('.add').on('click', function () { 
 
            var that = $(this); 
 
            var target = that.data('target'); 
 
            $('.customerlist').append('<li> ' + $('.originlist>.' + target).html() + '</li>'); 
 
            $("ul.customerlist").sortable(); 
 
            //off 先取消绑定,否则会调用多次 
            $('.customeritem').off('click').on('click', modifytitle); 
            $('.delete').off('click').on('click',deleteitem); 
 
            $('.tips').hide(); 
 
        }) 
 
        $('.showjson').on('click',function(){ 
 
            if($('.customerlist .customeritem').length==0) return; 
 
            var temp=[]; 
            var t; 
            $('.customerlist .customeritem').each(function(index,element){ 
                t = $(this).children(); 
                temp.push({"type":$(t[2]).data('type'),"title":$(t[0]).data('title')}); 
            }) 
            console.log(temp); 
            $('.console').html(JSON.stringify(temp)) 
        }) 
 
    }) 
 
    function modifytitle(e) { 
 
        var that = $(this); 
        var key = that.find('.key').eq(0); 
        var value = that.find('.value').eq(0); 
 
        var newtitle = prompt("请填写标题", key.html()); 
        if ($.trim(newtitle).length > 8) { 
            alert('标题长度不能超过8位'); 
        }else if ($.trim(newtitle).length > 0) { 
            key.data('title',newtitle).html(newtitle) ; 
            if(value.data('type')!='file') value.data('placeholder',newtitle).html( '请填写' + newtitle); 
        }else{} 
    } 
 
    function deleteitem() { 
        if(confirm('确定要删除吗?')){ 
            var that = $(this); 
            var parent = that.parent(); 
            parent.remove(); 
            if($('.customerlist .customeritem').length==0) $('.tips').show(); 
        } 
 
    } 
</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录