2

嗨，我正在使用名为pickadate.js的 jQuery 插件。但我不知道如何改变主题。有两个主题默认和经典。我想把它改成经典。

4

3 回答 3

1

您只需包含所需主题的主题 CSS ...文档在这里

如果您想要插件主页所示的主题选择器..检查此页面源...

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 )
    }
})
于 2013-06-06T10:41:11.057 回答
1

主题

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

  • 一个且只有一个基本样式表是必需的。选择一个主题，然后包括相应的选择器。
于 2013-06-06T10:41:45.277 回答
0

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

在不修改他们的 .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 函数。

于 2016-10-18T04:22:11.937 回答