Question

我在每个页面加载中定义了4个不同的游览。但是，我想将它们全部组合成一个游览。但是我很难将它们组合在一起（例如，从一页跳到另一页，返回，跳到另一页，等等）。

这是我的设置（这些页面中的每个页面都有自己的浏览方式）：

- Homepage (located at base_url)  
- AdminPage1 (located at beheer-vrijwilligers)  
- AdminPage2 (located at beheer-organisaties)  
- AdminPage3 (located at beheer-vacatures)

我的主页脚本代码如下所示，请注意，在显示了#adminvolunteers步骤之后，我想转到下一页（即AdminPage1，见下文）：

<script type="text/javascript">
    $(document).ready(function() {
        var baseUrl = $(document.body).data('base-url');

        // Instantiate the tour
        var tour = new Tour({
            name: "homepagetour",
            steps: [
                {
                    element: "#bootstraptourmiddlestart",
                    title: "Welcome",
                    content: "Welkom here"
                    backdrop: true,
                    template: "<div class='popover tour'> \
                        <h3 class='popover-title'></h3> \
                        <div class='popover-content'></div> \
                        <div class='popover-navigation'> \
                        <button class='btn btn-default' data-role='prev'>« Prev</button> \
                        <button class='btn btn-default' data-role='next'>Next »</button> \
                    <button class='btn btn-default' data-role='end'>End tour</button> \
                    </div> \
                    </div>"
                },
                {
                    element: "#homepagefiltertour",
                    title: "Zoeken naar vacatures",
                    content: "Hier kan je, gebaseerd op vrije text; interesses; locatie en/of radius, zoeken naar vacatures.",
                    backdrop: true
                },
                {
                    element: "#adminhomepagebuttons",
                    title: "Gegevens",
                    content: "Hier vind je links naar de verschillende pagina's om vrijwilligers, organisaties en vacatures in je regio te bekijken en beheren.",
                    backdrop: true
                },
                {
                    element: "#adminvolunteers",
                    title: "Vrijwilligers",
                    content: "Bekijk en beheer alle vrijwilligers in je regio.",
                    backdrop: true
                },
                {
                    element: "#adminvoltable_wrapper",
                    path: baseUrl+"beheer-vrijwilligers/"
                },
                {
                    element: "#adminorganizations",
                    title: "Organisaties",
                    content: "Bekijk en beheer alle organisaties in je regio.",
                    backdrop: true
                },
                {
                    element: "#adminvacancies",
                    title: "Vacatures",
                    content: "Bekijk en beheer alle vacatures in je regio.",
                    backdrop: true
                },
                {
                    element: ".navbar-nav",
                    title: "Navigatiemenu",
                    content: "test test test",
                    backdrop: true,
                    placement: "bottom"
                }
            ]
        });

        // Initialize the tour
        tour.init();

        // Start the tour
        tour.start();
    });
</script>

我的AdminPage1看起来像这样：请注意，在此页面中，我想在上一个（paginationNbr1Field）之后返回到从首页开始的浏览并返回到最后一个位置（因此它应该从#adminorganizations开始）。

<script>
    var showNbrFieldDiv = $('.dataTables_length');
    var showNbrField = showNbrFieldDiv.children();

    var showSearchFieldDiv = $('.dataTables_filter');
    var showSearchField = showSearchFieldDiv.children();

    var adminTable = $('#adminvoltable');
    var adminTableThead = adminTable.children('thead');
    var adminTableTbody = adminTable.children('tbody');
    var adminTableFirstRow = adminTableTbody.children().first();
    var adminTableFirstRowFirstField = adminTableFirstRow.children().first();
    var adminTableFirstRowFields = adminTableFirstRow.children();
    var adminTableFirstRowActionField = adminTableFirstRowFields[2];

    var paginationFieldWrapper = $('.pagination');
    var paginationFields = paginationFieldWrapper.children();
    var paginationNbr1Field = paginationFields[2];

    var baseUrl = $(document.body).data('base-url');

    // Instantiate the tour
    var tour = new Tour({
        name: "adminvolunteerstour",
        steps: [
            {
                element: "#adminvoltable_wrapper",
                title: "Beheer vrijwilligers",
                content: "test test",
                backdrop: true
            },
            {
                element: showNbrField,
                title: "Aantal tonen",
                content: "Selecteer het aantal vrijwilligers dat je tegelijk in de tabel wil tonen.",
                placement: "bottom",
                backdrop:true
            },
            {
                element: showSearchField,
                title: "Zoeken",
                content: "Typ iets in om de hele tabel te doorzoeken (op alle kolommen).",
                placement: "bottom",
                backdrop:true
            },
            {
                element: adminTableThead,
                title: "Sorteren",
                content: "Je kan elke kolom sorteren door op de kolomnaam te klikken.",
                backdrop: true
            },
            {
                element: adminTableFirstRowFirstField,
                title: "Naam vrijwilliger (en meer info)",
                content: "De naam van de vrijwilliger.",
                backdrop: true
            },
            {
                element: adminTableFirstRowActionField,
                title: "Acties",
                content: "Bekijk het profiel",
                backdrop: true
            },
            {
                element: paginationNbr1Field,
                title: "Paginatie",
                content: "Gebruik de paginatie knoppen om meer vrijwilligers te bekijken.",
                placement: "bottom",
                backdrop: true
            },
            {
                element: "#adminorganizations",
                title: "Organisaties",
                content: "Bekijk en beheer alle organisaties in je regio.",
                backdrop: true,
                path: baseUrl
            }
        ],
        onStart: function(tour) {
            //We do this because there's a bug that the nav bar comes over the datatables
            $(".navbar").css("z-index", "-1");
        },
        onEnd: function(tour) {
            //Reset nav bar back to original z-index
            $(".navbar").css("z-index", "123456");
        }
    });

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();
</script>

最后，我想对在AdminPage2和AdminPage3中实现游览执行相同的操作，但是概念保持不变。游览再次在主页上结束。

使用如下所示的解决方案，我再次回到主页（在AdminPage1上的浏览成功完成之后），但是我看到的是一个没有文本的弹出框（如下图所示）。如果我什么都不做，它将停留在地图上，但是如果我调整浏览器的大小，单击f12，执行任何操作，它将自动将我重定向回AdminPage1（我希望它继续进行主页上的浏览，然后转到AdminPage2）。

这甚至可能吗？对于此问题，似乎无法在Stackoverflow上找到任何帮助。

Bootstrap导览-如何从一个导览转移到另一个导览并返回

0 个答案: