jackNEss'窝窝 http://www.jackness.org I like simple mind Tue, 03 Nov 2015 13:37:57 +0000 zh-CN hourly 1 http://wordpress.org/?v=3.9.2 psd 路径导出 svg http://www.jackness.org/2015/11/03/psd-%e8%b7%af%e5%be%84%e5%af%bc%e5%87%ba-svg/ http://www.jackness.org/2015/11/03/psd-%e8%b7%af%e5%be%84%e5%af%bc%e5%87%ba-svg/#comments Tue, 03 Nov 2015 13:29:08 +0000 http://www.jackness.org/?p=1341 1. 选中 路径文件, ctrl + c 复制一下

22

2.打开 ai, 新建图层, 设置被复制路径的大小为画布大小(如 16 x 16)
74]I6FN_L`R_]K))A55CVEQ

3.ctrl + v 路径黏贴到 文件里面, 然后用油桶 填充颜色
33

4.对齐
打开窗口-对齐面板(shift+F7),左右上角位置三角有个下拉菜单~ 单击 显示选项~
然后下面出现 分布间距 画板
选中画板下拉菜单 对齐到画板~
然后在对齐的时候 都以画板为参照对齐

5.另存为 svg。 done!
11

]]>
http://www.jackness.org/2015/11/03/psd-%e8%b7%af%e5%be%84%e5%af%bc%e5%87%ba-svg/feed/ 0
如何去除android上a标签产生的边框 http://www.jackness.org/2015/08/24/%e5%a6%82%e4%bd%95%e5%8e%bb%e9%99%a4android%e4%b8%8aa%e6%a0%87%e7%ad%be%e4%ba%a7%e7%94%9f%e7%9a%84%e8%be%b9%e6%a1%86/ http://www.jackness.org/2015/08/24/%e5%a6%82%e4%bd%95%e5%8e%bb%e9%99%a4android%e4%b8%8aa%e6%a0%87%e7%ad%be%e4%ba%a7%e7%94%9f%e7%9a%84%e8%be%b9%e6%a1%86/#comments Mon, 24 Aug 2015 04:42:33 +0000 http://www.jackness.org/?p=1336 a{-webkit-tap-highlight-color:transparent; } ]]> http://www.jackness.org/2015/08/24/%e5%a6%82%e4%bd%95%e5%8e%bb%e9%99%a4android%e4%b8%8aa%e6%a0%87%e7%ad%be%e4%ba%a7%e7%94%9f%e7%9a%84%e8%be%b9%e6%a1%86/feed/ 0 全屏滚动控件 fullslide http://www.jackness.org/2015/08/14/%e5%85%a8%e5%b1%8f%e6%bb%9a%e5%8a%a8%e6%8e%a7%e4%bb%b6-fullslide/ http://www.jackness.org/2015/08/14/%e5%85%a8%e5%b1%8f%e6%bb%9a%e5%8a%a8%e6%8e%a7%e4%bb%b6-fullslide/#comments Fri, 14 Aug 2015 13:35:01 +0000 http://www.jackness.org/?p=1331 fullslide_polo

本控件适用于各种手机滑动翻页专题,虽然说网上已经有同类控件,而且比较成熟。但个人认为这还是属于比较值得自己造的轮子。也顺手练练 MVVM模式。

github地址:https://github.com/jackness1208/fullslide

要求html 结构

...
<body>
    <div class="full-body" id="box">
        <div class="full-cnt"><!-- 屏幕1内容 --></div>
        <div class="full-cnt"><!-- 屏幕2内容 --></div>
        <div class="full-cnt"><!-- 屏幕3内容 --></div>
    </div>
    ...
</body>

使用方法

var ctrl = fullslide('#box', {
        currentClass: 'full-cnt-cur',
        ready: function(){
            this.className += ' full-body-ready';

            var loadingElm = document.getElementById('loading');
            loadingElm.className += ' full-loading-hide';
        },
        onerror: function(){
            alert('sorry, 你的浏览器并不适合人类使用');
        },
        onchange: function(index){
            alert('is slide to ' + index + ' page!');
        }
    });

fullslide(target, option) 参数说明

参数 类型 说明
target {object|string} 需要进行全屏滚动的对象
option {object} 参数设置

参数 类型 说明
currentClass {String} 设置切换屏幕时选中的样式,
默认为 current
onchange(index) {function} 设置切换屏幕时触发的函数; index – 选中的序号, this 指向 当前选中的屏幕标签
onerror(msg) {function} 设置组件出错时回调的函数; msg – 错误信息
ready() {function} 设置组件初始化后回调的函数
transition {Int} 设置组件动画的时间间隔, 单位是 ms;默认为 500ms

fullslide(target, option) 返回属性说明

参数 类型 说明
current {Int} 获取 or 设置当前选中的屏幕序号
target {object} 组件初始化的目标对象
items {Array} 组件的内的屏幕集合
isSupport {boolean} 当前 浏览器是否支持 本组件

例子

http://www.jackness.org/lab/2015/fullslide/examples/demo.html
http://www.jackness.org/lab/2015/fullslide/examples/demo2.html
http://www.jackness.org/lab/2015/fullslide/examples/demo3.html

]]>
http://www.jackness.org/2015/08/14/%e5%85%a8%e5%b1%8f%e6%bb%9a%e5%8a%a8%e6%8e%a7%e4%bb%b6-fullslide/feed/ 0
手机上限制字符长度的正确姿势 http://www.jackness.org/2015/08/07/%e6%89%8b%e6%9c%ba%e4%b8%8a%e9%99%90%e5%88%b6%e5%ad%97%e7%ac%a6%e9%95%bf%e5%ba%a6%e7%9a%84%e6%ad%a3%e7%a1%ae%e5%a7%bf%e5%8a%bf/ http://www.jackness.org/2015/08/07/%e6%89%8b%e6%9c%ba%e4%b8%8a%e9%99%90%e5%88%b6%e5%ad%97%e7%ac%a6%e9%95%bf%e5%ba%a6%e7%9a%84%e6%ad%a3%e7%a1%ae%e5%a7%bf%e5%8a%bf/#comments Fri, 07 Aug 2015 08:43:59 +0000 http://www.jackness.org/?p=1327 oninput-polo

这次来说说, 移动开发中限制字符长度的正确姿势

按道理来说限制长度就是通过 onpropertychange 或者 oninput 监听输入内容,
然后多的 用 substr 截取掉就可以了

input.addEventListener('input', function(){
    this.value = this.value.substr(0, 8);
});

但是如果使用中文输入法,在我们敲拼音的时候,虚拟输入的拼音内容同样会被
oninput、 onpropertychange 事件监听得到,这就直接导致我们输入“好漂亮” 这
3个中文字在敲拼音还没按确定的时候 会被监听变成 haopiaoliang 12个字符长度。

demo 地址: http://www.jackness.org/lab/2015/mobile-oninput/demo0.html

在这里, 我们引入 2个 新的事件监听 compositionstart, compositionend

compositionstart, compositionend

compositionstart

当浏览器有非直接的文字输入时, compositionstart事件会以同步模式触发.

compositionend

当浏览器是直接的文字输入时, compositionend会以同步模式触发.

引入方法后,问题得到解决了,在我们输入拼音的时候并没有对我们输入的内容进行阻挡。

var cpLock = false;
input.addEventListener('input', function(){
    if(cpLock){
        return;
    }
    this.value = this.value.substr(0, 8);
}, false);

input.addEventListener('compositionstart', function(){
    cpLock = true;
}, false);

input.addEventListener('compositionend', function(){
    cpLock = false;
}, false);

demo 地址: http://www.jackness.org/lab/2015/mobile-oninput/demo.html

]]>
http://www.jackness.org/2015/08/07/%e6%89%8b%e6%9c%ba%e4%b8%8a%e9%99%90%e5%88%b6%e5%ad%97%e7%ac%a6%e9%95%bf%e5%ba%a6%e7%9a%84%e6%ad%a3%e7%a1%ae%e5%a7%bf%e5%8a%bf/feed/ 0
屏蔽 iPhone上的 emoji 表情 http://www.jackness.org/2015/08/06/%e5%b1%8f%e8%94%bd-iphone%e4%b8%8a%e7%9a%84-emoji-%e8%a1%a8%e6%83%85/ http://www.jackness.org/2015/08/06/%e5%b1%8f%e8%94%bd-iphone%e4%b8%8a%e7%9a%84-emoji-%e8%a1%a8%e6%83%85/#comments Thu, 06 Aug 2015 12:39:15 +0000 http://www.jackness.org/?p=1324 emoji-polo
有时候 为了保持 android 和 iPhone 体验上的
一致性,我们会有这样的需求——屏蔽掉只有 iPhone 有的 特殊字符 emoji 表情

虽然觉得挺奇怪,但是, 需求来了, 也算是合理的, 就动手实现吧。

在贴代码之前,先说说 查询一个字符 unicode 编码的方法:

var a = escape("杰").replace(/^\%u/g,'\u'); // \u6770

原理上匹配 emoji 就是通过这方法 把 字符的 unicode 码找出来,然后用正则过滤掉。

下面是 过滤掉 所有 emoji 表情的正则:

txt = txt.replace(/\ud83c[\udd00-\udfff]|\ud83d[\udc00-\ude4f]|\ud83d[\ude80-\udeff]|[\u2600-\u2800]|[\u200D]|[\uFE0F]|[\u231A-\u23FF]/g, "");

这里是 demo 地址: http://www.jackness.org/lab/2015/emoji/demo.html

]]>
http://www.jackness.org/2015/08/06/%e5%b1%8f%e8%94%bd-iphone%e4%b8%8a%e7%9a%84-emoji-%e8%a1%a8%e6%83%85/feed/ 0
js 对中文进行 utf8 编码 http://www.jackness.org/2015/08/05/js-%e5%af%b9%e4%b8%ad%e6%96%87%e8%bf%9b%e8%a1%8c-utf8-%e7%bc%96%e7%a0%81/ http://www.jackness.org/2015/08/05/js-%e5%af%b9%e4%b8%ad%e6%96%87%e8%bf%9b%e8%a1%8c-utf8-%e7%bc%96%e7%a0%81/#comments Wed, 05 Aug 2015 12:59:24 +0000 http://www.jackness.org/?p=1320 其实这功能 更多是用于 node 服务器接口输出数据的时候使用,因为 node 这边 的接口输出要 utf8编码 来避免 因为编码带来的问题。下面是执行代码

/**
 * 字符串转 utf8编码
 * @param {string}  文本
 * @return {string} 转化后文本
 */
var utf8Encode = function(str){
    if(typeof str != 'string'){
        return str;
    }
    return str.replace(/[\u4E00-\u9FA5]/g, function($1){ return "\\u" + ("00"+$1.charCodeAt().toString(16)).slice(-4);});
}
]]>
http://www.jackness.org/2015/08/05/js-%e5%af%b9%e4%b8%ad%e6%96%87%e8%bf%9b%e8%a1%8c-utf8-%e7%bc%96%e7%a0%81/feed/ 0
如何往光标所在区域插入符号 http://www.jackness.org/2015/08/03/%e5%a6%82%e4%bd%95%e5%be%80%e5%85%89%e6%a0%87%e6%89%80%e5%9c%a8%e5%8c%ba%e5%9f%9f%e6%8f%92%e5%85%a5%e7%ac%a6%e5%8f%b7/ http://www.jackness.org/2015/08/03/%e5%a6%82%e4%bd%95%e5%be%80%e5%85%89%e6%a0%87%e6%89%80%e5%9c%a8%e5%8c%ba%e5%9f%9f%e6%8f%92%e5%85%a5%e7%ac%a6%e5%8f%b7/#comments Mon, 03 Aug 2015 03:09:54 +0000 http://www.jackness.org/?p=1315 textarea-range

老生常谈问题之一,主要用于实现简单的表情符号插入,最近有同事遇上,发现正好也是自己的短板,赶紧梳理一下吧。

这功能实现 分 ie 和 其他浏览器 2种方式, 值得注意的是,下面提供的方法只限于用在textarea 文本框, input 框 并不适用(IE 的错)。

/**
 * cursorPosition Object
 */
var cursorPosition = {
    get: function (textarea) {
        var rangeData = { text: "", start: 0, end: 0 };

        if (textarea.setSelectionRange) { // W3C	
            textarea.focus();
            rangeData.start = textarea.selectionStart;
            rangeData.end = textarea.selectionEnd;
            rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end) : "";

        } else if (document.selection) { // IE
            textarea.focus();
            var oS = document.selection.createRange(),
                oR = document.body.createTextRange(),
                i;

            oR.moveToElementText(textarea);
            rangeData.text = oS.text;
            rangeData.bookmark = oS.getBookmark();
            
            // object.moveStart(sUnit [, iCount]) 
            // Return Value: Integer that returns the number of units moved.
            for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i++) {
                // Why? You can alert(textarea.value.length)
                if (textarea.value.charAt(i) == '\r') {
                    i++;
                }
            }
            rangeData.start = i;
            rangeData.end = rangeData.text.length + rangeData.start;
        }

        return rangeData;
    },

    set: function (textarea, rangeData) {
        var oR, start, end;
        if (!rangeData) {
            alert("You must get cursor position first.")
        }
        textarea.focus();
        if (textarea.setSelectionRange) { // W3C
            textarea.setSelectionRange(rangeData.start, rangeData.end);
        } else if (textarea.createTextRange) { // IE
            oR = textarea.createTextRange();

            // Fixbug : ues moveToBookmark()
            // In IE, if cursor position at the end of textarea, the set function don't work
            if (textarea.value.length === rangeData.start) {
                //alert('hello')
                oR.collapse(false);
                oR.select();
            } else {
                oR.moveToBookmark(rangeData.bookmark);
                oR.select();
            }
        }
    },

    add: function (textarea, rangeData, text) {
        var oValue, nValue, oR, sR, nStart, nEnd, st;
        this.set(textarea, rangeData);

        if (textarea.setSelectionRange) { // W3C
            oValue = textarea.value;
            nValue = oValue.substring(0, rangeData.start) + text + oValue.substring(rangeData.end);
            nStart = nEnd = rangeData.start + text.length;
            st = textarea.scrollTop;
            textarea.value = nValue;
            // Fixbug:
            // After textarea.values = nValue, scrollTop value to 0
            if (textarea.scrollTop != st) {
                textarea.scrollTop = st;
            }
            textarea.setSelectionRange(nStart, nEnd);
        } else if (textarea.createTextRange) { // IE
            sR = document.selection.createRange();
            sR.text = text;
            sR.setEndPoint('StartToEnd', sR);
            sR.select();

        }
    }
};

例子:http://www.jackness.org/lab/2015/textarea-ranage/demo.html

]]>
http://www.jackness.org/2015/08/03/%e5%a6%82%e4%bd%95%e5%be%80%e5%85%89%e6%a0%87%e6%89%80%e5%9c%a8%e5%8c%ba%e5%9f%9f%e6%8f%92%e5%85%a5%e7%ac%a6%e5%8f%b7/feed/ 0
手机上禁止滚屏代码 http://www.jackness.org/2015/07/31/%e6%89%8b%e6%9c%ba%e4%b8%8a%e7%a6%81%e6%ad%a2%e6%bb%9a%e5%b1%8f%e4%bb%a3%e7%a0%81/ http://www.jackness.org/2015/07/31/%e6%89%8b%e6%9c%ba%e4%b8%8a%e7%a6%81%e6%ad%a2%e6%bb%9a%e5%b1%8f%e4%bb%a3%e7%a0%81/#comments Fri, 31 Jul 2015 03:32:15 +0000 http://www.jackness.org/?p=1312 var scrolling = { // 禁止滚动 disable: function(){ var she = this; if (window.addEventListener) { window.addEventListener('DOMMouseScroll', she.handle, false); window.addEventListener('touchmove', she.handle, false); window.onmousewheel = document.onmousewheel = she.handle; document.onkeydown = she.keydown; } }, // 恢复滚动 enable: function(){ var she = this; if (window.removeEventListener) { window.removeEventListener('DOMMouseScroll', she.handle, false); window.removeEventListener('touchmove', she.handle, false); } window.onmousewheel = document.onmousewheel = document.onkeydown = null; }, keydown: function(e){ var keys = [37, 38, 39, 40]; for (var i = keys.length; i--;) { if (e.keyCode === keys[i]) { e.preventDefault && preventDefault(e); return; } } }, handle: function(e){ e = e || window.event; e.returnValue = false; e.preventDefault && preventDefault(e); } }; ]]> http://www.jackness.org/2015/07/31/%e6%89%8b%e6%9c%ba%e4%b8%8a%e7%a6%81%e6%ad%a2%e6%bb%9a%e5%b1%8f%e4%bb%a3%e7%a0%81/feed/ 0 git 调用 第三方对比工具beyondCompare http://www.jackness.org/2015/03/31/git-%e8%b0%83%e7%94%a8-%e7%ac%ac%e4%b8%89%e6%96%b9%e5%af%b9%e6%af%94%e5%b7%a5%e5%85%b7beyondcompare/ http://www.jackness.org/2015/03/31/git-%e8%b0%83%e7%94%a8-%e7%ac%ac%e4%b8%89%e6%96%b9%e5%af%b9%e6%af%94%e5%b7%a5%e5%85%b7beyondcompare/#comments Tue, 31 Mar 2015 10:47:41 +0000 http://www.jackness.org/?p=1303 对于我这种 git 命令行小白来说, git 自带的对比工具各种水土不服,想念以前的 svn 小乌龟 + beyondCompare 的日子。。。纠结完 gitHub client 未果之后,终于研究到。。 原来 git 的对比也可以调用第三方工具的, well done!

下面来科普下 如果 在 git 设置 第三方对比工具。

配置 git

打开 .gitconfig 配置文件 (windows 在 C:\Users\Administrator [Administrator 为你当前用户名], mac 在 ~/),加入以下内容

[diff]
    tool = bc3
[difftool "bc3"]
    path = D:/Program Files (x86)/Beyond Compare 3/BCompare.exe
[merge]
    tool = bc3
[mergetool "bc3"]
    path = D:/Program Files (x86)/Beyond Compare 3/BCompare.exe

其中 path 为你 beyondCompare 的安装目录;

ok 搞好了, 让我们试试效果

打开你的git项目 目录输入

git difftool git difftool -t bc3

你会看到
git_beyond01

输入回车之后, ok beyondCompare 启动了~

(tips 如果不能调用 可以在 终端输入任意字母 如 m,就可以调用成功了)
git_beyond02.png

]]>
http://www.jackness.org/2015/03/31/git-%e8%b0%83%e7%94%a8-%e7%ac%ac%e4%b8%89%e6%96%b9%e5%af%b9%e6%af%94%e5%b7%a5%e5%85%b7beyondcompare/feed/ 0
Mac下如何显示隐藏文件/文件夹 http://www.jackness.org/2015/03/16/mac%e4%b8%8b%e5%a6%82%e4%bd%95%e6%98%be%e7%a4%ba%e9%9a%90%e8%97%8f%e6%96%87%e4%bb%b6%e6%96%87%e4%bb%b6%e5%a4%b9/ http://www.jackness.org/2015/03/16/mac%e4%b8%8b%e5%a6%82%e4%bd%95%e6%98%be%e7%a4%ba%e9%9a%90%e8%97%8f%e6%96%87%e4%bb%b6%e6%96%87%e4%bb%b6%e5%a4%b9/#comments Mon, 16 Mar 2015 12:58:25 +0000 http://www.jackness.org/?p=1297 显示隐藏文件

终端输入:

defaults write com.apple.finder AppleShowAllFiles -bool true

EE5823C4-D072-40FA-9F25-9ACCD4444EF8

不显示隐藏文件

终端输入:

defaults write com.apple.finder AppleShowAllFiles -bool false
]]>
http://www.jackness.org/2015/03/16/mac%e4%b8%8b%e5%a6%82%e4%bd%95%e6%98%be%e7%a4%ba%e9%9a%90%e8%97%8f%e6%96%87%e4%bb%b6%e6%96%87%e4%bb%b6%e5%a4%b9/feed/ 0