Question

我正在寻找FuelUX向导的替代方案，这个方向迫使我使用特定版本的Bootstrap，根据我的经验（见其他主题）证明不可靠http://exacttarget.github.io/fuelux/#wizard

我发现的唯一其他候选人是https://github.com/VinceG/twitter-bootstrap-wizard，但其规定较少（请查看http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/的展示，了解一些好例子）。

建议和提示/链接非常感谢！

Answer 1

您可以尝试使用此Fiddle

<div>
    <div class="clearfix">
        <ul class="wizard-steps">
            <li class="active">
                <div class="wizard-icon">1</div>
                <a href="javascript:void(0);">Wizard 1</a>
             </li>
            <li>
                <div class="wizard-icon">2</div>
                <a href="javascript:void(0);">Wizard 2</a>
            </li>
            <li class="last">
                <div class="wizard-icon">3</div>
                <a href="javascript:void(0);">Wizard 3</a>
            </li>
        </ul>

        <!-- Wizard 1 -->
        <div id="wizard1" class="wizard"> 
            <div class="clearfix">                
                  Wizard 1  
            </div>
            <div class="buttons">       
                <a href="javascript:void(0)" class="add-btn goto2">Next</a>
                <a href="javascript:void(0)" class="cancel-btn close-popup">Close</a>
            </div>
        </div>

        <!-- Wizard 2 -->
        <div id="wizard2" class="wizard">
            <div class="clearfix scroll">
                Wizard 2
            </div>
            <div class="buttons">       
                <a href="javascript:void(0)" class="add-btn goto3">Next</a>  
                <a href="javascript:void(0)" class="cancel-btn backto1">Back</a>
                <a href="javascript:void(0)" class="cancel-btn close-popup">Close</a>       
            </div>        
        </div>

        <!-- Wizard 3 -->
        <div id="wizard3" class="wizard">
            <div class="clearfix scroll">
                Wizard 3
            </div>
            <div class="buttons">       
                <a href="javascript:void(0)" class="add-btn">Save</a>     
                <a href="javascript:void(0)" class="cancel-btn backto2">Back</a>
                <a href="javascript:void(0)" class="cancel-btn close-popup">Close</a>       
            </div>        
        </div>
    </div>
</div>

<script>
$('#wizard2,#wizard3').hide();
    $('.goto2').click(function() {
        $('#wizard1,#wizard3').hide();  
        $('#wizard2').show();   
        $('.wizard-steps li:nth-child(1)').removeClass( "active" );
        $('.wizard-steps li:nth-child(2)').addClass( "active" );
    });
    $('.backto1').click(function() {
        $('#wizard2,#wizard3').hide();  
        $('#wizard1').show();   
        $('.wizard-steps li:nth-child(2)').removeClass( "active" );
        $('.wizard-steps li:nth-child(1)').addClass( "active" );
    });
    $('.goto3').click(function() {
        $('#wizard1,#wizard2').hide();  
        $('#wizard3').show();   
        $('.wizard-steps li:nth-child(2)').removeClass( "active" );
        $('.wizard-steps li:nth-child(3)').addClass( "active" );
    });
    $('.backto2').click(function() {
        $('#wizard1, #wizard3').hide(); 
        $('#wizard2').show();   
        $('.wizard-steps li:nth-child(3)').removeClass( "active" );
        $('.wizard-steps li:nth-child(2)').addClass( "active" );
    });
</script>
<style>
.wizard-steps{width:auto;margin:20px 0 0px 0; border-bottom:3px solid #d4d4d4; padding-bottom:20px;font-size:12px;}
.wizard-steps li {display: inline-block; position: relative; text-align: center;width:auto; min-width:130px; padding: 0 40px 0 20px;font-family: 'RobotoBold', sans-serif;}
.wizard-steps li:after{background-color: #d1d1d1; content: ""; height: 1px; left: 50%;position: absolute;top: 36%;width: 100%;z-index: 10;}
.wizard-steps li:last-child:after{content: ""; display: none;}
.wizard-steps li .wizard-icon {background:#9b9b9b;border-radius: 50%;height: 16px;margin: 0 auto;padding: 5px;position: relative;width: 16px;z-index: 11;color:#fff;border:1px solid #9b9b9b;}
.wizard-steps li a{color: #565656;position: relative;top: 5px;}
.wizard-steps li.active .wizard-icon{background:#1D7FAE;border:1px solid #11577B;}

</style>

FuelUX向导（Progress Tracker）的替代品

1 个答案: