Archives for : 前端

微信分享缩略图相关方案

网上说在 <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]) {

第2521天:textarea根据内容自适应高度

来源: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');

 

第2261天:hosts切换工具 Gas Mask for Mac

一直在用的 SwitchHosts 今天不知道怎么回事用不了了,重装也用不了,找了另一款 hosts 切换工具 Gas Maskgithub)。用了一下觉得很不错,比 SwitchHosts 更赞,从本地切到线上不需要重启浏览器(我用 chrome ),只要新开标签即可,不过从线上切到本地还是要重启浏览器。

第2223天:css3箭头在线定制

今天同事聊到三角形箭头,于是提到这个在线工具。

这是以前糯米发的一个网址,在线定制各种 CSS3 箭头,生成 CSS 代码,前端同学可以收藏一下(翻墙访问会快点)。

http://apps.eky.hk/css-triangle-generator/

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 名额,结果很快就很多商户交费了。

我们这个产品比较奇葩,很多产品是想着怎么忽悠用户交费,我们是用户追着要交费给我们,买个安心。去年的时候就有很多用户在问收费的事,总觉得免费的用着不放心,不过那时候我们还小,还没有收费计划。

第2137天:Sublime 创建、保存、切换工程

关闭 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
    }
}

参考:http://www.cnblogs.com/ifantastic/p/3485943.html

第2037天:天气预报API资料

1、直接用iframe

http://www.tianqi.com/plugin/

2、weather.com.cn 智慧天气应用编程接口开放平台 – 文档、图标下载
http://weather.com.cn/wzfw/smart/weatherapi.shtml

3、中国气象局提供了三个天气查询的API接口
http://www.weather.com.cn/data/sk/101190101.html
http://www.weather.com.cn/data/cityinfo/101190101.html
http://m.weather.com.cn/data/101190101.html

以json格式返回数据,第一和第二个接口返回当天实时的天气数据,第三个返回未来五天天气情况。

其中地址里的数字表示城市的代码:101190101 代表南京

第三个接口的返回数据示例及说明如下:

{   
    weatherinfo: {   
        city: "南京",   
        city_en: "nanjing",   
        date_y: "2013年9月8日",   
        date: "",   
        week: "星期日",   
        fchh: "18",   
        cityid: "101190101",            //城市代码   
        temp1: "22℃~30℃",     //第一天(当天)最高喝最低温度(摄氏温度)
        temp2: "23℃~29℃",              //第二天最高喝最低温度(摄氏温度)   
        temp3: "22℃~28℃",              //第三天最高喝最低温度(摄氏温度)   
        temp4: "23℃~30℃",              //第四天最高喝最低温度(摄氏温度)   
        temp5: "24℃~28℃",              //第五天最高喝最低温度(摄氏温度)   
        temp6: "23℃~28℃",              //第六天最高喝最低温度(摄氏温度)   
        tempF1: "71.6℉~86℉",  //第一天(当天)最高喝最低温度(华氏温度)   
        tempF2: "73.4℉~84.2℉",         //第二天最高喝最低温度(华氏温度)   
        tempF3: "71.6℉~82.4℉",         //第三天最高喝最低温度(华氏温度)   
        tempF4: "73.4℉~86℉",           //第四天最高喝最低温度(华氏温度)   
        tempF5: "75.2℉~82.4℉",         //第五天最高喝最低温度(华氏温度)   
        tempF6: "73.4℉~82.4℉",         //第六天最高喝最低温度(华氏温度)   
        weather1: "多云转阴",             //第一天(当天)天气   
        weather2: "小雨",                //第二天天气   
        weather3: "小雨",   
        weather4: "阴",   
        weather5: "小雨转中雨",   
        weather6: "中雨转阴",   
        img1: "1",                      //第一天的天气图片代码1   
        img2: "2",                      //第一天的天气图片代码2   
        img3: "7",                      //第二天的天气图片代码1   
        img4: "99",                     //第二天的天气图片代码2   
        img5: "7",   
        img6: "99",   
        img7: "2",   
        img8: "99",   
        img9: "7",   
        img10: "8",   
        img11: "8",   
        img12: "2",   
        img_single: "2"  
        img_title1: "多云",           //第一天的天气图片1的标题   
        img_title2: "阴",             //第一天的天气图片2的标题   
        img_title3: "小雨",           //第二天的天气图片1的标题   
        img_title4: "小雨",           //第二天的天气图片2的标题   
        img_title5: "小雨",   
        img_title6: "小雨",   
        img_title7: "阴",   
        img_title8: "阴",   
        img_title9: "小雨",   
        img_title10: "中雨",   
        img_title11: "中雨",   
        img_title12: "阴",   
        img_title_single: "阴",   
        wind1: "东风3-4级",            //第一天风向范围   
        wind2: "东风3-4级",            //第二天风向范围   
        wind3: "北风转东北风3-4级",   
        wind4: "东北风3-4级",   
        wind5: "东北风转西风3-4级",   
        wind6: "西南风转西风3-4级",   
        fx1: "东风",   
        fx2: "东风",   
        fl1: "3-4级",                  //第一天风级范围                        
        fl2: "3-4级",   
        fl3: "3-4级",   
        fl4: "3-4级",   
        fl5: "3-4级",   
        fl6: "3-4级",   
        index: "热",                   //二十四小时穿衣指数   
        index_d: "天气热,建议着短裙", //建议   
        index48: "热",                 //四十八小时穿衣指数   
        index48_d: "天气热,建议着短裙", //建议   
        index_uv: "弱",                //二十四小时紫外线   
        index48_uv: "弱",              //四十八小时紫外线   
        index_xc: "不宜",              //洗车   
        index_tr: "适宜",              //旅游   
        index_co: "较舒适",            //舒适度   
        st1: "30",   
        st2: "20",   
        st3: "27",   
        st4: "19",   
        st5: "26",   
        st6: "18",   
        index_cl: "较适宜",            //晨练   
        index_ls: "不太适宜",          //晾晒   
        index_ag: "极易发"             //过敏   
    }   
}

