Other Cách sử dụng các tab để tách lựa chọn add-on của bạn

[PVS]

Cách sử dụng các tab để tách lựa chọn add-on của bạn

Bài viết này sẽ hướng dẫn bạn làm thế nào để tinh chỉnh các tùy chọn trang add-on để hiển thị một cái gì đó như thế này:

​

Bước 1 - Tạo Add-on

Đầu tiên chúng ta cần tạo một add-on mới. Đây là một bước rất đơn giản. Để có thể tạo bạn cần bật Debug Mode.

Để tạo một add-on mới đi đến AdminCP -> Home -> List Add-ons và nhấn vào nút Create Add-on. Trong màn hình tiếp theo bạn cần phải điền vào các lĩnh vực này để tạo ra add-on. Sử dụng các thông tin dưới đây:

• Add-on ID: OptionsAsTabs
• Title: Tutorial Options As Tabs
• Add-on is active: Checked
• Version String: 1.0.0
• Version ID: 1

Và các lĩnh vực còn lại chỉ cho phép để trống. Chúng ta không cần phải điền. Add-on này là đơn giản, vì vậy chúng ta không có bất kỳ quá trình cài đặt hoặc một cái gì đó.

Nhấp vào Lưu Add-on và tiện ích của bạn được tạo ra!

Trước khi tiếp tục, hãy tạo thư mục và các tập tin. Tới your_xenforo_root/library và tạo một thư mục đặt tên nó là OptionsAsTabs.
Bên trong thư mục này tạo mới, tạo ra một tập tin gọi là: Listener.php. Hãy để tập tin rỗng, chúng ta sẽ sử dụng nó sau này.

Bước 2 - Tạo các tùy chọn

Bây giờ chúng ta cần phải tạo ra một số tùy chọn ví dụ để bạn có thể xem những gì chúng ta đang cố gắng làm ở đây. Để tạo ra các tùy chọn, bạn cần có một tùy chọn nhóm đầu tiên. Đến AdminCP -> Home -> Options và nhấp vào nút + Add Options Group.

Trong trang tiếp theo sử dụng các thông tin dưới đây để điền vào các lĩnh vực yêu cầu:

• Group ID: OptionsAsTabs
• Title: Tutorial Options As Tabs
• Description: Options for the tutorial using tabs.
• Display Order: 1
• Display this group in debug mode only: not checked
• Add-on: Tutorial Options As Tabs

Click vào nút Save Option Group.
Bạn sẽ kết thúc với điều này:

​

Bây giờ, chúng ta sẽ tạo ra 2 lựa chọn để sử dụng làm ví dụ. Click vào nút + Add Option và sử dụng các thông tin dưới đây để điền vào các lĩnh vực:

* Giá trị màu đỏ là quan trọng, đừng quên sử dụng chính xác như là ở đây.

Option 1

• Option ID: exampleOption
• Add-on: Tutorial Options As Tabs
• Title: Example Option 1
• Explanation: Example Option 1
• Edit Format: Text Box
• Data Type: String
• ... some other fields in the middle, just let they in blank ...
• Display Order: Tutorial Options As Tabs: Checked, value = 1

Option 2

• Option ID: exampleOption2
• Add-on: Tutorial Options As Tabs
• Title: Example Option 2
• Explanation: Example Option 2
• Edit Format: Text Box
• Data Type: String
• ... some other fields in the middle, just let they in blank ...
• Display Order: Tutorial Options As Tabs: Checked, value = 100

Giải thích về thứ tự hiển thị khác nhau:

​

Bạn có thể hỏi: "Tại sao chúng tôi đặt thứ tự hiển thị của các tùy chọn đầu tiên 1 và thứ hai 100?". Với một sự khác biệt giá trị 100 XenForo luôn luôn chèn một "dòng" để tách các lựa chọn của chúng tôi. Bạn có thể có một cái nhìn vào ví dụ của chúng tôi:

​

Hãy thử thay đổi thứ tự hiển thị và thiết lập thứ tự hai hiển thị các tùy chọn của chúng tôi đến 1 mỗi một. Bạn sẽ kết thúc với điều này:

​

Vì vậy, với điều này, chúng ta có thể nói rằng mỗi tùy chọn có sự khác biệt thứ tự hiển thị của 100 sẽ xuất hiện trong một tab khác. Nó sẽ là một cái gì đó như thế này:

