Other XenForo Cheat Sheets AdminCP Designs and Codes - Thiết kế và code AdminCP XenForo Cheat Sheets

[PVS]

XenForo Cheat Sheets AdminCP Designs and Codes - Thiết kế và code AdminCP XenForo Cheat Sheets

XenForo Cheat Sheets Project là một dự án nhằm giảm khó khăn cho các nhà phát triển addon mới, phát triển addon chất lượng cao bằng cách cung cấp các bảng chức năng/tags/thông tin khác, mã takeaway họ có thể lộn xộn, phá vỡ và học từ, và các nội dung khác sẽ giúp các nhà phát triển addon học cách XenForo hoạt động.

Tất cả các tài liệu liên quan đến dự án này được phát hành theo Giấy phép CC By-Sa 3.0 Unported.

Dự án sẽ sử dụng Resource Manager cho đến khi nội dung là quá lớn để có thể duy trì qua RM. Nếu ngày đó đến, chúng tôi sẽ chuyển đến MediaWiki.

Wrap subchoices within <xen : option>

Mô tả: Về cơ bản strip các "đơn vị" ra khỏi tag, ví dụ nếu bạn có <xen:selectunit>, để wrap chọn dưới một lựa chọn, bạn sử dụng <xen:select> thay vì <xen:selectunit>.
Hoạt động trên: 1.1

<xen:option name="things" selected="{$things}" label="Things">
    <xen:radio name="things_option" value="{$things_option}">
        <xen:option value="this">Do this</xen:option>
        <xen:option value="that">Do that</xen:option>
    </xen:radio>
</xen:option>

Nest suboptions nicely without <xen:units>

Mô tả: Phương pháp được đề cập trong "Wrap subchoices within <xen : option>" không làm việc nếu bạn có một cái gì đó như thế này:

​

Vì vậy, mã này được sinh ra. Bí quyết là để ngăn xếp <ul>s - CSS sẽ tự động làm padding cho bạn.
boldClass = text-weight: bold;
Hoạt động trên: 1.1

<dl class="ctrlUnit">
    <!-- Edit option link. Must be put either at the beginning or the end of the dl tag. -->
    <input type="hidden" name="{$listedFieldName}" value="{$preparedOption.option_id}" />
    <!-- End Edit option link -->
    {xen:raw $editLink}
    <dt>{$preparedOption.title}</dt>
    <dd>
        <ul>
            <li>
                <label class="boldText">{xen:phrase 3ps_usergroup_ranks_in_posts}:</label>
                <ul>
                    <li>
                        <label for="{$fieldPrefix}[{$preparedOption.option_id}][style][posts]">{xen:phrase 3ps_usergroup_ranks_calculation_style}</label>
                        <xen:radio name="{$fieldPrefix}[{$preparedOption.option_id}][style][posts]" selected="{$preparedOption.option_value.style.posts}">
                            <xen:option value="0">{xen:phrase 3ps_usergroup_ranks_fixed}</xen:option>
                            <xen:option value="1">{xen:phrase 3ps_usergroup_ranks_dynamic}</xen:option>
                        </xen:radio>
                    </li>
                    <li>
                        <label for="{$fieldPrefix}[{$preparedOption.option_id}][value][posts]">{xen:phrase 3ps_usergroup_ranks_value}</label>
                        <ul>
                            <li>
                                <xen:spinbox name="{$fieldPrefix}[{$preparedOption.option_id}][value][posts]" value="{$preparedOption.option_value.value.posts}" min="0" />
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <ul>
            <li>
                <label class="boldText">{xen:phrase 3ps_usergroup_ranks_in_member_list}:</label>
                <ul>
                    <li>
                        <label for="{$fieldPrefix}[{$preparedOption.option_id}][style][member_list]">{xen:phrase 3ps_usergroup_ranks_calculation_style}</label>
                        <xen:radio name="{$fieldPrefix}[{$preparedOption.option_id}][style][member_list]" selected="{$preparedOption.option_value.style.member_list}">
                            <xen:option value="0">{xen:phrase 3ps_usergroup_ranks_fixed}</xen:option>
                            <xen:option value="1">{xen:phrase 3ps_usergroup_ranks_dynamic}</xen:option>
                        </xen:radio>
                    </li>
                    <li>
                        <label for="{$fieldPrefix}[{$preparedOption.option_id}][value][member_list]">{xen:phrase 3ps_usergroup_ranks_value}</label>
                        <ul>
                            <li>
                                <xen:spinbox name="{$fieldPrefix}[{$preparedOption.option_id}][value][member_list]" value="{$preparedOption.option_value.value.member_list}" min="0" />
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <ul>
            <li>
                <label class="boldText">{xen:phrase 3ps_usergroup_ranks_in_member_cards}:</label>
                <ul>
                    <li>
                        <label for="{$fieldPrefix}[{$preparedOption.option_id}][style][member_cards]">{xen:phrase 3ps_usergroup_ranks_calculation_style}</label>
                        <xen:radio name="{$fieldPrefix}[{$preparedOption.option_id}][style][member_cards]" selected="{$preparedOption.option_value.style.member_cards}">
                            <xen:option value="0">{xen:phrase 3ps_usergroup_ranks_fixed}</xen:option>
                            <xen:option value="1">{xen:phrase 3ps_usergroup_ranks_dynamic}</xen:option>
                        </xen:radio>
                    </li>
                    <li>
                        <label for="{$fieldPrefix}[{$preparedOption.option_id}][value][member_cards]">{xen:phrase 3ps_usergroup_ranks_value}</label>
                        <ul>
                            <li>
                                <xen:spinbox name="{$fieldPrefix}[{$preparedOption.option_id}][value][member_cards]" value="{$preparedOption.option_value.value.member_cards}" min="0" />
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </dd>
</dl>

