修改swiper 2.7.6版本在ie8下点击后停止自动切换的问题

前文“Swiper 循环切换回调实例”中介绍过一些用法。
Swiper 是个优秀的滑动插件插件,有两个版本。3.x版本兼容高版本浏览器 chrome、ie9+ (推测),2.x版本兼容ie8等。
目前2.x已停止维护了,最新版本为 2.7.6.

问题描述:由于要兼容ie8故采用2.7.6版本。测试发现ie8下点击后停止自动切换的问题,chrome正常。
分析:
插件根据这个值 autoplayDisableOnInteraction 来决定用户操作后是否自动切换。在代码中找到,

            if (internal && !params.autoplayDisableOnInteraction) {
                _this.wrapperTransitionEnd(function () {
                    autoplay();
                });
            }

发现能正确执行到if条件中。但ie8下没有执行到autoplay(),继续分析_this.wrapperTransitionEnd,是由ie8不支持 transitionend 事件导致的。修改如下:

    _this.stopAutoplay = function (internal) {
        if (_this.support.transitions) {
            if (!autoplayTimeoutId) return;
            if (autoplayTimeoutId) clearTimeout(autoplayTimeoutId);
            autoplayTimeoutId = undefined;
            if (internal && !params.autoplayDisableOnInteraction) {
                _this.wrapperTransitionEnd(function () {
                    autoplay();
                });
            }
            _this.callPlugins('onAutoplayStop');
            if (params.onAutoplayStop) _this.fireCallback(params.onAutoplayStop, _this);
        }
        else {
            if (autoplayIntervalId) clearInterval(autoplayIntervalId);
            autoplayIntervalId = undefined;
            if (internal && !params.autoplayDisableOnInteraction) {
                _this.startAutoplay();
            }
            _this.callPlugins('onAutoplayStop');
            if (params.onAutoplayStop) _this.fireCallback(params.onAutoplayStop, _this);
        }
    };

swiper-2-7-7

javascript 编码规范指南(4)

变量声明
变量应当在使用前定义,变量定义应当放在函数开头,使用一个var表达式每行一个变量。除了首行,所有行都应当多一层缩进以使变量名能够垂直方向对齐。初始化的变量应当在末初始化变量之前。

// Good
var count = 10,
    name = "Nicholas",
    found = false,
    empty;

// Bad: 多个定义写在一行
var count = 10, name = "Nicholas",
found = false, empty;

函数声明
函数应当在使用前定义,函数名和开始圆括号之间不应当有空格。结束的圆括号和右边的花括号之间应该留一个空格。右侧的花括号应当同function关键字保持同一行。
开始和结束括号之间不应该有空格。参数名之间应当在逗号之后保留一个空格。函数体应当保持一级缩进。

// Good
function doSomething(arg1, arg2) {
    return arg1 + arg2;
}

其他函数内部定义的函数应当在var语句后立即定义,先定义变量再定义函数。

// Good
function outer() {
    var count = 10,
    name = "Nicholas",
    found = false,
    empty;
    function inner() {
        // code
    }
    // code that uses inner()
}

匿名函数可能作为方法赋值给对象,或者作为其他函数的参数。function关键字同开始括号之间不应有空格。

// Good
object.method = function() {
    // code
};

// Bad:不正确的空格
object.method = function () {
    // code
};

立即被调用的函数应当在函数调用的外层用圆括号包裹。

// Good
var value = (function() {

    // 函数体

    return {
        message: "Hi"
    }
}());

// Bad: 函数调用外层没有用圆括号包裹
var value = function() {

    // function body

    return {
       message: "Hi"
    }
}();

命名规范
变量和函数命名应仅限于数字、字母、字符,某些情况下也可以使用下划线。

变量命名应当采用驼峰命名格式,首字母小写,接着每个单词首字母大写。变量名的第一个单词应当是一个名词(而非动词)。不要在变量命名中使用下划线。

// Good
var accountNumber = "8401-1";