• Tab 1
  • Lựa chọn 1 - tùy chọn này có thứ tự hiển thị của 1

• Tab 2
  • Lựa chọn 2 - tùy chọn này có thứ tự hiển thị của 100

(Đừng quên thay đổi lại thứ tự hiển thị của các tùy chọn 1 thành 1 và tùy chọn 2 thành 100)

Bước 3 - Template

Ok, bây giờ chúng ta cần phải khám phá template XenForo sử dụng trong trang tùy chọn.
Kể từ khi chúng ta đang ở trong AdminCP, chúng ta cần phải đi đến AdminCP -> Development -> Admin Templates. Ở đó, bạn nên tìm template option_list. Đây là template được sử dụng để lựa chọn cho mỗi liệt kê add-on.

Tiếp theo, sao chép tất cả các template vào một trình soạn thảo và hãy thay đổi theo tôi.

Với editor mở thấy đoạn mã này:

<xen:if hascontent="true"><div class="optionGroupDescription muted"><i><xen:contentcheck>{xen:raw $group.description}</xen:contentcheck></i></div></xen:if>

Ngay bên dưới chèn này:

<ul class="tabs mainTabs Tabs" data-panes="#OptionPanes > li" data-history="on">
<li><a href="{$requestPaths.requestUri}#1">Main Options</a></li>
<li><a href="{$requestPaths.requestUri}#2">User Options</a></li>
</ul>

Giải thích:

#OptionPanes - Đây là indentifier duy nhất của tất cả các tab của chúng ta
#1, #2 - Mỗi tab phải có một indentifier. Vì vậy, trong trường hợp này chúng ta sử dụng các con số.

Ok, chúng ta chỉ cần có thêm các tab. Nhưng các tab sẽ không làm việc nếu chúng ta không wrap các nội dung của các tùy chọn vào đúng html.

Bây giờ, tìm thấy điều này:

<xen:foreach loop="$renderedOptions" value="$_group">

Ngay trên, chèn này:

<ul id="OptionPanes">

OptionPanes - Ghi nhớ? Các định danh duy nhất của tất cả các tab của bạn.

Bây giờ, tìm thấy điều này:

<xen:submitunit save="{xen:phrase save_changes}">

Và ngay ở trên chèn này:

</ul>

Điều này đóng các nội dung của các tab. Vì vậy, bây giờ chúng ta đã gói tất cả các tùy chọn vào các thẻ html thích hợp để làm tab làm việc. Nhưng chúng ta có một điều để làm được nêu trong template này.

Tìm này:

<fieldset class="optionList">

Ở trên, chèn này:

<li id="{$i}" class="profileContent">

Đừng lo lắng về biến {$i}. Tôi sẽ giải thích sau.

Tìm:

</fieldset>

Bên dưới chèn này:

</li>

Với điều này, chúng ta đang gói mỗi tùy chọn nhóm (nhớ, giá trị 100 khau nhau) vào một <li> với các indentifier tương ứng. Nhưng chờ đợi. Xác định duy nhất mỗi tab là #1 và #2. Làm thế nào nó sẽ làm việc?

Vâng, chúng ta có một điều để làm:

Tìm:

<xen:foreach loop="$_group" key="$optionId" value="$renderedOption">{xen:raw $renderedOption}</xen:foreach>

Và trên chèn này:

<xen:set var="$i">{xen:calc '{$i} + 1'}</xen:set>

Biến {$i}, nhớ không? Vì vậy, điều này sẽ được sử dụng để xác định các định danh của mỗi tab.

Kể từ khi chúng ta có hai tab #1 và #2, chúng ta phải tìm một cách để thiết lập một indentifier riêng trong các routine foreach. Bằng cách đó, mỗi khi foreach hoàn thành các routine nó sẽ +1 đến biến $i.

Chúng ta sẽ kết thúc với điều này:

<li id="#1" class="profileContent">EXAMPLE OPTION 1<li>
<li id="#2" class="profileContent">EXAMPLE OPTION 1<li>

Đó là tất cả để hoàn thành template của chúng ta. Bây giờ, bạn cần phải tạo ra nó trong admin templates section. AdminCP -> Development -> Admin Templates và nhấp vào nút + Create Admin Template:

Template Name: OptionsAsTabs
Content: Nội dung template của bạn. Chỉ trong trường hợp, tôi sẽ đặt ở đây:

