按照惯例，先介绍一下亮点功能吧。

亮点功能

1. 轻巧简洁的设计风格
2. 轻量化的安装体积（仅100K左右）
3. 全PJAX无刷新操作（欢呼吧）
4. 响应式的布局（不再赘述，可以亲自体验一下）
5. 前台多皮肤更换（cookie会保存设置）
6. 强劲的性能优化（iDevise的优良框架）
7. 随机图片Banner（如果你的环境无法打开banner请留言，下版修改）
8. Ajax评论，剩下的亮点留给爱发现的你吧

获得主题

想着以后还会发布很多主题，于是我做了一个小程序，可以更方便的提供主题下载和其他服务，欢迎大家多多支持我的“笔记商店”，暂时还没有实际内容，如果你也是主题或插件开发者，欢迎你入驻这里，免费设计页面。

WordPress版：https://store.biji.io/item/idevs.html

欢迎广大能手移植到其他平台，免费提供技术支持。

主题声明

主题首次实验性的加入了版权保护机制，请不要擅自删除主题版权，否则可能会引发一系列奇怪的后果。

你可以将版权恢复即可正常使用主题，如果实在无法接受我们的版权保护方式，请尝试更换其他主题。

希望大家能够理解免费主题开发者对版权的在意程度，也非常感谢大家对主题和设计笔记的支持。

更新历史

2016.07.13

• 第一版发布

使用说明

同iDevise主题，因为主题设置面板基本用不上几次，所以我没有对主题添加设置面板功能，而是把相关设置放到了个人资料里面。 友情链接和统计代码添加，请前往后台>用户>我的个人资料，最下方进行编辑，同时，文章和页面结束为止的介绍也是调用的个人资料，所以建议个人资料填写尽可能详细。

这种简单的小功能思路很清晰，就是检测滚动条是不是在顶部，不是的话就显示返回顶部按钮，是的话就把它隐藏。

滚动条监测在新版的主流浏览器中是这样实现的：

document.body.scrollTop

如果想要兼容IE，那么可以加入下面这句完成：

document.documentElement.scrollTop

上面就是最主要的代码了，但是想要实现实时的监测滚动条的位置，我们还需要一个window.onscroll才能完成，这样不断下拉会不断刷新滚动条的位置。

说道这里，你大概已经可以试着写出返回顶部这个功能了。

贴出我的代码吧：

HETM

<a class="back2top" style="display:none;"></a>

CSS

.back2top {z-index:99;background:#000;width:36px;height:36px;display:block;position:fixed;right:20px;bottom:20px;cursor:pointer;border-radius:2px;opacity:.6;}
.back2top:before {content:"";position:absolute;right:8px;top:10px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:15px solid #fff;}

JavaScript

window.onscroll=function(){
    var goTop = document.getElementsByClassName("back2top");
    if(goTop.length>0){
        goTop[0].style.display = document.documentElement.scrollTop >= 200 || document.body.scrollTop >= 200 ? 'block':'none';
        goTop[0].onclick=function(){
            document.body.scrollTop=0;
            document.documentElement.scrollTop=0;
        }
    }
}

getElementsByClassName可能不兼容IE8，如果想向下兼容，可以尝试用getElementById就可以了。

什么是Zepto

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jQuery有着类似的Api。

如果你会用jQuery，那么你一定也会用Zepto。

为什么要用Zepto

使用jQuery最简单的原因大概就是它拥有强大的选择器、出色的DOM操作封装、兼容性，或许你还有其它的原因，但是使用原因最多的无非就上面三种吧，可是jQuery封装的功能实在太多了，导致即使min也拥有不可忽视的体积，而平时最常用到反反复复就那几个，确实可以考虑换一个迁移成本低（最好是不用改货尽可能少改现有代码那就再好不过了）的库了。

Zepto恰好满足这一点，默认支持绝大部分jQuery的Api，含Ajax，也就是说，如果你从jQuery迁移到Zepto，你的代码依然可用，而Zepto的大小也足够令人心动，min版25k，如果gzip压缩后后仅不到10k。

Zepto有哪些拓展

Zepto默认集成了zepto、event、ajax、form、ie五个模块，几乎可以满足常见的应用场景，同时还提供了其它的拓展以满足不同的需求，比如touch对触摸事件的支持，比如tap事件、data提供对.data()方法的完整支持，像jQuery一样用内存对象存储等等，更多的拓展可以去官网或者GitHub上翻阅。

使用中可能会遇到哪些问题

1、兼容性，谈到这，很严肃的告诉你，Zepto仅支持现代浏览器，向下支持IE10，如果想要兼容低版本IE，可以考虑下面为低版本IE引用jQuery，代码如下：

<!--[if lt IE 10]>
    <script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<![endif]-->

2、没有像jQuery那样丰富的动画效果，fade类函数替换成简单的show()基本可以解决，或者去官网添加fx_methods拓展，怎么用请自行研究吧。

3、CSS选择器的支持没有jQuery多，:text :checkbox :first类似的选择器基本可以说拜拜了，不过也有限的支持几个，用到的时候自行搜索。

4、除了体积小，并没有比jQuery好哪里去，如果用了一段时间觉得不好，随时退回jQuery吧

可供参考的链接

http://www.css88.com/doc/zeptojs_api/

http://chaoskeh.com/blog/some-experience-of-using-zepto.html

http://www.imooc.com/note/229?sort=last

总之，对于常见的小数用round函数就可以了，如果round遇到的一些不可预知的问题可以尝试一下其他方法。

sprintf()

sprintf() 函数把格式化的字符串写写入一个变量中

echo sprintf("%.3f", 123456.123456); //123456.123

round()

php集成的函数，如果精度一般，推荐用它

echo round(123456.123456,3); //123456.123

number_format()

利用千位分组来格式化数字的函数，如果精度较大，可以尝试使用它

echo number_format(123456.123456, 3); //123,456.123

大体就是这样了，关于number_format()函数的扩展阅读可以参照： http://www.w3school.com.cn/php/func_string_number_format.asp

jQuery的Dom操作十分简单，在开发iDevs主题的时候，其中“菜单”和“搜索”部分使用到了一些很基本的Dom操作，图方便，我使用了jQuery，闲来无事，尝试着使用原生的js完成这一操作，发现其代码量一样，且原生js效率更高，啰嗦多了，先贴代码。

HTML结构如下：

<input type="button" id="Test" class="menu_click" value="按钮" />

jQuery的Dom实例：

jQuery_btn_click("Test", "menu_click", "menu_close", true);
function jQuery_btn_click(btn, on, off, flag) {
    $('#' + menu).click(function () {
        $('#' + menu).prop('class', (flag = !flag) ? on : off);
    });
}

为了方便，我封装了函数并传了几个有趣的参数，代码量很少，具体传的什么一看便知。

原生Javascript实例：

cover_click("Test", "menu_click", "menu_close", true);
function cover_click(btn, on, off, flag) {
    (btn = document.getElementById(btn)).onclick = function () {
        btn.setAttribute("class", (flag = !flag) ? on : off);
    }
}

就是这样子，原生的方法操作起来与jQuery的代码量几乎一致。

兼容性

兼容性方面，jQuery视版本而定，2.0版本之后已经不再支持IE8-，原生的，我本地测试是支持IE7+，欢迎大家测试一下。

上面只是一个实例，在此记录一下，修修改改还可以完成其他的一些简单的Dom操作，如果有更方便且简单的方法欢迎指出。