ECSHOP中transport.js和jquery冲突的解决方法

在html文件的最后面添加下面的代码即可:

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
window.__Object_toJSONString = Object.prototype.toJSONString;
delete Object.prototype.toJSONString;
});
</script>

代码在文件中的顺序:

先导入transport.js文件

{insert_scripts files="../js/transport.js,../js/region.js"}

然后导入jquery文件

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

再加上这段代码

<script type="text/javascript">
$(function() {
window.__Object_toJSONString = Object.prototype.toJSONString;
delete Object.prototype.toJSONString;
});
</script>

最后引入自己用jquery书写的js文件:

<script type="text/javascript" src="main.js"></script>

Sea.js出现Uncaught TypeError: object is not a function的解决方法

最近我有一个项目需要用到seajs+jquery+underscore来开发前端页面,是第一次使用seajs做项目。一开始使用就遇到了:Uncaught TypeError: object is not a function的问题,这个问题到谷歌上搜索之后是一大片的,github上玉伯也有给出耐心的解答。后来我发现遇到这个问题就是两个原因:
1、引用的第三方类库的路径不对。
2、没有将第三方非CMD规范的类库定义成CMD的模块

假设我们现在jQuery无法引入,首先我们要检查第一点路径是否正确,打开浏览器的控制台,在控制台输入