参考:http://www.cnblogs.com/laosan/p/how-to-write-a-weather-api.html

星期二 晴 27~38℃

js 判断浏览器(含360)

判断 360 浏览器,详见:http://xliar.com/thread-138-1-1.html

下面的 360 判断是从上面的方法中抽离的,只允许 chrome 以及 IOS 上的 safari 访问:

function checkBrowser() {
    var ua = navigator.userAgent,
        isChrome = (ua.indexOf("Chrome") != -1) ? true : false,
        isIOS = /\((iPhone|iPad|iPod)/i.test(ua) ? true : false,
        isSafari = (ua.indexOf("Safari") != -1) ? true : false,
        help = function () {
            alert(‘非chrome浏览器’);
        };
    if (!isChrome) {
        if (isIOS && isSafari) {
            // 在IOS上使用safari
        } else {
            help();
        }
    } else {
        // 360
        var subtitleEnabled = function () {
                return "track" in document.createElement("track");
            },
            scopedEnabled = function () {
                return "scoped" in document.createElement("style");
            };
        if (subtitleEnabled() && scopedEnabled()) {
            help();
        }
    }
}


chrome扩展开发笔记(10) notification升级

chrome 更新到 v28,发现以前使用 createHTMLNotification() 创建桌面通知的方法:

webkitNotifications.createHTMLNotification(‘notification.html’);

会报错:

Uncaught TypeError: Object #<NotificationCenter> has no method ‘createHTMLNotification’

新的 notification 只支持“文本”和“图片”,且不再支持加载 html 页面。

参考:
(英文)https://developer.chrome.com/apps/desktop_notifications.html
(中文)https://crxdoc-zh.appspot.com/apps/desktop_notifications.html

新的 notification 方法参考:
(英文)https://developer.chrome.com/apps/notifications.html
(中文)https://crxdoc-zh.appspot.com/apps/notifications.html

(以上参考资料可能需要翻墙访问)


屌丝团记忆(55) 吃饭,永远的痛

一到吃饭时间就纠结,磨磨蹭蹭,磨磨叽叽,去哪吃呢?

其实去哪吃并不重要,重要的是,吃饭时间到了,就得先站起来走出去再说。

星期四 少云 26~37℃

html5 本地存储写入读取json

var data = {
    intro: ‘test’,
    arr: []
};

// 写入(把json转成字符串)
localStorage.setItem(‘my_storage’, JSON.stringify(data));

// 读取(把json字符串解析成json)
var json = JSON.parse(localStorage.getItem(‘my_storage’));
alert(json.intro);


办公室健身(36)

俯卧撑,下午 60 个。

星期一 晴 26~36℃

动态布局库 isotope

暂时用不上,记录一下。

Isotope 是一个jQuery的插件,用来实现精美的动态元素布局。

Isotope可以实现仅仅依靠CSS3无法实现的动态布局方式,可以动态添加,删除,排序,筛选元素。Isotope的动画引擎可以充分使用现代浏览器CSS动画中GPU硬件加速性能。


屌丝团记忆(45) 新同学

上周新入一位后端同学,今天新入一位运营同学,一共 13 人了。

接下去主要招的是后端和运营,前端可能也还要再招一个。