// Bad: 大写字母开头
var AccountNumber = "8401-1";

// Bad: 动词开头
var getAccountNumber = "8401-1";

// Bad: 使用下划线
var account_number = "8401-1";

函数命名也应当采用驼峰命名格式。函数名的第一个单词应当是动词(而非名词),最好不使用下划线。

// Good
function doSomething() {
    // code
}

构造函数——通过new运算符创建新对象的函数——也应当以驼峰格式命名,并且首字符大写。构造函数名称应当以非动词开头,因为new代表着创建一个对象实例的操作。

// Good
function MyObject() {
    // code
}

常量(值不会被改变的变量)的命名应当是所有字母大写,不同单词之间用单个下划线隔开。

// Good
var TOTAL_COUNT = 10;

对象的属性同变量的命名规则相同。对象有方法同函数的命名规则相同。如果属性方法是私有的,应当在之前加一个下划线。

// Good
var object = {
    _count: 10,
    
    _getCount: function () {
       return this._count;
    }
};

bootstrap modal最大宽度

Bootstrap框架的的一些默认功能可能现在无法满足我们对实际项目的需要, 比如javascript中的jquery插件Modal.他的modal-body大小可能不适合我们的实际需要.所以现在我们来看下如何自定义.

改变Bootstrap Modal的默认高度

如果你需要改变modal-body的高度使它自适应的话可以在自己的CSS里写入下面的代码.

#myModal .modal-body {
max-height: 800px;
}

注意.我们这里设置的是max-height在Modal-body类元素上,而不是Modal盒子类.这样的话就可以说在800px的高度内隐藏滚动条了, 除非你的内部元素高度超出800px
改变Bootstrap Modal的默认宽度

按照下面的样式来重写bootstrap的Modal最大宽度

#myModal {
/* SET THE WIDTH OF THE MODAL 设置Modal的宽度*/
width: 900px;
/* CHANGE MARGINS TO ACCOMODATE THE NEW WIDTH (original = margin: -250px 0 0 -280px;) */
margin: -250px 0 0 -450px;
}

这里设置了Modal的固定宽度为900PX, 注意这里的宽度不是modal-body的宽度, 这时候如果要让弹出的Modal居中的话,就要修改Modal的Margin-left了, 从原来的-280px 改为 -450px(900/2)

更改bootstrap Modal 的屏幕显示位置

如下代码:

#myModal {
margin: -300px 0 0 -280px; /* PLAY THE WITH THE VALUES TO SEE GET THE DESIRED EFFECT */
}

从上面的几步来看, 如你所愿, 是不是已经可以改变Modal的显示位置和大小了??

本文来自:http://www.revillwebdesign.com/change-the-height-width-and-position-of-a-modal-in-twitter-bootstrap/
翻译:Rogee
Email:rogeecn@qq.com

xampp本地域名测试使用说明

1、安装xampp,网址:http://www.apachefriends.org/zh_cn/xampp.html

2、安装完成后假定安装目录为:D:\xampp 打开D:\xampp\apache\conf 找到httpd.conf 进行修改。

3、在底部增加内容为:


    Header set P3P 'CP="CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"'
    ServerAdmin root@k68.com
    DocumentRoot D:/html/protect
    ServerName protect.html.com
       
        Order Allow,Deny
        Allow from all
        DirectoryIndex index.htm index.html index.shtml index.php index.jsp
        AddHandler server-parsed .shtml
        AddType text/html .shtml
        AddHandler server-parsed .inc
        AddType text/html .inc
        Options Indexes FollowSymLinks Includes
        Order allow,deny
        Allow from all
      

4、在D盘建立目录D:/html/protect把页面复制到目录下。

5、修改host文件,127.0.0.1 protect.html.com

6、重启apache,在浏览器输入protect.html.com 进行测试。

ie9下jquery.bgiframe.js问题

jquery.bgiframe是用来处理IE6下select的z-index最高无法被透明层遮罩的BUG,原理也是利用IE6下的BUG,iframe可以遮罩住select,而DIV可以遮罩iframe,这样DIV也就遮罩住了select。

页面在ie9下出现了一些问题,经排查找到jquery.bgiframe.js引起的,这个插件很久没有更新,在ie9下有问题。

问题它在判断浏览器及使用的版本时使用的代码是:

    if ($.browser.msie&&/6.0/.test(navigator.userAgent){
        ... ...
    }

浏览器是IE9时,navigator.userAgent是:
“Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)”

由于含有Media Center PC 6.0,也会执行if段内的代码,导致错误的发生。所以,可以通过修改版本判断的代码,来避免这个问题:

if ($.browser.msie&&/IE 6.0/.test(navigator.userAgent){
    ... ...
}  

问题搞定。

补充一下,如果在页面引用时,只对ie6引用jquery.bgiframe.js,应该就避免这个问题了。


参考:
http://blog.sina.com.cn/s/blog_4126cbbc01015qyy.html
http://jucelin.com/jquery-bgiframe.html

使用apache的NameVirtualHost实现二级域名的目录绑定

使用的是xampp搭建的虚拟环境,之前文章说过,使用端口号,绑定到不同的站。使用域名更好,假设我们要绑定的域名是youxi.com,二级域名是bbs.youxi.com,独立IP为192.168.1.1。绑定后需要修改本地host文件,将域名指向到127.0.0.1即本机ip。

绑定多个域名

打开http.conf,用过查找的方法来搜索:
1.ServerName 127.0.0.1
修改成ServerName 192.168.1.1

2.#NameVirtualHost *
修改成NameVirtualHost 192.168.1.1″

3.拉到文件最底部,有虚拟主机格式:
#
# ServerAdmin admin@youxi.com
# DocumentRoot /www/httpd/html/youxi.com
# ServerName youxi.com
# ErrorLog logs/minidx.com-error_log
# CustomLog logs/minidx.com-access_log common
#
简单的添加:

DocumentRoot usr/local/www/
ServerName 192.168.1.1

DocumentRoot usr/local/www/youxi/
ServerName youxi.com

DocumentRoot usr/local/www/youxi/bbs
ServerName bbs.youxi.com

请不要说我吹毛求疵~

现在比较关注网页的质量,不仅仅是显示的效果,还有结构、语义等等。当看到一个外表光鲜,或者内容有所用途的页面,会去看一下结构,但是每每当我把页面的样式表禁用之后,除了失望还是失望~~

这里仅当是记录页面,后续发现不断补充:

1、QQ文化夏至:http://im.qq.com/culture/xiazhi.shtml?ADUIN=0&ADSESSION=0&ADTAG=CLIENT.QQ.3439_LoginLogo.0

页面简洁,当我看到夏至小tips时,想粘贴下来一份,由于页面是用图片的,就去查看html代码,可惜当禁用样式表后,页面就剩下一个底部~怎一个丑陋了得。

2、网易应用:http://m.163.com/

手机应用/限时免费,现在这类站挺多的,大站也跟进了。受惠肯定是大众了。是好事,今天发现网易也有了,就进去看了一下。风格挺喜欢的,简洁大方。

先是看了一下焦点图部分,用的是yui插件,继续清除了样式之后,发现没有h1标签,指丢失样式后就看到站的标题了。接着又发现、什么“速度快”“热推荐”之类的介绍竟然都在一张图片上。去除样式后,这些东西也没有了。

个人觉得这些东西,应该保留着,利于搜索引擎优化。毕竟搜索引擎看不到图片的内容。

 

机会否,错过否?

刚刚又接了一个电话,又是一家好公司的面试邀请。

我说现在已经上班了,忽忽,机会又走了。

呵呵,心里除了一点激动,反而没有别的想法。

以前这样的公司,是想都不敢想的,没想到今年却出现了这么多的机会。

可惜没有把握住~

唯有把技术提高了,才能施展才能。

切记于此吧~

回首过往~迈步向前!