新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

设计规范

开发者文档

  • 工具栏默认背景是透明的,一般看到的背景是整个插件的默认背景。当然也可以自己重载背景。
  • 为了和插件容器的顶部更好融合,工具栏里的内容距顶部没有间距,在demo中不是很好看,但是放入千牛容器就会很好看。
  • 工具栏如何实现固定顶部?看这里 固定顶部布局

纯文本

带图标的导航

如何实现工具栏固定在顶部

添加 .navbar-fixed-top 可以让工具栏固定在顶部(因为是position:fixed实现的,注意需要在body上加一个 padding-top: 62px)。
但是因为设计规范要求滚动条应该在工具栏下面出现,所以最好不要直接通过添加 .navbar-fixed-top来实现工具栏固定顶部,而是通过页面的布局来实现只有内容区滚动。
可以参考这个例子:工具栏固定顶部布局

如何实现导航换肤

创建theme.less,加入以下代码

@color-base: #ffffff;
@theme-background-image: url(#);
body {
    background: @theme-background-image @color-base 0px -30px no-repeat;
}

在页面中引入theme.less以及千牛的jssdk.js和less.js

<link rel="stylesheet/less" href="path/to/theme.less">
<script type="text/javascript" charset="utf-8" src="http://g.alicdn.com/sj/qn/??jssdk.js,lib/js/less.js"></script>

调用jssdk的换肤初始化代码

$(window).on('load', function() {
    QN.initTheme();
});

换肤注意事项

如果您使用了cdn,资源文件存放的位置和页面的域不一样,则需要给你您的cdn服务器进行一些配置,在response header 里加上 Access-Control-Allow-Origin: * 以保证您的less文件可以通过ajax访问得到。

引用theme.less时,其的rel属性值必须为stylesheet/less,才能被less识别。

如果你的服务器不支持.less扩展名的文件,你可以将theme.less改为theme.css或其他您的服务器支持的扩展名。

更多换肤参考和注意事项,请阅读千牛换肤文档。

comments powered byDisqus