易栈网-膘叔（Neatstudio.COM）

浏览模式: 标准 | 列表分类:Javascript

jQuery UI中sortable的表单提交

Submitted by gouki on 2013, July 1, 10:12 AM

jqueryUI库中提供了一些封装好的，性能也算是比较好的一些工具，比如排序：sortable

在做分类的时候，这个功能就有点好了，直接拿它来排序，但是大家都觉得sortable怎么提交呢？提交的时候怎么把ID和数据传过去呢？要知道这。。TMD只是一个li，连form都没有，怎么办？

其实也算是比较方便的

JavaScript代码

$('.xxx').sortable(function(){
'update':function(event,ui){
var ids = $(this).sortable('toArray').toString();
$.post('xxx',{"id":ids},function(){
//..
})
}
})
$('.xxx').disableSelection();

主要就那个sortable('toArray')，看了一下手册，默认是使用了id，所以偷懒的话，你就把你的信息扔在id里就OK了。虽然就html规范来说，id不能是数字，但是你可以自己组装，然后post过去的时候，再解析嘛。

就是这样简单

Tags: jquery, sortable

Javascript | 评论:0 | 阅读:21480

新版jQuery去掉了一些组件

Submitted by gouki on 2013, June 10, 12:12 AM

在用一个jQuery插件的时候，突然报错：b.browser undefined。。。

最初的时候想想不太可能啊？browser的判断不是从1.2.1的时候就一直就有了吗？于是搜索了一下jquery.mini.js，搜索browser，居然找不到。。。。

然后去官网看了一下，看到官方居然有这么一段：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

居然建议我们加载migrate，打开这个文件搜索browser。。果然找到了。

于是在项目里加入这一行，不报错的。做个记录。（不就7K嘛。干嘛不放进去，真是的。。）

Tags: jquery

Javascript | 评论:0 | 阅读:21259

转：选择标签至文本域效果,可多选/可过滤重复/可限制个数(已封装)

Submitted by gouki on 2013, June 8, 11:24 PM

说实话，我还是挺喜欢这个标签选择器的，但是评论里说了，除了chrome外，其他浏览器几乎都不支持。因此，我就很纠结了。。

不多说，先看例子点此查看DEMO，怎么样，是不是很有意思？

代码也不多，不过我不懂CSS，所以。。。不知道怎么改，明天找个人纠结纠结：

JavaScript代码

;(function(){
$.fn.extend({
iSelectTags:function(options){
var iset={
name:'.tagsbox',//表单或class或id名
drop:$('#dropbox'),//弹出框定位
pseudoClass:$('#dropbox>p>a'),//可选择的标签定位
close:$('em.close'),//关闭按钮定位
separator:',',//标签间分隔符,建议使用英文逗号
maxCount:10 //默认限制个数,也可以设置表单的data-count值覆盖默认值
}
options=$.extend(iset, options || {});
var _input=$(iset.name);
var _inputVal=_input.val();
var _arr=new Array(); //存放标签的数组
var _left=_input.offset().left; //左绝对距离
var _top=_input.offset().top+_input.outerHeight(); //上绝对距离,此处要加上表单的高度
var _dropW=_input.outerWidth()-parseInt(_input.css('border-left-width'))-parseInt(_input.css('border-right-width'))-parseInt(iset.drop.css('paddingLeft'))-parseInt(iset.drop.css('paddingRight'));
iset.drop.css({'position':'absolute','left':_left+'px','top':_top+'px','width':_dropW+'px'});
//弹出框的宽度,此处计算的是与表单实际宽度相等的.也可以直接在样式中定义.
var _txt=null;
var _maxCount=parseInt(_input.attr('data-count'));//限制选择个数
if(isNaN(_maxCount)){
_maxCount=iset.maxCount
}
_input.click(function(){
iset.drop.show();
iset.drop.bgiframe();//调用bgiframe插件,解决ie6下select的z-index无限大问题
}).bind('keyup change',function(){
//可以在此处扩展手动输入标签情况下的相关判断
//if语句可避免清空重新选择时第一个字符为逗号
if ($(this).val() == '') {
_arr = new Array();
}else {
_arr = $(this).val().split(iset.separator);//当用户手动删除或修改标签值后更新标签值
}
});
$(document).click(function(e){
//点击非弹出框区域时关闭弹出框
//下面的 if语句是用来判断传入的是class还是id
if(iset.name.charAt(0)=='#'){
if(e.target.id!=iset.name.substring(1)){
iset.drop.hide();
}
}else if(iset.name.charAt(0)=='.'){
if(e.target.className!=iset.name.substring(1)){
iset.drop.hide();
}
}
});
iset.drop.click(function(e){
//阻止弹出框区域默认事件
e.stopPropagation();
});
iset.pseudoClass.click(function(){
//标签选择
_txt=$(this).text();
//下面的$.inArray是用来判断是否重复
//若想反馈重复提示或走出限制个数提示,可改进下面的if语句
if(($.inArray(_txt,_arr)==-1) && (_arr.length<_maxCount )){
_arr.push(_txt);
_inputVal=_arr.join(iset.separator);
_input.val(_inputVal);
}
});
//关闭按钮
iset.close.click(function(){
iset.drop.hide();
});
}
});
})(jQuery);

