sitePage .js
介绍
建议不仅是功能请求，而且还用于改进编码样式。让我们成为一个很棒的图书馆，以使人们的生活更轻松！
兼容性
sitePage对所有现代浏览器都充分发挥作用。它还为手机，平板电脑和触摸屏计算机提供触摸支持。
执照
开源许可证
如果要根据与GPL兼容的许可证创建开源应用程序，则可以根据GPL条款使用sitePage 。
JavaScript和CSS文件中的信用评论应保持完整（即使在组合或缩小之后）
用法
如您在示例文件中看到的那样，您需要包括：
- JavaScript文件
sitePage（或其缩小版本sitePage .min.js） - CSS文件
https://stackpath.bootst*rap*cd*n.com/bootstrap/4.4.1/css/bootstrap.min.css - CSS文件
sitePage .min.css
使用NPM安装
可选地，如果您愿意，可以使用Bower或NPM安装sitePage ：
终端：
sitePage.js\”>
// With npm npm install sitePage .js
包括文件：
sitePage.min.css\” />
<script type=\”text/javascript\” src=\” sitePage .min.js\”></script>\”>
< link rel =\" stylesheet \" href =\" https://stackpath.bootst*rap*cd*n.com/bootstrap/4.4.1/css/bootstrap.min.css \" integrity =\" sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh \" crossorigin =\" anonymous \" > < link rel =\" stylesheet \" type =\" text/css \" href =\" sitePage .min.css \" /> < script type =\" text/javascript \" src =\" sitePage .min.js \" > </ script >
可选使用CDN
sitePage.min.js\”></script>
<link rel=\”stylesheet\” type=\”text/css\” href=\”https://cdn.j**sdel*ivr.net/npm/sitePage.js@3.1.2/dist/style/ sitePage .min.css\” />\”>
< script type =\" text/javascript \" src =\" https://cdn.j*s*de*livr.net/npm/sitePage.js@3.1.2/dist/ sitePage .min.js \" > </ script > < link rel =\" stylesheet \" type =\" text/css \" href =\" https://cdn.j**sdel*ivr.net/npm/sitePage.js@3.1.2/dist/style/ sitePage .min.css \" />
所需的HTML结构
使用强制性HTML Doctype声明在您的HTML代码的第一行中启动您的HTML文档。否则，您可能会遇到麻烦。提供的示例使用HTML 5 Doctype <!DOCTYPE html> 。
每个部分将使用包含section类别的元素定义。默认情况下，活动部分将是第一部分，该部分被视为主页。
部分将放置在包装器中（在这种情况下为<div id=\" sitePage \"> ）。包装器不能成为body元素。
sitePage\”>
</div>\”>
< div id =\" sitePage \" > </ div >
您可以在index.html文件中看到HTML结构的完全工作示例。
初始化
用香草JavaScript初始化
您需要做的就是在关闭</body>标签之前致电站点sitePage 。
注意：版本3.1.4中添加的各节中的新属性PageID，这将有助于URL使更有意义
sitePage \”, {
//brandname
brandName: \”\”,
brandLogoUrl:\”\”,//
backgroundColor:\”#45b4f5\”,
verticalAlignMiddle: true, // By default it would be true
//sections
sections: [{
pageId:\”home\”,
anchor: \”Home\”,
template: \”<h1>Home</h1>\”,
backgroundColor: \”#45b4f5\”,
},
{
pageId:\”feature\”,
anchor: \”Features\”,
templateId: \”feature\”,
backgroundColor: \”#fc6c7c\”
},
{
pageId:\”contact\”,
anchor: \”Contact Us\”,
template: \”<h1>Contact Us</h1>\”,
backgroundColor: \”#1bbc9b\”
}
],
//navigation
anchors:true,//true|false
navigation: \’horizontal\’,//horizontal|vertical
sameurl: true,//true|false
hamburger:true,//true|{lineColor:\”\”,backgroundColor:\”\”,closeOnNavigation:true}
pageIndicator:true,//true|false; Default is true
//transition
easing: \”ease\”,//ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)
transitionSpeed: 1000,//speed in ms
//scrolling
autoScrolling: true,//true|false
keyboardNavigation: true,//true|false
//callback events
pageTransitionStart: (prevPage, currentPage) => {
console.log(`prevPage: ${prevPage ? prevPage.id : \”\”} currentPage :${currentPage.id}`);
},
pageTransitionEnd: (currentPage) => {
console.log(`currentPage :${currentPage.id}`);
}
});
\”>
new sitePage ( \" sitePage \" , { //brandname brandName : \"\" , brandLogoUrl : \"\" , // backgroundColor : \"#45b4f5\" , verticalAlignMiddle : true , // By default it would be true //sections sections : [ { pageId : \"home\" , anchor : \"Home\" , template : \"<h1>Home</h1>\" , backgroundColor : \"#45b4f5\" , } , { pageId : \"feature\" , anchor : \"Features\" , templateId : \"feature\" , backgroundColor : \"#fc6c7c\" } , { pageId : \"contact\" , anchor : \"Contact Us\" , template : \"<h1>Contact Us</h1>\" , backgroundColor : \"#1bbc9b\" } ] , //navigation anchors : true , //true|false navigation : \'horizontal\' , //horizontal|vertical sameurl : true , //true|false hamburger : true , //true|{lineColor:\"\",backgroundColor:\"\",closeOnNavigation:true} pageIndicator : true , //true|false; Default is true //transition easing : \"ease\" , //ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n) transitionSpeed : 1000 , //speed in ms //scrolling autoScrolling : true , //true|false keyboardNavigation : true , //true|false //callback events pageTransitionStart : ( prevPage , currentPage ) => { console . log ( `prevPage: ${ prevPage ? prevPage . id : \"\" } currentPage : ${ currentPage . id } ` ) ; } , pageTransitionEnd : ( currentPage ) => { console . log ( `currentPage : ${ currentPage . id } ` ) ; } } ) ;
选项
一般的
- Brandname：网站的徽标标题。此选项是可选的
brandName : \"Logo Title\" ,
- 背景色：网站的背景颜色。如果您不想为每个部分提供背景颜色，则此选项是可选的，您可以提及背景色。
backgroundColor : \"#ffffff\" ,
- 垂直Alignmiddle：默认情况下它是真实的，并应用于所有部分。它将垂直对齐内容。
verticalAlignMiddle : false ,
导航
- 锚：设置为true | false。如果您需要一个菜单将其设置为true（通过defaul为false），并且如果不需要将其设置为false。
- Sameurl：设置为true | false。在导航URL时会更改导航：“垂直”，//水平|垂直汉堡包：{linecolor：“”，//汉堡颜色的汉堡背景颜色：“
- 汉堡：如果需要菜单为defaul，则设置true或以下属性，它是false {lineColor：“”，backgroundColor：“”，CloseonNavigation：true}
部分
sections : [ { active : true , //set active|false anchor : \"string\" , //link name templateId : \"string\" //Id of the template element which to be render templateUrl : \"stringUrl\" , //use template or templateUrl template : \"string\" , //use template or templateUrl backgroundColor : \"string\" , verticalAlignMiddle : boolean , //By default it would be false, true|false sectionClass : \"class1,class2\" //comma separated string or string array class to be apply on sections anchorClass : \"class1,class2\" //comma separated string or string array class to be apply on sections } ] ,
过渡
easing : \"string\" , //ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n) transitionSpeed : 1000 , //speed in ms
滚动
autoScrolling : boolean , //By default it would be false, true|false keyboardNavigation : boolean , //By default it would be false, true|false
回调事件
pageTransitionStart: ( prevPage : HtmlElement , currentPage : HtmlElement ) => { } pageTransitionEnd: ( currentPage : HtmlElement ) => { }
公共API
sitePage 3.0.0已暴露于sitePage .js的更多控制
- gotopage（pageid：string）;
- navigateTonextPage（）;
- navigateTopRevpage（）;
- getMenuitems（）;
- getActivesection（）;
sitePage (id,options);
sitePage .api.gotoPage(\’page3\’);
sitePage .api.navigateToNextPage();
sitePage .api.navigateToPrevPage();
sitePage .api.getMenuItems();
sitePage .api.getActivePage();\”>
//for example var sitePage = new sitePage ( id , options ) ; sitePage . api . gotoPage ( \'page3\' ) ; sitePage . api . navigateToNextPage ( ) ; sitePage . api . navigateToPrevPage ( ) ; sitePage . api . getMenuItems ( ) ; sitePage . api . getActivePage ( ) ;
报告问题
为sitePage做出贡献
ChangElog
要查看最近的更改列表，请参见发行部分。
资源
捐赠
捐款将非常受欢迎:)
赞助商
成为赞助商，并在Github上获得徽标，并在Github上使用指向您网站的链接。 [成为赞助商]
