Q(window).scroll(function() {
if ((Q(window).scrollTop() + Q(window).height() > Q(document).height() - 40)) {
// do something
}
});
Archives for : 前端
线上效果可以用手机浏览有赞社区的这个帖（点击帖内图片后左右滑动）：http://bbs.youzan.com/forum.php?mod=viewthread&tid=47601
js
/**
* 场景: 手机浏览论坛帖子，左右滑动查看楼层图片
* Author: zhugao
* 注意：例中的 ’.message' 为每个楼层的容器
*/
var swipers = {};
function showSwiperImg(options) {
var swiperId = 'js-swiper-' + options.pid;
// 如果该楼层的swiper已经实例化
if ($('#' + swiperId).size() > 0) {
// 定位到当前点击的图片
swipers[options.pid].slideTo(options.slideIndex, 0);
// 直接显示该swiper
$('#' + swiperId).fadeIn(200);
} else {
// append容器
var swiperContainer = $(
'<div class="swiper-container" id="' + swiperId + '">' +
' <div class="swiper-wrapper"></div>' +
'</div>'
);
swiperContainer.hide().appendTo('body').fadeIn(200);
// append内容
$(options.elem).parents('.message').find('img').each(function() {
var imageSource = $(this).data('img-source');
var swiperSlide = $(
'<div class="swiper-slide">' +
' <img data-src="' + imageSource + '" class="swiper-lazy">' +
' <div class="swiper-lazy-preloader"></div>' +
'</div>'
);
swiperSlide.appendTo('#' + swiperId + ' .swiper-wrapper');
});
// 实例化swiper
swipers[options.pid] = new Swiper('#' + swiperId, {
// 间隔
spaceBetween: 20,
// 开启图片延迟加载
lazyLoading : true,
// 点击swiper
onTap: function() {
$('#' + swiperId).fadeOut(200);
},
// 单个图片加载结束
onLazyImageReady: function(swiper, slide, image) {
// 移除loading
$(slide).find('.swiper-lazy-preloader').remove();
}
});
// 定位到当前点击的图片
swipers[options.pid].slideTo(options.slideIndex, 0);
}
}
// 调用
$('.message').on('click', 'img', function() {
// 图片所在的楼层
var pid = $(this).parents('li').attr('id');
// 点击了第几张小图
var slideIndex = $(this).parents('.message').find('img').index(this);
var options = {
elem: this,
pid: pid,
slideIndex: slideIndex
};
showSwiperImg(options);
});
css
.swiper-container {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
}
.swiper-slide {
text-aling: center;
/* 图片垂直居中 */
display: -webkit-box;
-webkit-box-align: center;
}
.swiper-slide img {
max-width: 100%;
max-height: 100%;
}
举一个简单的例子：同样一个 wap 页，在 iphone5 和 6p 上看到的字体大小不一样。
flexible 提供了自适应方案。
<input type="file">
这个上传图片的 input，到了 app 里就各种坑。ios 的 app 出现闪退或者图片上传失败，后来发现加上 multiple 属性就好了。
<input type="file" multiple="multiple">
但是 android 还是有问题。
需要说明的是，这个 html 上传在微信和手机浏览器里都是没有问题的，所以怀疑还是 app 写的有问题。
微信分享缩略图相关方案
网上说在 <body> 里的第一行代码加一张尺寸至少为 300*300 的图片即可，图片样式：
<img src=”" style=”width: 0; height: 0; position: absolute; left: -1000px;”>
注意，不能使用 display: none 来隐藏图片。但是可以用一个隐藏元素来把图片包起来：
<span style=“display: none;”>
<img src=”">
</span>
不过在调试的时候发现，这张图不一定要放在页面的最前面，也可以放在页面的最底部。这样可以用来解决一个问题，就是页面前面如果没有缩略图的时候，就使用最后设置的这张缩略图。
discuz网络图片不能在手机版和触屏版显示
参考：http://www.discuz.net/thread-3527087-1-1.html
修改文件
\source\function\function_discuzcode.php
找到
if(defined('IN_MOBILE') && !defined('TPL_DEFAULT') && !defined('IN_MOBILE_API')) {
改成
if($_G[setting][mobile][mobilesimpletype]) {
来源：http://www.jb51.net/article/42468.htm
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
} else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function autoTextarea (elem) {
var text = document.getElementById(elem);
function resize () {
text.style.height = 'auto';
text.style.height = text.scrollHeight+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
// 调用
autoTextarea('myTextareaId');
一直在用的 SwitchHosts 今天不知道怎么回事用不了了，重装也用不了，找了另一款 hosts 切换工具 Gas Mask（github）。用了一下觉得很不错，比 SwitchHosts 更赞，从本地切到线上不需要重启浏览器（我用 chrome ），只要新开标签即可，不过从线上切到本地还是要重启浏览器。
今天同事聊到三角形箭头，于是提到这个在线工具。
这是以前糯米发的一个网址，在线定制各种 CSS3 箭头，生成 CSS 代码，前端同学可以收藏一下（翻墙访问会快点）。
sublime文件比较插件
关于文件对比，以前用 notepad++ 时习惯了里面的 compare 插件。
sublime 也有类似插件 sublimerge。
这个插件是收费插件，但是免费版好像也没太大限制：
Without a license, Sublimerge runs in evaluation mode. There are no time and functionality limitations, but for continuous usage it requires purchasing a license. Unregistered copy will display a cyclic reminder message.
这个解释有点委婉，不知道什么场合叫 continuous usage
2014-4-19 更新：
今天知道了 continuous usage 的意思，即连续使用 sublimerge 的功能时，会弹出一个弹窗，取消就可以了（情形和 sublime 的免费版类似）：
Sublimerge
Thanks for trying out Sublimerge!
This is an unregistered evaluation version and a license must be purchased for continued use.
Be fair and support development : )
Would you like to purchase a license now?
2016-12-1 更新：
sublimerge 收费了，不想买的话可以参考这篇日志《sublime 文件比对》。
屌丝团记忆(195) 上VIP了
又一个里程碑到来，今天开始收费，暂时只限 40 个 VIP 名额，结果很快就很多商户交费了。
我们这个产品比较奇葩，很多产品是想着怎么忽悠用户交费，我们是用户追着要交费给我们，买个安心。去年的时候就有很多用户在问收费的事，总觉得免费的用着不放心，不过那时候我们还小，还没有收费计划。
关闭 sublime 后，下次打开时不会记住侧栏的 folders，通过 project 可以方便的管理。
添加：
Project > Add Folder to Project
也可以直接把目录拖到 sublime 中
保存、编辑：
Project > Save Project As
点击保存，将在选定的目录生成两个文件：
project_name.sumlime-project：包含工程定义，该文件会被记录到版本控制里。
project_name.sublim-workspace：包含了用户的工程数据，例如打开的文件和修改等，该文件不会被记录到版本控制里。
在 *.sublime-project 文件中（ Project > Edit Project），可以定义工程配置。例如可以定义多个目录路径，或者哪些目录或文件需要排除在外。通过定义 “name”，可以将一些长路径或者名字很长的目录以更简洁的名称显示在 sidebar 中。
例如：
{
"folders":
[
{
"path": "wwwroot",
"folder_exclude_patterns": ["images"]
},
{
"path": "c:\wwwroot\project1\assets",
"name": "Project 1",
"file_exclude_patterns": ["*.php"]
}
],
"settings":
{
"tab_size": 8
}
}
