smartCycle自定义循环流程图

收藏

smartCyle.js是一款基于jQuery的在线循环流程图。该插件有强大的API，支持动态添加流程图中的节点。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

引入smartCycle流程图插件

<script type="text/javascript" src="js/smartCycle.min.js"></script>

smartCycle生成在线流程图

var radio = 160; 
var radio_arrows = 140; 
var container_width = 420, container_height = 420; 
var c_container_width = 420, c_container_height = 420; 
 
$(".ciclo1").smartCycle({ 
    container_width: '420px', 
    container_height: '420px', 
    radio: radio, 
    radio_arrows: radio_arrows, 
    arrows_colors: ['#40A4C0'], 
    colors: ['#928fa2', '#928fa2'] 
});

自定义添加随机流程图按钮

var alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'Ñ', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; 
var alphabet_pos = 6; 
$(".add").click(function() { 
    $(".ciclo1").append('<a class="sc_object">' + alphabet[alphabet_pos] + '</a>'); 
    radio += 25; 
    radio_arrows += 25; 
    container_width += 50; 
    container_height += 50; 
    c_container_width += 50; 
    c_container_height += 50; 
    $(".contenedor").css({ 
        'width': c_container_width + 'px', 
        'height': c_container_height + 'px' 
    }); 
    $(".ciclo1").smartCycle('options', {'radio': radio, 'radio_arrows': radio_arrows, 'container_width': container_width + 'px', 
        'container_height': container_height + 'px', }); 
    $(".ciclo1").smartCycle('realign'); 
    alphabet_pos += 1; 
});

smartCyle.jsAPI参数