v2.5.2
Giriş yap

jquery ile css switcher uygulamasını cookie kaydetme

Anonim
790 defa görüntülendi ve 3 kişi tarafından değerlendirildi

Kullanıcıya css dosyasını seçme şansı veren bir html tema üzerinde çalışıyorum fakat jquery kodlarında cookie kaydı yok. bu sebeple cookie kaydı olmadığı için her sayfada defult oluyor. jquery bilgisi olan biri yardımcı olabilirse çok mutlu olurum.

$(document).ready(function() {

$('#config-trigger').click(function(e){
	
	e.preventDefault();
	
	$("#config-panel").toggleClass('config-panel-open');
	
	if($(this).hasClass('config-panel-open')){
      $("#config-panel").animate({
        right: "-=160" //same as the panel width
       }, 500);
      $(this).removeClass('config-panel-open').addClass('config-panel-hide');
     }
     else {      
     $("#config-panel").animate({
       right: "+=160" //same as the panel width
       }, 500);
      $(this).removeClass('config-panel-hide').addClass('config-panel-open');    
     }
});

$('#config-close').on('click', function(e) {
    e.preventDefault();
    $('#config-trigger').click();
});


$('#color-options a').on('click', function(e) { 
    var $styleSheet = $(this).attr('data-style');
    
	$('#theme-style').attr('href', $styleSheet);
			
	var $listItem = $(this).closest('li');
	$listItem.addClass('active');
	$listItem.siblings().removeClass('active');
	
	e.preventDefault();
	
	
});
});


HTML kodları da şu şekilde

<div id="config-panel" class="config-panel d-none d-lg-block">
<div class="panel-inner">
    <a id="config-trigger" class="config-trigger config-panel-hide text-center" href="#"><i class="fas fa-book" data-fa-transform="down-6" ></i></a>
    <h5 class="panel-title">Okuma Modu</h5>
    <ul id="color-options" class="list-inline mb-0">
        <li class="theme-1 active list-inline-item"><a data-style="assets/css/theme-1.css" href="#"></a></li>
        <li class="theme-2  list-inline-item"><a data-style="assets/css/theme-2.css" href="#"></a></li>
    </ul>
</div>

</div>

mkaya
1839 gün önce

Merhabalar,
Ayrica cookies yerine HTML5 Web depolama kullanabilirsiniz.
HTML5 Web Storage(Web Depolama) Nedir?