{"id":13670293,"url":"https://github.com/huruji/Hlayer","last_synced_at":"2025-04-27T09:32:26.966Z","repository":{"id":57264549,"uuid":"81111786","full_name":"huruji/Hlayer","owner":"huruji","description":"HLayer——easyuse、no-dependence web layer","archived":false,"fork":false,"pushed_at":"2018-04-10T18:15:31.000Z","size":6899,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-10T05:17:38.035Z","etag":null,"topics":["dialog","hlayer","layer","layers"],"latest_commit_sha":null,"homepage":"https://huruji.github.io/Hlayer/test/index.html","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/huruji.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-06T17:16:03.000Z","updated_at":"2021-03-04T13:52:50.000Z","dependencies_parsed_at":"2022-08-25T02:20:31.430Z","dependency_job_id":null,"html_url":"https://github.com/huruji/Hlayer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huruji%2FHlayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huruji%2FHlayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huruji%2FHlayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huruji%2FHlayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huruji","download_url":"https://codeload.github.com/huruji/Hlayer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224067087,"owners_count":17250109,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dialog","hlayer","layer","layers"],"created_at":"2024-08-02T09:00:38.073Z","updated_at":"2024-11-11T07:31:22.881Z","avatar_url":"https://github.com/huruji.png","language":"HTML","readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"./hlayer.png\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/huruji/Hlayer/network\"\u003e\n        \u003cimg src=\"https://img.shields.io/github/forks/huruji/Hlayer.svg\"\n             alt=\"forks\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/huruji/Hlayer/stargazers\"\u003e\n        \u003cimg src=\"https://img.shields.io/github/stars/huruji/Hlayer.svg\"\n             alt=\"stars\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/huruji/Hlayer/issues\"\u003e\n            \u003cimg src=\"https://img.shields.io/github/issues/huruji/Hlayer.svg\"\n                 alt=\"issues\"\u003e\n        \u003c/a\u003e\n    \u003ca href=\"#\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/CSS-module-green.svg\"\n             alt=\"css\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"#\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/HTML-module-brightgreen.svg\"\n             alt=\"HTML\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"#\"\u003e\n            \u003cimg src=\"https://img.shields.io/badge/Size-mini-yellow.svg\"\n                 alt=\"HTML\"\u003e\n        \u003c/a\u003e\n    \u003ca href=\"#\"\u003e\n            \u003cimg src=\"https://img.shields.io/badge/gulp-workflow-blue.svg\"\n                         alt=\"gulp\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"#\"\u003e\n                \u003cimg src=\"https://img.shields.io/badge/Eslint-standard-green.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"#\"\u003e\n                \u003cimg src=\"https://img.shields.io/badge/Author-huruji-ff69b4.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"#\"\u003e\n                    \u003cimg src=\"https://img.shields.io/badge/Version-0.0.1-blue.svg\"\u003e\n        \u003c/a\u003e\n\n\u003c/p\u003e\n\n# Hlayer\n\n[以中文查看](./README_zh-CN.md)\n\n## Install\n\ninstall with npm\n\n```sh\nnpm install hlayer\n```\n\ninstall width yarn\n\n```sh\nyarn add hlayer\n```\n\n## Import\n\n```js\n// ES6\nimport hlayer from 'hlayer',\nimport 'hlayer/dist/hlayer.css'\n```\n\nor link as a `script` and `link` in an html file.\n\n```js\n\u003clink href=\"dist/hlayer.css\"\u003e\u003c/link\u003e\n\u003cscript src=\"dist/hlayer.js\"\u003e\u003c/script\u003e\n```\n\nor with require.js\n```js\ndefine(['hlayer'], function(hlayer){\n  // your code\n})\n```\n## How to use\n\nHlayer include a global variable 'hlayer', and this variable include all APIS.\n\nJust like this, you can use function 'msg'\n\n```js\nhlayer.msg({text: 'message'})\n```\n\nEvery function include many params, you can see API\n\n## API\n\n### 1.msg\n\nThe simplest alert.\n\nThe params:\n\n```js\ncontentBg: String  // the background color of content, default #fff\ncontentColor: strgin   // the font color of content, defulat #000\nanimateType: Number  // the animation type, include 1-9, default 1\nposition: Number or 'random' // the position type, include 0-6, default 0\nshadow: Bollean   // shadow or not, default true\nicon: Number    // the icon type, include 1-8, default false\ntext: String   // the content\nwidth: String   // layer width, default auto\nheight: String   // layer height, default '50px'\ntime: Number     // time of show, default 2000, if 'false', the layer can't close auto\n```\n\n### 2.alert\n\nThe alert with title and buttons.\n\nThe params:\n\n```js\ncontentBg: String  // the background color of content, default #fff\ncontentColor: strgin   // the font color of content, defulat #000\nanimateType: Number  // the animation type, include 1-9, default 1\nposition: Number or 'random' // the position type, include 0-6, default 0\nresize: Bollean   // resize position with window resized, default true\nshadow: Bollean   // shadow or not, default true\nicon: Number    // the icon type, include 1-8, default false\ntext: String   // the content\nwidth: String   // layer width, default '260px'\nheight: String   // layer height, default '148px'\ntime: Number     // time of show, default 2000, if 'false', the layer can't close auto\nmainBg: String    // background color of title\nmainColor: String   // font color of title\ntitle: String   // title Content\ncloseBtn: Bollean  // need close button or not, default true\nmove: Bollean   // can drag layer or not, default true\nconfirmBtn: Bollean  // need confirm button or not, default true\nconfirmCb: Function   // the callback of confirm button\ncancelBtn: Function   // need cancel buttton or not, default false\nbtn: Array    // the Btns you need\nbtnCb: Array   // the callbacks of btns\n```\n\n### 3.loading\n\nThe loading alert.\n\nThe params:\n\n```js\nanimateType: Number  // the animation type, include 1-9, default 1\nposition: Number or 'random' // the position type, include 0-6, default 0\nresize: Bollean   // resize position with window resized, default true\nshadow: Bollean   // shadow or not, default true\ntime: Number     // time of show, default 2000,\nloadingType: Number    // include 1-4, default 1\nloadingColor: String  //  the color, default #169FE6\n```\n\n### 4.iframe\n\nThe params:\n\n```js\nanimateType: Number  // the animation type, include 1-9, default 1\nposition: Number or 'random' // the position type, include 0-6, default 0\nresize: Bollean   // resize position with window resized, default true\nshadow: Bollean   // shadow or not, default true\nwidth: String   // layer width, default '700px'\nheight: String   // layer height, default '500px'\ntime: Number     // time of show, default false,\nmainBg: String    // background color of title， default #169FE6\nmainColor: String   // font color of title， default #fff\ntitle: String   // title Content\ncloseBtn: Bollean  // need close button or not, default true\nmove: Bollean   // can drag layer or not, default true\nurl: String     // website url\n```\n\n### 5.form\n\nThe params:\n\n```js\ncontentBg: String  // the background color of content, default #fff\ncontentColor: strgin   // the font color of content, defulat #000\nanimateType: Number  // the animation type, include 1-9, default 1\nposition: Number or 'random' // the position type, include 0-6, default 0\nresize: Bollean   // resize position with window resized, default true\nshadow: Bollean   // shadow or not, default true\ntext: String   // the content\nwidth: String   // layer width, default '260px'\nheight: String   // layer height, default '148px'\ntime: Number     // time of show, default false\nmainBg: String    // background color of title\nmainColor: String   // font color of title\ntitle: String   // title Content\ncloseBtn: Bollean  // need close button or not, default true\nmove: Bollean   // can drag layer or not, default true\nconfirmBtn: Bollean  // need confirm button or not, default true\nconfirmCb: Function   // the callback of confirm button\ncancelBtn: Function   // need cancel buttton or not, default false\nbtn: Array    // the Btns you need\nbtnCb: Array   // the callbacks of btns\nformType: Number     // include 1-5 default 1\noptions: Object  // only use when formType is 4 or 5, like {name:'sex', inputs: ['male', 'female']}\nallowEmpty: Bollean  // can be empty, defult true\n\n```\n\n### 6.photo\n\nuse like slider alert\n\nThe params:\n\n```js\nanimateType: Number  // the animation type, include 1-9, default 1\nposition: Number or 'random' // the position type, include 0-6, default 0\nresize: Bollean   // resize position with window resized, default true\nshadow: Bollean   // shadow or not, default true\nautoPlay: Bollean  // play auto, default false\nplayTime: Number  // default 5000\nphotos: Array    // like [{img: '1.jpg', text: 'hello'}, {img: '2.jpg', text: 'world'}]\n```\n\n### 7.tips\n\ntips alert\n\nThe params:\n\n```js\ncontentBg: String  // the background color of content, default #fff\ncontentColor: strgin   // the font color of content, defulat #000\nanimateType: Number  // the animation type, include 1-9, default 1\nposition: String // only use 'left', 'top', 'right', 'left'\nicon: Number    // the icon type, include 1-8, default false\ntext: String   // the content\nwidth: String   // layer width, default auto\nheight: String   // layer height, default '40px'\ntime: Number     // time of show, default 2000, if 'false', the layer can't close auto\n```\n\n### 8.music\n\nmusic alert\n\nThe params:\n\n```js\ncontentBg: String  // the background color of content, default #fff\ncontentColor: strgin   // the font color of content, defulat #000\nanimateType: Number  // the animation type, include 1-9, default 1\nposition: Number or 'random' // the position type, include 0-6, default 0\nshadow: Bollean   // shadow or not, default true\nresize: Bollean   // resize position with window resized, default true\ntime: Number     // time of show, default false\nmainBg: String    // background color of title\nmainColor: String   // font color of title\ntitle: String   // title Content\ncloseBtn: Bollean  // need close button or not, default true\nmove: Bollean   // can drag layer or not, default true\nphotos: String   // img of music\nurl: String   // music url\nautoPlay: Bollean // default true\n```\n\n### 9.music\n\nmusic alert\n\nThe params:\n\n```js\ncontentBg: String  // the background color of content, default #fff\ncontentColor: strgin   // the font color of content, defulat #000\nanimateType: Number  // the animation type, include 1-9, default 1\nposition: Number or 'random' // the position type, include 0-6, default 0\nshadow: Bollean   // shadow or not, default true\nresize: Bollean   // resize position with window resized, default true\ntime: Number     // time of show, default false\nmainBg: String    // background color of title\nmainColor: String   // font color of title\ntitle: String   // title Content\ncloseBtn: Bollean  // need close button or not, default true\nmove: Bollean   // can drag layer or not, default true\nphotos: String   // img of music\nurl: String   // music url\nautoPlay: Bollean // default true\n```\n\n### 10.open\n\nuse this like\n\n```js\nhlayer.open({type: 'msg', //other msg params})\n```\n\n### 11.remove\n\nremove the layer\n\nyou can use to remove a layer\n\n```js\nvar layer1 = hlayer.msg();\nhlayer.remove(layer1)\n```\n\nyou can use to remove many layers\n\n```js\nvar layer1 = hlayer.msg();\nvar layer2 = hlayer.msg();\nhlayer.remove(layer1, layer2)\n```\n\nyou can use to close all layers\n\n```js\nhalyer.remove();\n```","funding_links":[],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuruji%2FHlayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuruji%2FHlayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuruji%2FHlayer/lists"}