如何根据您的需求定制框架 [英] How to customize framework for your needs
本文介绍了如何根据您的需求定制框架的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的介绍页面使用的是swiperslider Framework7。我想将完成按钮放在与swiper-arrow-next相同的位置，但具有与arrow-next相同的功能。 完成应该用完全相同的箭头替换，如swiper-arrow-next（相同的样式和大小），它应该只出现在滑块的末尾，所以点击时应该带我登录。
有完整的html，css和js代码;
My intro page is using swiperslider Framework7. I want to put "Done" button on the same place as swiper-arrow-next, but with the same features as arrow-next. "Done" should be replace with exact same arrow like swiper-arrow-next (the same style and size) and it should appear only in the end of slider, so when clicked should take me to login.
There is complete html, css and js code;
<div data-page="intro" class="page navbar-fixed toolbar-fixed">
<!-- Content-->
<div class="page-content">
<!-- Slider container -->
<div class="swiper-container">
<!-- Slides wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
</div>
<!-- Pagination, if required -->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Skip/Done Buttons -->
<span class="intro-button skip"><a href="login.html">Skip</a></span>
<span class="intro-button done"><a href="login.html">Done</a></span>
</div>
<!-- /End of Slider container -->
</div>
</div>
div[data-page=intro] {
.page-content {
padding-top: 0 !important;
}
.swiper-container {
height: 100%;
}
.swiper-slide {
position: relative;
width: 100%;
height: 100%;
background: #fff;
text-align: center;
img {
max-width: 80%;
margin-top: 20vh;
}
span {
display: block;
width: 100%;
margin-top: 40px;
padding: 0 15%;
text-align: center;
font-size: 20px;
color: $color-brand-1;
}
}
.swiper-button-next {
> .done {
display: none;
}
&.swiper-button-disabled {
background-image: none;
opacity: 1;
pointer-events: auto;
& + .intro-button + .done {
display: block;
}
}
}
.intro-button {
position: absolute;
bottom: 10px;
font-size: 20px;
color: $color-brand-1;
cursor: pointer;
z-index: 999;
&.skip {
left: 20px;
}
&.done {
display: none;
right: 20px;
}
}
}
.touchevents {
.swiper-button-next,
.swiper-button-prev {
display: none;
}
.swiper-button-next.swiper-button-disabled {
display: block;
}
}
<pre lang="Javascript"> (function ($, document, window) {
'use strict';
// Now we need to run the code that will be executed only for Feature page.
myApp.onPageInit('intro', function (page) {
var makeApiRequest = window.makeApiRequest;
// Display splash screen
splashScreen();
// Initiate Slider
makeApiRequest('sliders', null, 'GET', true).done(buildSlider).done(initiateSlider);
// build slider
function buildSlider(slidesArr) {
var slider = slidesArr.sliders;
var sliderHTML = '';
$.each(slider, function (i) {
sliderHTML += '<div class="swiper-slide">';
// images need to have proportion of 700x907
sliderHTML += '<img src="' + slider[i].image + '" />';
sliderHTML += '<span>' + slider[i].description + '</span>'
sliderHTML += '<div class="preloader"></div>';
sliderHTML += '</div>';
});
$('.swiper-wrapper').html(sliderHTML);
}
// show splash screen for 2 seconds
function splashScreen() {
var splashHTML = '<div class="splash-wrapper"><img src="images/splash.png" class="splash" /></div>';
$('#wrapper').prepend(splashHTML);
var hideSplash = function () {
$('.splash-wrapper').remove();
};
setTimeout(hideSplash, 2000);
}
// initiate framework7 slider
function initiateSlider() {
// initiate slider
var mySwiper = new Swiper('.swiper-container', {
speed: 400,
preloadImages: false,
lazyLoading: true,
pagination: '.swiper-pagination',
paginationHide: false,
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});
// disable swiping on desktop
if (!myApp.support.touch) {
$('.swiper-container').addClass('swiper-no-swiping');
}
}
});
}(jQuery, document, window));
我尝试了什么：
我在试图改变成箭头时迷路了...并且它的位置
What I have tried:
I'm getting lost when trying to change done to be an arrow... and position of it
推荐答案
color-brand-1;
}
}
.swiper-button-next {
> .done {
display：none;
}
& .swiper-button-disabled {
background-image：none;
不透明度：1;
指针事件：auto;
& + .intro-button + .done {
display：block;
}
}
}
.intro-button {
position：absolute;
底部：10px;
字体大小：20px;
color：
color-brand-1; } } .swiper-button-next { > .done { display: none; } &.swiper-button-disabled { background-image: none; opacity: 1; pointer-events: auto; & + .intro-button + .done { display: block; } } } .intro-button { position: absolute; bottom: 10px; font-size: 20px; color:
color-brand-1;
cursor：pointer;
z-index：999;
& .skip {
left：20px;
}
& .done {
display：none;
右：20px;
}
}
}
.touchevents {
.swiper-button-next，
.swiper-button-prev {
display：none;
}
.swiper-button-next.swiper-button-disabled {
display：block;
}
}
< pre lang = Javascript > （function（
color-brand-1; cursor: pointer; z-index: 999; &.skip { left: 20px; } &.done { display: none; right: 20px; } } } .touchevents { .swiper-button-next, .swiper-button-prev { display: none; } .swiper-button-next.swiper-button-disabled { display: block; } } <pre lang="Javascript"> (function (
，document，window）{
'use strict';
//现在我们需要运行仅针对Feature页面执行的代码。
myApp.onPageInit（'intro' ，function（page）{
var makeApiRequest = window.makeApiRequest;
//显示启动画面
splashScreen（）;
//启动Slider
makeApiRequest（'sliders'，null，'GET'，true）.done（buildSlider）.done（initiateSlider）;
//构建滑块
function buildSlider（slidesArr）{
var slider = slidesArr.sliders;
var sliderHTML ='';
, document, window) { 'use strict'; // Now we need to run the code that will be executed only for Feature page. myApp.onPageInit('intro', function (page) { var makeApiRequest = window.makeApiRequest; // Display splash screen splashScreen(); // Initiate Slider makeApiRequest('sliders', null, 'GET', true).done(buildSlider).done(initiateSlider); // build slider function buildSlider(slidesArr) { var slider = slidesArr.sliders; var sliderHTML = '';
这篇关于如何根据您的需求定制框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