<xen:title>{xen:phrase options}: {$group.title}</xen:title>
<xen:h1>{$group.title}</xen:h1>

<xen:container var="$head.optionCss">
<style>
.hiddenOption  { display: inline-block; font-size: 9px; margin-right: 3px; color: @mutedTextColor; }
.hiddenOption a { position: static; }
.optionList a.optionAnchor { position: absolute; top: -80px; } /* prevents anchors pointing going under the fixed header */
</style>
</xen:container>

<xen:if is="{$canEditGroup}">
<xen:topctrl>
<a href="{xen:adminlink 'options/add-option', '', "group_id={$group.group_id}"}" class="button">+ {xen:phrase add_option}</a>
<a class="button" href="{xen:adminlink 'options/display-order', $group}">{xen:phrase display_order}</a>
<a class="button" href="{xen:adminlink 'options/edit-group', $group}">{xen:phrase edit_group}</a>
</xen:topctrl>
</xen:if>

<xen:form action="{xen:adminlink 'options/save', $group}">

<div class="topChoosers">
<div class="Popup">
<span class="muted">{xen:phrase option_groups}:</span> <a rel="Menu">{$group.title}</a>
<div class="Menu">
<div class="primaryContent menuHeader"><h3>{xen:phrase option_groups}</h3></div>
<ul class="secondaryContent blockLinksList">
<xen:foreach loop="$groups" value="$_group">
<li><a href="{xen:adminlink 'options/list', $_group}">{$_group.title}</a></li>
</xen:foreach>
</ul>
</div>
</div>
</div>

<xen:if hascontent="true"><div class="optionGroupDescription muted"><i><xen:contentcheck>{xen:raw $group.description}</xen:contentcheck></i></div></xen:if>

<ul class="tabs mainTabs Tabs" data-panes="#OptionPanes > li" data-history="on">
<li><a href="{$requestPaths.requestUri}#1">Main Options</a></li>
<li><a href="{$requestPaths.requestUri}#2">User Options</a></li>
</ul>

<ul id="OptionPanes">
<xen:foreach loop="$renderedOptions" value="$_group">
<xen:if hascontent="true">
<li id="{$i}" class="profileContent">
<fieldset class="optionList">
<xen:contentcheck>
<xen:set var="$i">{xen:calc '{$i} + 1'}</xen:set>
<xen:foreach loop="$_group" key="$optionId" value="$renderedOption">{xen:raw $renderedOption}</xen:foreach>
</xen:contentcheck>
</fieldset>
</li>
</xen:if>
</xen:foreach>
</ul>

<xen:submitunit save="{xen:phrase save_changes}">
<input type="reset" class="button" value="{xen:phrase cancel}" accesskey="r" />
</xen:submitunit>
</xen:form>

Lưu template và template đã sẵn sàng.

Bước 4 - Listener

Nhớ ở đầu tập tin Listener.php? Vì vậy, đến đó và mở tập tin.
Đặt này:

<?php
class OptionsAsTabs_Listener
{
    /***
    * This is the event listener callback. All the params are explanaded in the Code Event Listener page in the AdminCP.
    */
    public static function templatePostRender($templateName, &$content, array &$containerData, XenForo_Template_Abstract $template)
    {
        /* If the template is the one we want to change */
        if ($templateName == 'option_list')
        {
            /* If we are viewing our addon options page */
            if ($containerData['title'] == 'Options: Tutorial Options As Tabs')
            {
                /* Change the default options list template to our new one */
                $content = $template->create('OptionsAsTabs', $template->getParams());
            }
        }
    }
}

Lưu lại.

Bây giờ để làm mọi thứ cuối cùng làm việc, chúng ta cần tạo listener. Tới AdminCP -> Development -> Code Event Listeners và nhấp vào nút + Create New Code Event Listener.

• Listen to event: template_post_render
• Execute CallBack: OptionsAsTabs_Listener::templatePostRender
• Callback Execution Order:: 10
• Enable Callback Execution: checked
• Description:: Options as Tabs
• Add-on: Tutorial Options as Tabs

Lưu lại.

Tới AdminCP -> Options -> Tutorial Options As Tabs và bạn sẽ thấy kết quả:

Main Options

​

User Options

​

Chúc các bạn thành công.

Nguồn: xenforo.com​