反正先转一下喽，先备着，再找其他新的。

这个插件的网址是：http://mrthink.net/jquery-plugin-iselecttags/，可以欣赏一下

Tags: 标签

Javascript | 评论:1 | 阅读:20581

[转]为什么所有浏览器的userAgent都带Mozilla

Submitted by gouki on 2013, February 17, 11:36 AM

为什么浏览器的userAgent第一个都是mozilla呢?看了这个博客后才发现,原来,历史上发生了N多事情,在浏览器大战里,NetScape才是最后的赢家,虽然它已经消失在茫茫人海.
转自[作者:Eamonn 发布时间:2012-01-06 20:04]
时间离现在都有1年过去了,虽然在这一年里发生了很多变化,比如...opera居然也投奔了webkit,看来下一个就是webkit一统江湖了.不知道IE是否能够抗住,firefox呢???

好了不多说了,直接上原文吧.

http://www.eamonning.com/blog.php?id=289

最早的时候有一个浏览器叫NCSA Mosaic，把自己标称为NCSA_Mosaic/2.0 (Windows 3.1)，它支持文字显示的同时还支持图片，于是Web开始好玩起来。
然后出现了一个新的网页浏览器，“Mozilla”，其实就是“Mosaic终结者”的意思，这搞的Mosaic很不爽，（毕竟Mosaic出道早，江湖老），新浏览器最后正式公布的名称是Netscape，它把自己标称为Mozilla/1.0 (Win3.1)，更好玩了。Netscape支持框架显示，后来框架在大家中间流行起来了，但Mosaic不支持框架啊，于是伟大的“用户代-理人探测”技术出现了，如果是“Mozilla”，那就发给支持框架的页面，至于其他的浏览器，则发给不含框架的页面。
Netscape想逗Microsoft玩儿，把Windows叫做“几乎不曾做过调试的设备驱动器”，后者很恼火。Microsoft于是推出了自己的网页浏览器，叫做Internet Explorer，希望它能成为“Netscape终结者”。Internet Explorer也支持框架，但它不是Mozilla啊，所以没人给它发送带有框架的页面。Microsoft慢慢烦躁起来，不再寄希望于网站管理员逐渐认识IE并给它发框架，而是宣称自己是“兼容Mozilla”的，开始模仿Netscape，把自己标称为Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)，这样Internet Explorer也能收到框架了，整个Microsoft狂喜，但网站管理员开始有点被搞糊涂了。
Microsoft把IE和Windows一起卖，并且把产品也弄得比Netscape更好了，拉开了第一场浏览器之战。结果和大家知道的一样，Netscape被干掉了，Microsoft大胜、大喜。但是后来Netscape以Mozilla的新名称重生了，构造了Gecko，标称其为Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.1) Gecko/20020826，Gecko属于渲染引擎，表现优异。Mozilla开发了Firefox，标称为Mozilla/5.0 (Windows; U; Windows NT 5.1; sv-SE; rv:1.7.5) Gecko/20041108 Firefox/1.0，并且Firefox表现也非常优秀。Gecko扩张迅速，一些浏览器使用了它的代码并标称为Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7.2) Gecko/20040825 Camino/0.8.1 ，这是一个，还有Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.1.8) Gecko/20071008 SeaMonkey/1.0，另一个，它们都伪装成Mozilla，同时也都是基于Gecko支持的。
Gecko表现优秀，IE则很差劲，于是身份甄别再次发生，输送给Gecko的是设计良好的网页代码，其他浏览器就没有这个待遇了。Linux的跟随者很伤心，因为他们创建了基于KHTML引擎支持的Konqueror，但却不会被输送好代码，虽然他们自己认为KHTML和Gecko一样优秀，于是Konquerer开始伪装自己“像Gecko”那样以得到好的网页，并标称自己为Mozilla/5.0 (compatible; Konqueror/3.2; FreeBSD) (KHTML, like Gecko)，这个世界更让人困惑了。
后来出现了Opera这样的主儿，宣称“允许用户自己决定让浏览器装成谁”，它的菜单中提供了Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.51， Mozilla/5.0 (Windows NT 6.0; U; en; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.51，Opera/9.51 (Windows NT 5.1; U; en) 供大家来选择，选谁是谁。
Apple开发了Safari，使用了KHTML，同时也增加了很多新特性，后来干脆一锅煮，另起炉灶叫了WebKit，但是它有希望能够得到那些为KHTML编写的网页，于是Safari标称自己为Mozilla/5.0 (Macintosh; U; PPC Mac OS X; de-de) AppleWebKit/85.7 (KHTML, like Gecko) Safari/85.5，这个世界更混乱了。
Microsoft越来越担心Firefox的发展，重新启动了Internet Explorer的开发，标称自己为Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0) ，可以很好的渲染代码，但那要看网站管理员是否指示它这么做。
Google也开发了自己的浏览器Chrome，使用了Webkit，有点像Safari，希望能得到为Safari编写的网页，于是决定装成Safari。这样啊，Chrome使用了WebKit渲染引擎，想装成Safari，而WebKit呢又伪装自己是KHTML，KHTML呢又是伪装成Gecko的，同时所有的浏览器又都宣称自己是 Mozilla，于是，Chrome宣称自己是Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13,，UserAgent字符串彻底混乱了，也几乎不再发挥任何作用，每个人都宣称自己是别人，混乱充斥人间啊。
有点调侃的味道，可以总结为一句话：Mozilla是Netscape的吉祥物，也是Netscape Navigator浏览器使用的内部开发代号。由于Netscape早期的影响力，直到今天，所有浏览器包括IE，向Web服务器报告自己的浏览器标识的时候，都以 “Mozilla”开头，表明自己是Mozilla兼容的。这，就是原因啦。
查看浏览器标记的方法也很容易，通过JavaScript语句：
javascript:alert(navigator.userAgent)
在地址栏输入以上代码，然后回车。

