什么是属性?
属性是一个开源 JavaScript 库,包含用于添加过滤器,排序,加载和搜索选项,CMS分页和滑行器的解决方案,以及更多使用简单的HTML属性向Web流量.
开始
请注意这里的文件 fisweet.com/属性 互联网档案馆的存檔,存档日期2013-10-02 在 Webflow 项目中学习如何使用属性.
API 参考
属性将注入全局 window.FinsweetAttributes 对象输入包含一些与库互动的方法的项目.
在尝试访问库前确保库内装入 window.FinsweetAttributes 对象,可以使用下列即时代码:
window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push([
'ATTRIBUTE_KEY', // 'list', 'copyclip', 'modal', etc.
(result) => {
// Your code goes here.
},
]);
结果对象将包含已装入属性解决方案的 API. 检查 README.md 每个属性解决方案的文档,以获取关于 API 的更多信息.
这个 FinsweetAttributes 对象
属性
| 财产 | 类型 | 说明 |
|---|---|---|
process | Set | 包含当前活动属性解决方案. |
modules | Object | 一个包含每个活动属性解决方案控件的密钥值对象。 每个键是相应的属性键,每个值是一个 Finsweet 属性控制 对象. |
utils | Object | 包含与属性合作的功能. |
方法
| 方法 | 说明 | 参数 |
|---|---|---|
push([key, callback]) | 在属性装入后运行回调 . | key (string): 属性密钥.callback (function):召回函数. |
load(key) | 动态加载属性解决方案 . | key (string): 属性密钥. |
destroy() | 破坏实例和所有属性解决方案. |
这个 FinsweetAttributeControls 对象
属性
| 财产 | 类型 | 说明 |
|---|---|---|
version | string | 属性的版本. |
loading | Promise | 一旦属性装入并返回其 API , 就可以解决的承诺 . |
方法
| 方法 | 说明 | 参数 |
|---|---|---|
restart() | 恢复属性 在实践中,这意味着属性会被再被销毁并装入. | |
destroy() | 摧毁属性. |
这个 FinsweetAttributes.utils 对象
type FinsweetAttributesUtils = {
/**
* Fetches and parses an external page.
* Stores the page response in an IndexedDB if the page belongs to the same site.
*
* @param source The URL of the page to fetch
* @param options Optional configuration object
* @returns Promise that resolves to the page's Document if successful, null otherwise
*/
fetchPage: (
source: string | URL,
options?: {
cache?: boolean; // Whether to cache fetched documents. Defaults to `true`
cacheExternal?: boolean; // Whether to cache external documents using a stale-while-revalidate strategy
cacheKey?: string; // Manual database name for the IndexedDB instance
cacheVersion?: number; // Manual version for the IndexedDB instance
}
) => Promise<Document | null> | null;
/**
* Attaches external stylesheets from a fetched page to the current document head.
* Only attaches stylesheets hosted on the Webflow Assets CDN that aren't already present.
*
* @param page The Document object from which to extract stylesheets
* @returns Promise that resolves when all stylesheets have been attached
*/
attachExternalStylesheets: (page: Document) => Promise<void>;
};