seajs.resolve('jquery’)

参数中的jQuery是你在配置中alias里面写的别名,敲回车之后你会发现控制台会输出jQuery的路径,你需要访问一下这条路径,假设这条路径有jQuery的代码,说明你的路径正确,否者你得修改你的路径,理论上路径是相对于sea.js的。

如果你的路径正确,那么你需要将第三方非CMD规范的类库定义成CMD的模块:
jQuery的定义方法:

define(function() {//def CMD
    /*jquery 自身的代码*/
    return $.noConflict();
});//end CMD

jQuery插件的定义方法:

define(function() { //def CMD
    return function($) {
        /*jQuery插件的自身代码*/
    }
});//end CMD 

// 调用的时候使用require要将jquery的传入
var $ = require('jquery');
require('jquery.XXX.js')($);

underscore.js的定义方法:

define(function() {//def CMD
    /*underscore自己的代码*/
    return _.noConflict();
});//end CMD 

对于自己的代码:

define(function() {//def CMD
    /*自身的代码*/
    return XXX;
});//end CMD

基于Zend Framework 2、Require.js和Backbone.js的RESTful架构Demo

这是将Zend Framework 2官方Album的Demo改成一个客户端基于Require.js和Backbone.js,服务端基于Zend Framework 2的一个RESTful架构的Demo。

本程序将Album demo中的CRUD功能改成了一个名为AlbumRestApiController的controller提供RESTful API,这个AlbumRestApiController继承了ZF2提供的AbstractRestfulController,它可以根据HTTP请求的method:POST,GET,PUT和DELETE来自动分发请求至CRUD的action。

在前端使用Require.js来管理js的文件,用Backbone.js来实现MVC、路由分发的功能和路由欺骗的功能,js的主要程序在/public/js/application中。

建议使用谷歌Chrome当打开应用,需要配置虚拟主机,访问http://your-domain/album-rest,在页面的header里会发现一个播放器,这个播放器是用来测试页面是否有刷新的,在播放音乐的时候对页面进行操作跳转,如果URL改变了页面也改变了但音乐没有停止播放说明程序是实现了我想要的概念——网站即应用,所有的AJAX数据请求都是访问上面提到的RESTful API,做到了URI即资源。

程序的git地址:http://git.oschina.net/tonitech/RESTful-Zend-Framework-2-Demo 。

由于github服务器在国外,其下载上传速度跟开源中国提供的git库是没法比的,所以我选择了开源中国的代码托管。

本程序是本人用于学习Zend Framework 2、Require.js和Backbone.js以及RESTful概念使用,欢迎各位同仁批评指正,Fork和Star点赞!谢谢!

用来处理HTML页面弹出框的jQuery插件

最近站长Tony开发了一个jquery.pop.js插件,这是一个用来处理弹出框的jQuery插件,目的是为了兼容IE6浏览器,从此不用不用为了IE6写CSS hack了,现代浏览器的fix和absolute怎么写就怎么写,无需考虑IE6一样兼容。值得注意的是jquery版本要求是1.3到1.8,HTML声明请遵循W3C标准。

使用方法:

$('#loginBox').popup();
$('#loginBox').pophide();

以上是弹出框的弹出和隐藏。

$('#loginBox').popup({
filter : '#filter'
});
$('#loginBox').pophide({
filter : '#filter'
});

如果添加了参数filter,表示弹出的同时开启滤镜,关闭的时候关闭滤镜。filter传入的值和你想要填写的选择器的内容是一样的。

demo地址:http://www.tonitech.com/demo/jquery.pop.js

jquery.pop.js插件的代码如下:

//@charset "utf-8";
/**
 * jquery版本要求:1.3 ~ 1.8,HTML声明请遵循W3C标准
 * 用来处理弹出框的jQuery插件
 * 兼容IE6浏览器,从此您再也不用担心IE6的弹框
 * 不用写css hack,否则会出问题,现代浏览器怎么写就怎么写
 * @author wangzhiangtony@qq.com
 * @version 1.2
 * @date 2013-3-27 10:09:59
 */
(function($) {
    //弹出的窗口处于屏幕中间
    $.fn.popup = function(opts) {
        var defaults = {
            filter : ''
        };
        var options = $.extend(defaults, opts);

        if(defaults.filter != '') {
            var maskHeight = $('body').height();
            $(options.filter).css('height', maskHeight);
            $(options.filter).show();
        }
        var str = $(this);

        var pos = str.css('position');
        if(pos == 'fixed') {
            var top = ($(window).height() - str.height()) / 2;
            //fix兼容ie6
            if($.browser.msie && $.browser.version == "6.0") {
                str.css('position', 'absolute');
                var dom = str[0];
                $('body').css({
                    'background-image' : 'url(about:blank)',
                    'background-attachment' : 'fixed'
                });
                dom.style.setExpression('top', 'eval((document.documentElement.scrollTop)+' + top + ')');
            }
        } else {
            var top = $(window).scrollTop() + ($(window).height() - str.height()) / 2;
        }
        if(top > 0) {
            str.css('top', top);
        } else {
            str.css('top', 0);
        }

        var width = $(window).width();
        var left = (width - str.width()) / 2;
        if(left > 0) {
            str.css('left', left);
        } else {
            str.css('left', 0);
        }
        str.css('z-index', '1000');
        str.show();
    };

    $.fn.pophide = function(opts) {
        var defaults = {
            filter : ''
        };
        var options = $.extend(defaults, opts);

        if(defaults.filter != '') {
            $(options.filter).hide();
        }
        $(this).hide();
    };
})(jQuery);

demo下载地址:jquery.pop.js (497)

jQuery的那些小事

一、在jQuery里面,动态添加的元素是取不到的。

解决办法:不要直接加内置事件取元素,用live,如:

$(".have a").live("click", function() {
	var remove_text = $(this).siblings("span").html();
	var length = $(".select-box tr").length;
	var tr = $(".select-box tr");
	if (confirm("确定要删除?")) {
		$(this).parent("p").remove();
		for ( var i = 1; i < length; i++) {
			if (tr.eq(i).find("td").eq(2).html() == remove_text) {
				tr.eq(i).find("td").trigger("click");
			}
		}
	}
});

二、jQuery如何用live绑定toggle()事件

$('.comBtn').live("click", function() {
	$(this).toggle(function() {
		$(this).parent().parent().next('.msd_tipbox').show();
	}, function() {
		$(this).parent().parent().next('.msd_tipbox').hide();
	}).trigger('click');
});
trigger是为了防止第一次单击无效