Question

您好我正在使用名为pickadate.js的jQuery插件。但我无法得到如何改变主题。有两个主题默认和经典。我想把它改成经典。

Answer 1

您只需为所需主题添加主题CSS ... Docs are here

如果您希望主题选择器显示插件主页..请检查this pages source ...

HTML：

<span class="menu__link">
  Themes: 
  <input class="theme-toggle__input" type="radio" id="show_theme_default" name="show_theme" value="default" checked hidden>
  <label class="theme-toggle__label" for="show_theme_default">default</label> and 
  <input class="theme-toggle__input" type="radio" id="show_theme_classic" name="show_theme" value="classic" hidden>
  <label class="theme-toggle__label" for="show_theme_classic" class="checked-negative">classic</label>
</span>

JavaScript的：

var themeSelected = window.localStorage ? localStorage.getItem( 'theme' ) : '',
    $themeLinks = $( '#theme_base, #theme_date, #theme_time' ),
    updateStylingLinks = function( value ) {
        value = value || 'default'
        $( '#show_theme_' + value ).attr( 'checked', true )
        $themeLinks.detach()
        $themeLinks.each( function() {
            this.href = this.href.replace( /(.+\/)(\w+)(.+)/, '$1' + value + '$3' )
        })
        $themeLinks.appendTo( 'head' )
    }

if ( themeSelected ) {
    updateStylingLinks( themeSelected )
}

$( '[name=show_theme]' ).on( 'change', function() {
    var value = this.value
    updateStylingLinks( value )
    if ( window.localStorage ) {
        localStorage.setItem( 'theme', value )
    }
})

Answer 2

主题

所有主题都是使用LESS生成的，并编译到lib / themes中   文件夹中。


只需要一个基本样式表。选择一个主题，然后也包括相应的选择器。

Answer 3

我的目标是根据用户是在移动设备（默认主题）还是在桌面（经典主题）上使用这两个主题。

如果不修改他们的.LESS文件（对于版本升级非常重要），我会在不同的CSS名称空间中对它们进行变形，如下所示 -

@import "../bower_components/pickadate/lib/themes-source/_variables.less";
@import "../bower_components/pickadate/lib/themes-source/base.less";
@import "../bower_components/pickadate/lib/themes-source/base.date.less";

body.pickadate--default {
    @import "../bower_components/pickadate/lib/themes-source/default.less";
    @import "../bower_components/pickadate/lib/themes-source/default.date.less";
}
body.pickadate--classic {
    @import "../bower_components/pickadate/lib/themes-source/classic.less";
    @import "../bower_components/pickadate/lib/themes-source/classic.date.less";
}

然后使用JavaScript，我根据屏幕大小添加/删除CSS类 -

var isDesktop = Modernizr.mq('(min-width: 768px)'); //Modernizr media queries

if (isDesktop) {
    $("body").addClass("pickadate--classic");
    $("body").removeClass("pickadate--default");
} else {
    $("body").addClass("pickadate--default");
    $("body").removeClass("pickadate--classic");
}

注意：确保也在window.resize上调用JS函数。

如何更改jQuery pickadate主题

3 个答案: