一. 点击YX-WebThemeKit (Home Page)预览;
二. 尝试引入脚本标签到页面,查看意想不到的效果;
所有的组件都可以被通过定制化而重用
- 发现你喜欢的页面头部和脚部;
- 拷贝对应的
html
代码到你自己的html
文件中; - 根据
headerFooter.js
的要求修改你的html
文件; - 引入你修改后的自定义的脚本
headerFooter-[name].js
到你想要的页面;
<!-- Script Theme *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/theme-header-footer/headerFooter-auto.js"></script>
- 支持自定义显示的图片;
- 支持自定义的动画样式;
- 支持自定义载入成功事件;
<!-- Script Preload code *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.min.js?type=split-ssc"></script>
- 在要显示的代码标签上,加上
data-toggle="previewCode"
和data-target="#[targetId]"
,[targetId] 是代码要显示的位置标签Id; - 可选项,自定义代码显示区域的标题,
data-title="titleAboveCode"
;
<!-- Script PreViewCode *** JS-->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-preview-code/previewCode-auto.js" defer></script>
Firstly, you can preview all here YX-WebThemeKit (Home Page).
Secondly, you are suggested to import interested component script code to your page.
All components could be reused with custom.
What you should do is simply import [component-name]-auto.js
to your page.
- Find your favorite header/footer;
- Copy the
html
to yourhtml
file; - Apply
headerFooter.js
rules to yourhtml
file; - Import your custom
headerFooter-[name].js
to the anywhere page you want;
<!-- Script Theme *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/theme-header-footer/headerFooter-auto.js"></script>
- Support custom loading image;
- Support custom animation style;
- Support custom loaded event to end the loading state;
<!-- Script Preload code *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.min.js?type=split-ssc"></script>
- Just set
data-toggle="previewCode"
and target code displaying tagdata-target="#[targetId]"
; - Optional code title's setting with
data-title="titleAboveCode"
;
<!-- Script PreViewCode *** JS-->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-preview-code/previewCode-auto.js" defer></script>
Contact support @gyx8899 email and I will reply as soon as possible.