Question

我在新项目中使用了Bootstrap向导插件。在下面的链接中，您可以看到插件demo＆...

对于上一个和下一个按钮，我使用自己的样式：

<div class="panel-button">
<div class="right">
    <button type="button" class="btn btn-primary button-next">Next</button>
</div>
<div class="left">
    <button type="button" class="btn button-previous">Previous</button>
</div>

我检查了一些示例，以了解如何使用最终按钮。据此，我们可以在下面使用此代码：

HTML：

<ul class="pager wizard">
    <li class="previous first"><a href="javascript:;">First</a></li>
    <li class="previous"><a href="javascript:;">Previous</a></li>
    <li class="next last"><a href="javascript:;">Last</a></li>
    <li class="next"><a href="javascript:;">Next</a></li>
    <li class="finish"><a href="javascript:;">Finish</a></li>
</ul>

JS：

$(document).ready(function () {
    $('#rootwizard').bootstrapWizard({
        onTabShow: function (tab, navigation, index) {
            var $total = navigation.find('li').length;
            var $current = index + 1;
            var $percent = ($current / $total) * 100;
            $('#rootwizard').find('.bar').css({width: $percent + '%'});
        }
    });
    $('#rootwizard .finish').click(function () {
        alert('Finished!, Starting over!');
        $('#rootwizard').find("a[href*='tab1']").trigger('click');
    });
});

EXAMPLE

实际上，我不想使用Ul，Li元素。我需要编辑js代码，但不知道如何实现！（不擅长js -_-）。另外，我认为在第一张幻灯片上不需要“上一个”按钮。如何禁用它？！

Bootstrap向导插件最后一个按钮自定义样式

0 个答案: