YFCMF TP6

https://github.com/0377/yfcmf-tp6
Admin
A rapid development framework based on ThinkPHP6 and FastAdmin for building web applications.
Tokens:15,675
Snippets:207
Trust Score:6.3
License:Apache-2.0
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Toastr via npm

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Install the toastr library using npm for project integration.

```bash
npm install --save toastr
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Installs global build tools and project-specific dependencies required for building Toastr.js.

```bash
npm install -g gulp karma-cli
npm install
```

--------------------------------

### ArtTemplate Each Syntax Example

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/art-template/test/test-speed.html

Illustrates the 'each' syntax in ArtTemplate for iterating over a list, aliasing each item as 'val', and rendering user and site information.

```html
<ul> {{#each list as val}}
<li>用户: {{val.user}}/ 网站：{{val.site}}</li>
{{/each}}
</ul>
```

--------------------------------

### ArtTemplate Native Loop Example

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/art-template/test/test-speed.html

Demonstrates using a native JavaScript for loop within ArtTemplate to iterate over a list and render user and site information.

```html
<ul> {{ for (var val, i = 0, l = it.list.length; i < l; i ++) { }}
{{ val = it.list; }}
<li>用户: {{=val[i].user}}/ 网站：{{=val[i].site}}</li>
{{ } }}
</ul>
```

--------------------------------

### cxSelect API Initialization

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-cxselect/README.md

Initialize cxSelect using its API, either by directly passing the element and options or by using a callback function to get the API instance.

```javascript
var cxSelectApi;

// 方法一：
cxSelectApi = $.cxSelect($('#element_id'), {
  selects: ['province', 'city', 'area']
});

// 方法二：
$('#element_id').cxSelect({ 
  selects: ['province', 'city', 'area']
}, function(api) {
  cxSelectApi = api;
});

cxSelectApi.attach();
cxSelectApi.detach();
cxSelectApi.clear();
cxSelectApi.setOptions();
```

--------------------------------

### Rails Form Example

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/eonasdan-bootstrap-datetimepicker/docs/Extras.md

Example of how to use the overridden `datetime_select` helper within a Rails form. This demonstrates the integration after applying the custom FormBuilder.

```erb
<% form_for @post do |f| %>
	<div class="form-group">
		<label>Published At</label>
		<%= f.datetime_select :published_at %>
	</div>
<% end %>
```

--------------------------------

### ArtTemplate List Syntax Example

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/art-template/test/test-speed.html

Shows the basic ArtTemplate syntax for iterating over a list using the '#list' directive and rendering user and site data with triple mustache for HTML escaping.

```html
<ul> {{#list}}
<li>用户: {{{user}}}/ 网站：{{{site}}}</li>
{{/list}}
</ul>
```

--------------------------------

### Using a Helper Function in ArtTemplate

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/art-template/doc/syntax-native.md

Call a registered helper function within your template to process content. This example shows how to use a `dateFormat` helper.

```html
<%=dateFormat(content) %>
```

--------------------------------

### Initialize cxSelect with Options

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-cxselect/README.md

Initialize the cxSelect plugin on a container element, specifying the URL for data and the order of select elements.

```javascript
$('#element_id').cxSelect({
  url: 'cityData.min.json'                // 提示：如果服务器不支持 .json 类型文件，请将文件改为 .js 文件
  selects: ['province', 'city', 'area'],  // selects 为数组形式，请注意顺序
  emptyStyle: 'none'
});
```

--------------------------------

### cxSelect API Initialization and Event Handling

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-cxselect/index.html

Initializes cxSelect and captures the API instance. Includes event handlers for API methods like attach, detach, clear, and options modification.

```javascript
var apiBox = $('#api_data');
var cxSelectApi;
apiBox.cxSelect({},
    function(api) {
        cxSelectApi = api;
    }
);

$('body').on('click', 'button', function() {
    var _name = this.name;
    var _value = this.value;
    switch (_name) {
        case 'attach':
            cxSelectApi.attach();
            break;
        case 'detach':
            cxSelectApi.detach();
            break;
        case 'clear':
            cxSelectApi.clear();
            break;
        case 'required':
            cxSelectApi.setOptions({
                required: _value == 1 ? false : true
            });
            this.value = _value == 1 ? 0 : 1;
            break;
        case 'emptyStyle':
            if (_value === 'none') {
                _value = 'hidden';
            } else if (_value === 'hidden') {
                _value = '';
            } else {
                _value = 'none';
            }
            cxSelectApi.setOptions({
                emptyStyle: _value
            });
            this.value = _value;
            break;
        case 'firstTitle':
            _value = _value === '请选择' ? '选择吧' : '请选择';
            cxSelectApi.setOptions({
                firstTitle: _value
            });
            this.value = _value;
            break;
        case 'setSelect':
            cxSelectApi.setOptions({
                selects: _value === 'a' ? ['province', 'city', 'area'] : ['first', 'second', 'third', 'fourth', 'fifth']
            });
            this.value = _value === 'a' ? 'b' : 'a';
            break;
        case 'setData':
            if (_value === 'china' || _value === 'global') {
                cxSelectApi.setOptions({
                    url: this.value === 'china' ? urlChina : urlGlobal
                });
            } else if (this.value === 'custom') {
                cxSelectApi.setOptions({
                    data: dataCustom
                });
            }
            break;
    }
});
```

--------------------------------

### Basic Initialization

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-cxselect/README.md

Initializes cxSelect on a container element with specified selects and options. The data is fetched from a JSON URL.

```APIDOC
## Initialize cxSelect

### Description
Initializes the cxSelect plugin on a specified container element. This method sets up the cascading dropdown functionality based on the provided configuration.

### Method
```javascript
$('#element_id').cxSelect(settings, callback);
```

### Parameters
#### `settings` (Object)
Configuration options for cxSelect.
- **url** (string) - Optional - The URL to fetch the JSON data from. If the server does not support `.json` files, use a `.js` file.
- **selects** (Array<string>) - Required - An array of class names for the select elements in order (e.g., ['province', 'city', 'area']).
- **emptyStyle** (string) - Optional - How to display select elements when there is no data for a subset. Can be 'none' (display:none) or 'hidden' (visibility:hidden).
- **required** (boolean) - Optional - Defaults to `false`. If `false`, adds a default option like '<option value="firstValue">firstTitle</option>' to the list.
- **firstTitle** (string) - Optional - Defaults to '请选择'. The title for the first item in the select box (only effective when `required` is `false`).
- **firstValue** (string) - Optional - Defaults to ''. The value for the first item in the select box (only effective when `required` is `false`).
- **jsonSpace** (string) - Optional - The namespace for the data.
- **jsonName** (string) - Optional - Defaults to 'n'. The field name for the item's title in the JSON data.
- **jsonValue** (string) - Optional - The field name for the item's value in the JSON data. If not provided, the title is used as the value.
- **jsonSub** (string) - Optional - Defaults to 's'. The field name for the subset of child data in the JSON structure.

#### `callback` (Function)
An optional callback function that receives the cxSelect API instance as an argument after initialization.

### Request Example
```javascript
$('#element_id').cxSelect({
  url: 'cityData.min.json',
  selects: ['province', 'city', 'area'],
  emptyStyle: 'none'
}, function(api) {
  // cxSelectApi is now available
  console.log(api);
});
```
```

--------------------------------

### Default cxSelect Initialization

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-cxselect/index.html

Initializes a default cxSelect for province, city, and area selection. Assumes data is loaded from the default URL.

```javascript
$.cxSelect.defaults.url = urlChina;
$('#city_china').cxSelect({
    selects: ['province', 'city', 'area']
});
```

--------------------------------

### Site List Navigation

Source: https://github.com/0377/yfcmf-tp6/blob/master/app/admin/view/general/config/index.html

Renders a list of site links based on the 'siteList' variable. Includes a conditional link for adding configurations if app debug is enabled.

```html
{foreach $siteList as $index=>$vo}*   [{:__($vo.title)}](#{$vo.name})
{/foreach} {if env('app_debug')}*   [](#addcfg)
{/if}
```

--------------------------------

### Global Default Settings

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-cxselect/README.md

Sets default configuration options for all cxSelect instances on the page.

```APIDOC
## Set Global Default Settings

### Description
Allows you to configure default parameters for all cxSelect instances on the page. This should be done after including the plugin script and before calling `cxSelect`.

### Method
```javascript
$.cxSelect.defaults.propertyName = 'value';
```

### Parameters
Any of the parameters accepted by the `cxSelect` method can be set as global defaults. For example:
- **url**: Set the default data URL.
- **emptyStyle**: Set the default empty style.

### Request Example
```javascript
// Set default URL and emptyStyle for all cxSelect instances
$.cxSelect.defaults.url = 'cityData.min.json';
$.cxSelect.defaults.emptyStyle = 'none';
```
```

--------------------------------

### Configuration Group and Type Filters

Source: https://github.com/0377/yfcmf-tp6/blob/master/app/admin/view/general/config/index.html

Provides dropdowns for filtering configurations by group and type. It iterates through 'groupList' and 'typeList' to populate these options.

```html
{:input_token()}

{:__('Group')}:

{foreach name="groupList" item="vo"} {$vo} {/foreach}

{:__('Type')}:

{foreach name="typeList" item="vo"} {$vo} {/foreach}
```

--------------------------------

### Progress Bar Configuration

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Enables a visual progress bar to indicate the remaining display time of a toast message.

```javascript
toastr.options.progressBar = true;
```

--------------------------------

### Include JavaScript Files

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-cxselect/README.md

Include the jQuery library and the cxSelect plugin JavaScript file in your HTML.

```html
<script src="jquery.js"></script>
<script src="jquery.cxselect.js"></script>
```

--------------------------------

### ArtTemplate Speed Test Initiation

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/art-template/test/test-speed.html

Initiates a speed test by writing a string containing names from a test list to the document. This is typically used for performance benchmarking.

```javascript
for (var i = 0; i < testList.length; i ++) {document.write(testList[i].name + '; ')}
```

--------------------------------

### cxSelect API Methods

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-cxselect/README.md

Provides methods to interact with an initialized cxSelect instance, such as attaching, detaching, clearing, and setting options.

```APIDOC
## cxSelect API Methods

### Description
These methods allow you to control and manipulate an initialized cxSelect instance after it has been created. You can obtain the API instance either during initialization via the callback or by calling `$.cxSelect()` directly.

### Obtaining the API Instance

**Method 1: Direct Call**
```javascript
var cxSelectApi = $.cxSelect($('#element_id'), {
  selects: ['province', 'city', 'area']
});
```

**Method 2: Via Callback**
```javascript
$('#element_id').cxSelect({
  selects: ['province', 'city', 'area']
}, function(api) {
  var cxSelectApi = api;
});
```

### Available Methods

#### `attach()`

- **Description**: Binds the cxSelect functionality. This is useful for re-binding after `detach()` has been called.
- **Usage**: `cxSelectApi.attach();`

#### `detach()`

- **Description**: Unbinds the cxSelect functionality, removing the cascading effects. The select elements will no longer be linked.
- **Usage**: `cxSelectApi.detach();`

#### `clear(index)`

- **Description**: Clears the options for a specific select element and all subsequent select elements in the group.
- **Parameters**:
  - **`index`** (number): The zero-based index of the select element to clear (e.g., 0 for the first select, 1 for the second).
- **Usage**: `cxSelectApi.clear(1); // Clears the second select and any following selects`

#### `setOptions(settings)`

- **Description**: Resets or updates the plugin's options after initialization.
- **Parameters**:
  - **`settings`** (Object): An object containing the new options to apply. The structure is the same as the settings object used during initialization.
- **Usage**: `cxSelectApi.setOptions({ url: 'newCityData.json', firstTitle: 'Select Region' });`
```

--------------------------------

### cxSelect with Default Values and Title Options

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-cxselect/index.html

Initializes cxSelect with specific default values and customizes the empty option style to 'none'.

```javascript
$('#city_china_val').cxSelect({
    selects: ['province', 'city', 'area'],
    emptyStyle: 'none'
});
```

--------------------------------

### Display Success Toast with Title

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Show a success toast with both a message and a title. This demonstrates how to provide context.

```javascript
toastr.success('Have fun storming the castle!', 'Miracle Max Says')
```

--------------------------------

### ArtTemplate Native Loop with '&' Syntax

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/art-template/test/test-speed.html

Uses a native JavaScript for loop with ArtTemplate's '&' syntax for outputting variables, iterating over a list to display user and site information.

```html
<ul> <& for (var val, i = 0, l = @list.length; i < l; i ++) { &>
<& val = @list[i]; &>
<li>用户: <&= val.user &>； 网站：<&= val.site &></li>
<& } &>
</ul>
```

--------------------------------

### Include Resizable Extension JavaScript

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/bootstrap-table/src/extensions/resizable/README.md

Include the JavaScript file for the resizable extension to enable its functionality. This script should be included after the main Bootstrap Table library.

```html
<script src="extensions/cookie/bootstrap-table-resizable.js"></script>
```

--------------------------------

### Form Action Buttons

Source: https://github.com/0377/yfcmf-tp6/blob/master/app/admin/view/general/config/index.html

Renders 'OK' and 'Reset' buttons for form submission and resetting.

```html
{:__('OK')} {:__('Reset')}
```

--------------------------------

### Looping and Outputting Data in ArtTemplate

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/art-template/doc/syntax-native.md

This snippet demonstrates using native JavaScript for loops and outputting dynamic data within an ArtTemplate template. Note that templates cannot access global objects directly; use helper methods for shared functions.

```html
<h1><%=title%></h1>
<ul>
    <%for(i = 0; i < list.length; i ++) {
    %><li>条目内容 <%=i + 1%> ：<%=list[i]%>
    </li>
    <%}%>
</ul>
```

--------------------------------

### Configuration Input Fields

Source: https://github.com/0377/yfcmf-tp6/blob/master/app/admin/view/general/config/index.html

Generates input fields for configuration items, handling different types like string, password, text, editor, array, date, number, checkbox, radio, select, image, file, switch, and boolean. Includes conditional rendering for debug mode and custom HTML extensions.

```html
{:input_token()} {if env('app_debug')} {/if} {foreach $vo.list as $item} {if env('app_debug')} {/if} {/foreach} {if env('app_debug')} {/if}

{:__('Title')}

{:__('Value')}

{:__('Name')}

{$item.title}

{switch $item.type} {case string}  {/case} {case password}  {/case} {case text} {$item.value} {/case} {case editor} {$item.value} {/case} {case array}

{:isset($item["setting"]["key"])&&$item["setting"]["key"]?$item["setting"]["key"]:"
Array key"} {:isset($item["setting"]["value"])&&$item["setting"]["value"]?$item["setting"]["value"]:"
Array value"}

[{:__('Append')}](javascript:;)

{$item.value}

{/case} {case date}  {/case} {case time}  {/case} {case datetime}  {/case} {case datetimerange}  {/case} {case number}  {/case} {case checkbox}

{foreach name="item.content" item="vo"}  {$vo} {/foreach}

{/case} {case radio}

{foreach name="item.content" item="vo"}  {$vo} {/foreach}

{/case} {case value="select" break="0"}{/case} {case value="selects"} {foreach name="item.content" item="vo"} {$vo} {/foreach} {/case} {case value="image" break="0"}{/case} {case value="images"}

 {:__('Upload')} {:__('Choose')}

{/case} {case value="file" break="0"}{/case} {case value="files"}

 {:__('Upload')} {:__('Choose')}

{/case} {case switch}  [](javascript:;){/case} {case bool}  {:__('Yes')}  {:__('No')} {/case} {case city}

{/case} {case value="selectpage" break="0"}{/case} {case value="selectpages"}  {/case} {case custom} {$item.extend_html} {/case} {/switch}

{php}echo "{\$site.". $item['name'] . "}";{/php}

{if $item['id']>18}[](javascript:;){/if}
```

--------------------------------

### cxSelect with Custom Data and JSON Value

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-cxselect/index.html

Initializes cxSelect using a custom data array and specifies 'v' as the JSON value key.

```javascript
$('#custom_data').cxSelect({
    selects: ['first', 'second', 'third', 'fourth', 'fifth'],
    // required: true,
    jsonValue: 'v',
    data: dataCustom
});
```

--------------------------------

### cxSelect for Global Locations

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-cxselect/index.html

Configures cxSelect for global country, state, city, and region selection using a specified URL and 'none' for empty style.

```javascript
$('#global_location').cxSelect({
    url: urlGlobal,
    selects: ['country', 'state', 'city', 'region'],
    emptyStyle: 'none'
});
```

--------------------------------

### Animation Method Configuration

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Configures the jQuery show/hide methods used for animating toast messages. Defaults to fadeIn/fadeOut.

```javascript
toastr.options.showMethod = 'slideDown';
toastr.options.hideMethod = 'slideUp';
toastr.options.closeMethod = 'slideUp';
```

--------------------------------

### .selectpicker('show')

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/bootstrap-select/docs/docs/methods.md

Programmatically shows the bootstrap-select element. This method only affects the visibility of the select component itself.

```APIDOC
## .selectpicker('show')

### Description
Programmatically shows the bootstrap-select. This only affects the visibility of the bootstrap-select itself.

### Method
JavaScript

### Usage
```js
$('.selectpicker').selectpicker('show');
```
```

--------------------------------

### Debug Environment Toggle

Source: https://github.com/0377/yfcmf-tp6/blob/master/app/admin/view/general/config/index.html

Conditionally displays 'OK' and 'Reset' buttons, with a message indicating they only work in the development environment if app debug is disabled.

```html
{if !env('app_debug')} {:__('Only work at development environment')} {else/} {:__('OK')} {:__('Reset')} {/if}
```

--------------------------------

### Selectpage Configuration Fields

Source: https://github.com/0377/yfcmf-tp6/blob/master/app/admin/view/general/config/index.html

Defines input fields for 'Selectpage' type configurations, including table selection, primary key, field, and conditions. Also includes fields for array key/value and general value.

```html
{:__('Name')}:

{:__('Title')}:

{:__('Selectpage table')}:

{:__('Please select table')}

{:__('Selectpage primarykey')}:

{:__('Selectpage field')}:

{:__('Selectpage conditions')}:

{:__('Field title')} {:__('Field value')}

[{:__('Append')}](javascript:;)

{:__('Array key')}:

{:__('Array value')}:

{:__('Value')}:

{:__('Content')}:

value1|title1 value2|title2

{:__('Tip')}:

{:__('Rule')}:

 {:__('Choose')}

{volist name="ruleList" id="item"}*   [{$item}({$key})](javascript:;)
{/volist}

{:__('Extend')}:
```

--------------------------------

### ArtTemplate Native Loop with '<%' Syntax

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/art-template/test/test-speed.html

Employs a native JavaScript for loop within ArtTemplate's '<%' and '%>' delimiters to iterate and render user and site data.

```html
<ul> <% for (var i = 0, l = list.length; i < l; i ++) { %>
<li>用户: <%=list[i].user%>/ 网站：<%=list[i].site%></li>
<% } %>
</ul>
```

--------------------------------

### Display Info Toast

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Show a basic info toast message without a title. Ensure toastr.css and toastr.js are linked.

```javascript
toastr.info('Are you the 6 fingered man?')
```

--------------------------------

### Initialize and Control Select Elements

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/bootstrap-select/docs/docs/methods.md

This script initializes event handlers for removing options and toggling the disabled state of select elements, using the refresh method to update the UI.

```javascript
window.onload = function () {
    var $re = $('.remove-example'),
        $de = $('.disable-example');

    $('.rm-mustard').click(function () {
      $re.find('[value=Mustard]').remove();
      $re.selectpicker('refresh');
    });
    $('.rm-ketchup').click(function () {
      $re.find('[value=Ketchup]').remove();
      $re.selectpicker('refresh');
    });
    $('.rm-relish').click(function () {
      $re.find('[value=Relish]').remove();
      $re.selectpicker('refresh');
    });
    $('.ex-disable').click(function () {
      $de.prop('disabled', true);
      $de.selectpicker('refresh');
    });
    $('.ex-enable').click(function () {
      $de.prop('disabled', false);
      $de.selectpicker('refresh');
    });
  };
```

--------------------------------

### Set Global Default Parameters for cxSelect

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-cxselect/README.md

Set global default values for cxSelect parameters before initializing the plugin. This affects all subsequent initializations.

```javascript
// 需在引入 <script src="jquery.cxselect.js"></script> 之后，调用之前设置
$.cxSelect.defaults.url = 'cityData.min.json';
$.cxSelect.defaults.emptyStyle = 'none';
```

--------------------------------

### Configure cxSelect via Parent Data Attributes

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-cxselect/README.md

Configure cxSelect by setting data attributes on the parent container element. These attributes correspond to the plugin's options.

```html
<div id="element_id" data-url="cityData.min.json" data-required="true"></div>
```

--------------------------------

### Show Bootstrap Select

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/bootstrap-select/docs/docs/methods.md

Programmatically shows the Bootstrap Select element. This method only affects the visibility of the select component itself.

```javascript
$('.selectpicker').selectpicker('show');
```

--------------------------------

### Define Toast Callbacks

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Implement callback functions for various toast events: shown, hidden, clicked, and close button clicked. These allow for custom actions upon notification lifecycle events.

```javascript
// Define a callback for when the toast is shown/hidden/clicked
toastr.options.onShown = function() { console.log('hello'); }
toastr.options.onHidden = function() { console.log('goodbye'); }
toastr.options.onclick = function() { console.log('clicked'); }
toastr.options.onCloseClick = function() { console.log('close button clicked'); }
```

--------------------------------

### Set Newest Toast on Top

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Control the display order of toasts. Setting `newestOnTop` to `false` shows the newest toast at the bottom.

```javascript
toastr.options.newestOnTop = false;
```

--------------------------------

### Show Checkmark on Selected Option

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/bootstrap-select/docs/docs/examples.md

Enable a visual indicator (checkmark) for selected options in standard select boxes by adding the `show-tick` class. This enhances usability by clearly marking choices.

```html
<select class="selectpicker show-tick">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
```

--------------------------------

### Bind to Slimscroll Events

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/jquery-slimscroll/examples/scroll-events.html

Use the .bind('slimscrolling', function(e, pos){...}) method to listen for scroll events. The 'pos' argument provides the current scroll position in pixels.

```javascript
  $("#testDiv2").slimscroll().bind("slimscrolling", function(e, pos) {
    $("#testDivOut2").append("Scroll value: " + pos + "px");
  });
```

--------------------------------

### Initialize Slimscroll with and without Fade Out

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/jquery-slimscroll/examples/disable-fade-out.html

Initializes Slimscroll on two different elements. The first uses default settings (fade-out enabled), while the second explicitly disables the fade-out effect.

```javascript
$(function(){ $('#testDiv').slimscroll(); $('#testDiv2').slimscroll({ disableFadeOut: true }); }); //enable syntax highlighter
```

--------------------------------

### Toggle Bootstrap Select Menu

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/bootstrap-select/docs/docs/methods.md

Programmatically opens or closes the dropdown menu of a Bootstrap Select instance.

```javascript
$('.selectpicker').selectpicker('toggle');
```

--------------------------------

### Configure Close Animation

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Specify the animation method, duration, and easing for the close button's hide action. This ensures a consistent animation experience.

```javascript
toastr.options.closeMethod = 'fadeOut';
toastr.options.closeDuration = 300;
toastr.options.closeEasing = 'swing';
```

--------------------------------

### 欢迎页弹窗示例

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-layer/test/demo.html

当页面加载完毕后，自动打开一个欢迎页弹窗。弹窗支持最大化最小化，并可在关闭时触发回调函数显示提示信息。

```javascript
;!function(){ //页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕 layer.ready(function(){ layer.open({ type: 2, title: '欢迎页', maxmin: true, area: ['800px', '500px'], content: 'http://layer.layui.com/test/welcome.html', end: function(){ layer.tips('Hi', '#about', {tips: 1}) } }); }); //关于 $('#about').on('click', function(){ layer.alert('layui 出品'); }); }();
```

--------------------------------

### .selectpicker('toggle')

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/bootstrap-select/docs/docs/methods.md

Programmatically toggles the visibility of the bootstrap-select menu, opening it if closed and closing it if open.

```APIDOC
## .selectpicker('toggle')

### Description
Programmatically toggles the bootstrap-select menu open/closed.

### Method
JavaScript

### Usage
```js
$('.selectpicker').selectpicker('toggle');
```
```

--------------------------------

### Configure Select Element via Data Attributes

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-cxselect/README.md

Configure individual select elements using data attributes, such as setting a default value or specifying a custom title for the first option.

```html
<select class="province" data-value="浙江省" data-first-title="选择省"></select>
```

--------------------------------

### Set Option Title Attribute

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/bootstrap-select/docs/docs/examples.md

Use the `title` attribute on individual options to display alternative text when an option is selected. This is useful for providing more descriptive information for each choice.

```html
<select class="selectpicker">
  <option title="Combo 1">Hot Dog, Fries and a Soda</option>
  <option title="Combo 2">Burger, Shake and a Smile</option>
  <option title="Combo 3">Sugar, Spice and all things nice</option>
</select>
```

--------------------------------

### Registering a Helper Function in ArtTemplate

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/art-template/doc/syntax-native.md

Register reusable functions using `template.helper()`. These functions can then be called within your templates to format or process data.

```javascript
template.helper('dateFormat', function (date, format) {
    // ..
    return value;
});
```

--------------------------------

### Apply Button Styles

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/bootstrap-select/docs/docs/examples.md

Customize the appearance of the select dropdown button by applying standard Bootstrap button classes via the `data-style` attribute. Multiple styles can be demonstrated.

```html
<select class="selectpicker" data-style="btn-primary">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<select class="selectpicker" data-style="btn-info">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<select class="selectpicker" data-style="btn-success">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<select class="selectpicker" data-style="btn-warning">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<select class="selectpicker" data-style="btn-danger">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
```

--------------------------------

### Display Error Toast with Title

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Display an error toast with a title. Useful for indicating critical issues.

```javascript
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')
```

--------------------------------

### Display Warning Toast

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Display a warning toast message. This snippet shows a common toastr usage pattern.

```javascript
toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')
```

--------------------------------

### Display Menu Arrow

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/bootstrap-select/docs/docs/examples.md

Add a visual menu arrow to the select dropdown by applying the `show-menu-arrow` class. This aligns the dropdown appearance with standard Bootstrap conventions.

```html
<select class="selectpicker show-menu-arrow">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
```

--------------------------------

### Disable/Enable Select and Refresh UI

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/bootstrap-select/docs/docs/methods.md

Shows how to programmatically disable or enable a select element and then refresh the Bootstrap Select UI to update its appearance and behavior.

```javascript
$('.ex-disable').click(function () {
  $('.disable-example').prop('disabled', true);
  $('.disable-example').selectpicker('refresh');
});

$('.ex-enable').click(function () {
  $('.disable-example').prop('disabled', false);
  $('.disable-example').selectpicker('refresh');
});
```

--------------------------------

### DOM Structure for cxSelect

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-cxselect/README.md

Define the HTML structure for the linked select elements within a container div. The select elements can have any class name, and one of these class names is used to initialize the plugin.

```html
<!--
select 必须放在元素 id="element_id" 的内部，不限层级
select 的 class 任意取值，也可以附加多个 class，如 class="province otherclass"，在调用时只需要输入其中一个即可，但是不能重复
-->
<div id="element_id">
  <select class="province"></select>
  <select class="city"></select>
  <select class="area"></select>
</div>
```

--------------------------------

### Right-to-Left (RTL) Support

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Configures Toastr.js to display toast messages from right to left, suitable for RTL languages.

```javascript
toastr.options.rtl = true;
```

--------------------------------

### Custom Delimiter Usage in Art-Template

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/art-template/demo/template-native/tag.html

This snippet shows how to define and use custom delimiters for Art-Template. It renders a title and a list of items using the custom tags.

```javascript
<!--[if (title) {]--> <h3><!--[= title]--></h3> <!--[} else {]--> <h3>无标题</h3> <!--[}]--> <ul> <!--[for (var i = 0; i < list.length; i ++ ) {]--> <li>索引 <!--[= i + 1 ]--> ：<!--[= list[i]]--></li> <!--[}]--> </ul> template.defaults.openTag = '<!--[';
template.defaults.closeTag = ']-->';
var html = '';
var data = { title: '我的标签', list: 
['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
html = template('test', data);
document.write(html);
```

--------------------------------

### Toast Timeout Settings

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Sets the duration in seconds for which a toast message is displayed. Timeouts can be disabled by setting them to 0.

```javascript
toastr.options.timeOut = 30; // How long the toast will display without user interaction
toastr.options.extendedTimeOut = 60; // How long the toast will display after a user hovers over it
```

--------------------------------

### .selectpicker('refresh')

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/bootstrap-select/docs/docs/methods.md

Updates the UI of a select element to match its current state. This is essential after programmatically adding, removing, or modifying options, or when changing the disabled state of the select.

```APIDOC
## .selectpicker('refresh')

### Description
Updates the UI of a select element to match its current state. This is essential after programmatically adding, removing, or modifying options, or when changing the disabled state of the select.

### Method
JavaScript

### Usage
```js
$('.selectpicker').selectpicker('refresh');
```

### Example
Removing an option and refreshing the select:
```js
$('.rm-mustard').click(function () {
  $('.remove-example').find('[value=Mustard]').remove();
  $('.remove-example').selectpicker('refresh');
});
```

Disabling and enabling a select and refreshing:
```js
$('.ex-disable').click(function () {
  $('.disable-example').prop('disabled', true);
  $('.disable-example').selectpicker('refresh');
});

$('.ex-enable').click(function () {
  $('.disable-example').prop('disabled', false);
  $('.disable-example').selectpicker('refresh');
});
```
```

--------------------------------

### Clear All Toasts with Animation

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Clear all toasts using their configured hide animation. This provides a smoother user experience than immediate removal.

```javascript
toastr.clear()
```

--------------------------------

### Custom Data Structure for cxSelect

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-cxselect/index.html

Defines a complex custom data structure for cxSelect, including nested levels and various data types for values.

```javascript
var dataCustom = [
    {'v': '1', 'n': '第一级 >', 's': [
        {'v': '2', 'n': '第二级 >', 's': [
            {'v': '3', 'n': '第三级 >', 's': [
                {'v': '4', 'n': '第四级 >', 's': [
                    {'v': '5', 'n': '第五级 >', 's': [
                        {'v': '6', 'n': '第六级 >'}
                    ]}
                ]}
            ]}
        ]}
    ]},
    {'v': 'test number', 'n': '测试数字', 's': [
        {'v': 'text', 'n': '文本类型', 's': [
            {'v': '4', 'n': '4'},
            {'v': '5', 'n': '5'},
            {'v': '6', 'n': '6'},
            {'v': '7', 'n': '7'},
            {'v': '8', 'n': '8'},
            {'v': '9', 'n': '9'},
            {'v': '10', 'n': '10'}
        ]},
        {'v': 'number', 'n': '数值类型', 's': [
            {'v': 11, 'n': 11},
            {'v': 12, 'n': 12},
            {'v': 13, 'n': 13},
            {'v': 14, 'n': 14},
            {'v': 15, 'n': 15},
            {'v': 16, 'n': 16},
            {'v': 17, 'n': 17}
        ]}
    ]},
    {'v': 'test boolean','n': '测试 Boolean 类型', 's': [
        {'v': true ,'n': true},
        {'v': false ,'n': false}
    ]},
    {v: 'test quotes', n: '测试属性不加引号', s: [
        {v: 'quotes', n: '引号'}
    ]},
    {'v': 'test other', 'n': '测试奇怪的值', 's': [
        {'v': '[]', 'n': '数组（空）'},
        {'v': [1,2,3], 'n': '数组（数值）'},
        {'v': ['a','b','c'], 'n': '数组（文字）'},
        {'v': new Date(), 'n': '日期'},
        {'v': new RegExp('\\d+'), 'n': '正则对象'},
        {v: /\d+/, 'n': '正则直接量'},
        {'v': {}, 'n': '对象'},
        {'v': document.getElementById('custom_data'), 'n': 'DOM'},
        {'v': null, 'n': 'Null'},
        {'n': '未设置 value'}
    ]},
    {'v': '' , 'n': '无子级'}
];
```

--------------------------------

### Override Global Options for Timeout

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Set a custom timeout for a specific toast, overriding the global configuration. This allows for varying durations based on message importance.

```javascript
toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})
```

--------------------------------

### Remove Option and Refresh Select

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/bootstrap-select/docs/docs/methods.md

Demonstrates how to remove a specific option from a select element and then refresh the Bootstrap Select UI to reflect the change.

```html
<select class="selectpicker remove-example">
  <option value="Mustard">Mustard</option>
  <option value="Ketchup">Ketchup</option>
  <option value="Relish">Relish</option>
</select>

<button class="btn btn-warning rm-mustard">Remove Mustard</button>
<button class="btn btn-danger rm-ketchup">Remove Ketchup</button>
<button class="btn btn-success rm-relish">Remove Relish</button>
```

```javascript
$('.rm-mustard').click(function () {
  $('.remove-example').find('[value=Mustard]').remove();
  $('.remove-example').selectpicker('refresh');
});
```

--------------------------------

### Including Sub-templates in ArtTemplate

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/art-template/doc/syntax-native.md

Use the include expression to embed one template within another. By default, sub-templates share the same data context. You can also explicitly pass a data object to the included template.

```html
<% include('template_name') %>
```

```html
<% include('template_name', news_list) %>
```

--------------------------------

### Refresh Bootstrap Select UI

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/bootstrap-select/docs/docs/methods.md

Use this method to update the UI after programmatically manipulating the select element, such as adding or removing options, or changing its disabled state.

```javascript
$('.selectpicker').selectpicker('refresh');
```

--------------------------------

### Setting Default Values for Selects

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/fastadmin-cxselect/README.md

Set default selected values for select elements using either the 'selected' attribute on an option or the 'data-value' attribute on the select element itself. 'data-value' takes precedence.

```html
<!--
方法一：使用 option 的 value 和 selected 属性
--> 
<select class="province"> 
  <option value="浙江省" selected>浙江省</option> 
</select> 

<!--
方法二：使用 select 的 data-value 属性
当同时设置 option 的 value 和 select 的 data-value 时，优先使用 data-value 的值
--> 
<select class="province" data-value="浙江省"></select>
```

--------------------------------

### Password Reset Form Structure

Source: https://github.com/0377/yfcmf-tp6/blob/master/app/index/view/user/login.html

This HTML form is used for resetting a user's password. It supports resetting via email or mobile number and includes fields for captcha and the new password. The form submits to the 'api/user/resetpwd' endpoint.

```html
<form id="resetpwd-form" class="form-horizontal form-layer" method="POST" action="{:url('api/user/resetpwd')}"> <div class="form-body"> <input type="hidden" name="action" value="resetpwd" /> <div class="form-group"> <label class="control-label col-xs-12 col-sm-3">{:__('Type')}:</label> <div class="col-xs-12 col-sm-8"> <div class="radio"> <label for="type-email"><input id="type-email" checked="checked" name="type" data-send-url="{:url('api/ems/send')}" data-check-url="{:url('api/validate/check_ems_correct')}" type="radio" value="email"> {:__('Reset password by email')}</label> <label for="type-mobile"><input id="type-mobile" name="type" type="radio" data-send-url="{:url('api/sms/send')}" data-check-url="{:url('api/validate/check_sms_correct')}" value="mobile"> {:__('Reset password by mobile')}</label> </div> </div> </div> <div class="form-group" data-type="email"> <label for="email" class="control-label col-xs-12 col-sm-3">{:__('Email')}:</label> <div class="col-xs-12 col-sm-8"> <input type="text" class="form-control" id="email" name="email" value="" data-rule="required(#type-email:checked);email;remote({:url('api/validate/check_email_exist')}, event=resetpwd, id={$user.id|default=0})" placeholder=""> <span class="msg-box"></span> </div> </div> <div class="form-group hide" data-type="mobile"> <label for="mobile" class="control-label col-xs-12 col-sm-3">{:__('Mobile')}:</label> <div class="col-xs-12 col-sm-8"> <input type="text" class="form-control" id="mobile" name="mobile" value="" data-rule="required(#type-mobile:checked);mobile;remote({:url('api/validate/check_mobile_exist')}, event=resetpwd, id={$user.id|default=0})" placeholder=""> <span class="msg-box"></span> </div> </div> <div class="form-group"> <label for="captcha" class="control-label col-xs-12 col-sm-3">{:__('Captcha')}:</label> <div class="col-xs-12 col-sm-8"> <div class="input-group"> <input type="text" name="captcha" class="form-control" data-rule="required;length(4);integer[+]" /> <span class="input-group-btn" style="padding:0;border:none;"> <a href="javascript:;" class="btn btn-info btn-captcha" data-url="{:url('api/ems/send')}" data-type="email" data-event="resetpwd">{:__('Send verification code')}</a> </span> </div> <span class="msg-box"></span> </div> </div> <div class="form-group"> <label for="newpassword" class="control-label col-xs-12 col-sm-3">{:__('New password')}:</label> <div class="col-xs-12 col-sm-8"> <input type="password" class="form-control" id="newpassword" name="newpassword" value="" data-rule="required;password" placeholder=""> <span class="msg-box"></span> </div> </div> </div> <div class="form-group form-footer"> <label class="control-label col-xs-12 col-sm-3"></label> <div class="col-xs-12 col-sm-8"> <button type="submit" class="btn btn-md btn-info">{:__('Ok')}</button> </div> </div> </form>
```

--------------------------------

### .selectpicker('destroy')

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/bootstrap-select/docs/docs/methods.md

Removes the Bootstrap-Select plugin instance from the selected element, reverting it to a standard select element.

```APIDOC
## .selectpicker('destroy')

### Description
Programmatically destroys the bootstrap-select instance, reverting the element to its original state.

### Method
JavaScript

### Usage
```js
$('.selectpicker').selectpicker('destroy');
```
```

--------------------------------

### Default Easing Options

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Sets the default easing for showing, hiding, and closing toast messages using jQuery's built-in easings.

```javascript
toastr.options.showEasing = 'swing';
toastr.options.hideEasing = 'linear';
toastr.options.closeEasing = 'linear';
```

--------------------------------

### Format Selected Text for Multiple Selects

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/bootstrap-select/docs/docs/examples.md

Control how selected items are displayed in a multiple select using the `data-selected-text-format` attribute. Options include 'values', 'count', 'count > x', and 'static'.

```html
<select class="selectpicker" multiple data-selected-text-format="count">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
```

```html
<select class="selectpicker" multiple data-selected-text-format="count > 3">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option>Onions</option>
</select>
```

--------------------------------

### Enable HTML Escaping

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Configure toastr to escape HTML characters in toast titles and messages. This is a security measure to prevent XSS attacks.

```javascript
toastr.options.escapeHtml = true;
```

--------------------------------

### Encoded Output Expression in ArtTemplate

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/art-template/doc/syntax-native.md

Use this expression to output content with HTML encoding, which helps prevent XSS attacks.

```html
<%=content%>
```

--------------------------------

### .selectpicker('hide')

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/bootstrap-select/docs/docs/methods.md

Programmatically hides the bootstrap-select element. This method only affects the visibility of the select component itself.

```APIDOC
## .selectpicker('hide')

### Description
Programmatically hides the bootstrap-select. This only affects the visibility of the bootstrap-select itself.

### Method
JavaScript

### Usage
```js
$('.selectpicker').selectpicker('hide');
```
```

--------------------------------

### Disable Fade Out with Slimscroll

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/jquery-slimscroll/examples/disable-fade-out.html

Initializes Slimscroll on an element with the fade-out effect disabled. This is useful when you want the scrollbar to remain visible at all times.

```javascript
$('#testDiv2').slimscroll({
  disableFadeOut: true
});
```

--------------------------------

### Enable Close Button

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Add a close button to toasts, allowing users to dismiss notifications manually. This enhances user control.

```javascript
toastr.options.closeButton = true;
```

--------------------------------

### Custom Easing Options with jQuery Easing Plugin

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Overrides default easing with custom animations from the jQuery Easing plugin for showing, hiding, and closing toasts.

```javascript
toastr.options.showEasing = 'easeOutBounce';
toastr.options.hideEasing = 'easeInBack';
toastr.options.closeEasing = 'easeInBack';
```

--------------------------------

### Unencoded Output Expression in ArtTemplate

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/art-template/doc/syntax-native.md

Use this expression to output content without HTML encoding. Be cautious as this can expose your application to XSS attacks if the content is not properly sanitized.

```html
<%=#content%>
```

--------------------------------

### Preventing Duplicate Toasts

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Enables or disables the stacking of identical toast messages. When true, duplicate messages are suppressed.

```javascript
toastr.options.preventDuplicates = true;
```

--------------------------------

### IE7 Multiple Widget Close Handler

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/eonasdan-bootstrap-datetimepicker/docs/Extras.md

JavaScript event handlers to ensure that when one datetimepicker widget is shown, any other visible widgets on the page are hidden. This addresses issues with multiple widgets in IE7.

```javascript
$('#widget1').on("dp.show",function (e) {
	$('#widget2).data('DateTimePicker').hide();
});

$('#widget2').on("dp.show",function (e) {
	$('#widget1).data('DateTimePicker').hide();
});
```

--------------------------------

### Remove All Toasts

Source: https://github.com/0377/yfcmf-tp6/blob/master/public/assets/libs/toastr/README.md

Immediately remove all currently displayed toasts without animation. Use this for clearing the notification area.

```javascript
toastr.remove()
```
Tokens:
Raw