最后那三段话,不是在每个浏览器中都支持,比如我的firefox18就不支持,后来在firebug的F12的console里直接alert了一下,看了看效果.....
世界已经变了

Tags: mozilla, useragent

Javascript | 评论:0 | 阅读:67332

瀑布流

Submitted by gouki on 2012, November 8, 6:23 PM

瀑布流说来也流行了和很久了。我现在的品鉴网（http://photo.pinjian.net）也是用了瀑布流。而且也正好是我想转的这篇文章中的一个JS效果。
事实上，我关注这个JS效果很久了，他最初的时候是实现了div的任意组合排版。本来是用在排版上的，结果被现在引用成图片的展示了。它就是：jQuery Masonry http://masonry.desandro.com/index.html
如果你去它的网站上，你可以看到，效果那是灰常的多，不过由于仅仅是基础，你要想更好的展现，必须要基于它再做一次开发。

不得不说，http://www.21andy.com/blog/20120527/2041.html，这里收藏了很多瀑布流的，我当然也就无需再一一找寻了。

随便转上一小段重要的URL：

目前而言实现瀑布流主要有3种方式: float, absolute, css3 colum.
最佳实现方式是绝对定位 absolute
最大的缺点就是很耗CPU内存资源，机器烂很容易卡死！

教程 http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/