Sample AdminCP data listing page

Mô tả:
Mẫu mã cho AdminCP trang danh sách dữ liệu.
Giải thích về xen:listitem usage:
id: ID Data.
label: Nhãn dữ liệu. Đây là những gì được thể hiện như là dữ liệu.
snippet: văn bản màu xám bên cạnh label, cung cấp thông tin bổ sung.
href: Liên kết để khi người dùng nhấp vào label. Thông thường, bạn có thể sử dụng: "{xen:adminlink 'my-awesome-addon/edit', $data.id}"
delete: Liên kết mà quyền hạn của nút delete trên bên phải của mỗi mục dữ liệu. Thông thường, bạn có thể sử dụng: {xen:adminlink 'my-awesome-addon/delete', $data.id}

Hoạt động trên: 1.1

<xen:title>{xen:phrase some_data_list}</xen:title> <!-- Obviously the title -->

<xen:topctrl> <!-- Things that appear on the top right - use this for buttons and links -->
    <a href="{xen:adminlink 'my-awesome-addon/add'}" class="button">+ {xen:phrase add_something}</a>
</xen:topctrl>

<xen:require css="filter_list.css" />
<xen:require js="js/xenforo/filter_list.js" />

<!-- Powers the top search/filter bar -->
<h2 class="subHeading">
    <xen:include template="filter_list_controls" />
    {xen:phrase data_list_names}
</h2>

<ol class="FilterList Scrollable">
    <xen:foreach loop="$dataList" value="$data"> <!-- Data passed by controller -->
        <xen:listitem
        id="{$data.id}"
        label="{$data.title} or something"
        snippet="{xen:phrase some_things_explaining_the_data}"
        href="{xen:adminlink 'my-awesome-addon/edit', $data.id}"
        delete="{xen:adminlink 'my-awesome-addon/delete', $data.id}" />
    </xen:foreach>
</ol>

<!-- Data count -->
<p class="sectionFooter">{xen:phrase showing_x_of_y_items, 'count=<span class="FilterListCount">{xen:count $dataList}</span>', 'total={xen:count $dataList}'}</p>

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

Nguồn: xenforo.com​