手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2013年06月8日的文章

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

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

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

不多说，先看例子点此查看DEMO，怎么样，是不是很有意思？
代码也不多，不过我不懂CSS，所以。。。不知道怎么改，明天找个人纠结纠结：
JavaScript代码
  1. ;(function(){  
  2.     $.fn.extend({  
  3.         iSelectTags:function(options){  
  4.             var iset={  
  5.                 name:'.tagsbox',//表单或class或id名  
  6.                 drop:$('#dropbox'),//弹出框定位  
  7.                 pseudoClass:$('#dropbox>p>a'),//可选择的标签定位  
  8.                 close:$('em.close'),//关闭按钮定位  
  9.                 separator:',',//标签间分隔符,建议使用英文逗号  
  10.                 maxCount:10 //默认限制个数,也可以设置表单的data-count值覆盖默认值  
  11.             }  
  12.             options=$.extend(iset, options || {});  
  13.             var _input=$(iset.name);  
  14.             var _inputVal=_input.val();  
  15.             var _arr=new Array(); //存放标签的数组  
  16.             var _left=_input.offset().left; //左绝对距离  
  17.             var _top=_input.offset().top+_input.outerHeight(); //上绝对距离,此处要加上表单的高度  
  18.             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'));  
  19.             iset.drop.css({'position':'absolute','left':_left+'px','top':_top+'px','width':_dropW+'px'});  
  20.             //弹出框的宽度,此处计算的是与表单实际宽度相等的.也可以直接在样式中定义.  
  21.             var _txt=null;  
  22.             var _maxCount=parseInt(_input.attr('data-count'));//限制选择个数  
  23.             if(isNaN(_maxCount)){  
  24.                 _maxCount=iset.maxCount  
  25.             }  
  26.   
  27.             _input.click(function(){  
  28.                 iset.drop.show();  
  29.                 iset.drop.bgiframe();//调用bgiframe插件,解决ie6下select的z-index无限大问题  
  30.             }).bind('keyup change',function(){  
  31.                 //可以在此处扩展手动输入标签情况下的相关判断  
  32.                 //if语句可避免清空重新选择时第一个字符为逗号  
  33.                 if ($(this).val() == '') {  
  34.                     _arr = new Array();  
  35.                 }else {  
  36.                     _arr = $(this).val().split(iset.separator);//当用户手动删除或修改标签值后更新标签值  
  37.                 }  
  38.             });  
  39.   
  40.             $(document).click(function(e){  
  41.                 //点击非弹出框区域时关闭弹出框  
  42.                 //下面的 if语句是用来判断传入的是class还是id  
  43.                 if(iset.name.charAt(0)=='#'){  
  44.                     if(e.target.id!=iset.name.substring(1)){  
  45.                         iset.drop.hide();  
  46.                         }  
  47.                 }else if(iset.name.charAt(0)=='.'){  
  48.                     if(e.target.className!=iset.name.substring(1)){  
  49.                         iset.drop.hide();  
  50.                         }  
  51.                 }  
  52.             });  
  53.   
  54.             iset.drop.click(function(e){  
  55.                 //阻止弹出框区域默认事件  
  56.                 e.stopPropagation();  
  57.             });  
  58.   
  59.             iset.pseudoClass.click(function(){  
  60.                 //标签选择  
  61.                 _txt=$(this).text();  
  62.                 //下面的$.inArray是用来判断是否重复  
  63.                 //若想反馈重复提示或走出限制个数提示,可改进下面的if语句  
  64.                 if(($.inArray(_txt,_arr)==-1) && (_arr.length<_maxCount )){  
  65.                     _arr.push(_txt);  
  66.                     _inputVal=_arr.join(iset.separator);  
  67.                     _input.val(_inputVal);  
  68.                 }  
  69.   
  70.             });  
  71.             //关闭按钮  
  72.             iset.close.click(function(){  
  73.                 iset.drop.hide();  
  74.             });  
  75.         }  
  76.     });  
  77. })(jQuery);  
反正先转一下喽，先备着，再找其他新的。
这个插件的网址是：http://mrthink.net/jquery-plugin-iselecttags/，可以欣赏一下

Tags: 标签

Javascript | 评论:1 | 阅读:18313

MYSQL 存储过程

Submitted by gouki on 2013, June 8, 5:54 PM

 说实话，关于存储过程的博客还真的不多，有几个是值得看一下的

1、官方；http://dev.mysql.com/doc/refman/5.1/zh/stored-procedures.html

2、http://www.netingcn.com/tag/%E5%AD%98%E5%82%A8%E8%BF%87%E7%A8%8B

3、http://blog.why100000.com/?p=711

也发现，如果不做复杂查询，存储过程对我来说几乎没有，本来是想解决查找GEO相关的信息的，但发现这样的SQL：

SQL代码
  1.  SELECT userid,lat,lng,gender,  
  2.   ( 6371 * acos( cos( radians(31.000700) ) * cos( radians( lat ) ) * cos( radians( lng ) - radians(120.000099) ) + sin( radians(31.000700) ) * sin( radians( lat ) ) ) ) AS distance  
  3. FROM `user_geo` WHERE last_activity_time > '2013-03-11 00:00:00'    
  4. ORDER BY distance ASC limit 100  

这其中的复杂度就在于distance每次都要计算，所以我尝试换成了存储过程：

SQL代码
  1. DROP PROCEDURE IF EXISTS search_around_user;  
  2. DELIMITER //  
  3. CREATE PROCEDURE search_around_user  
  4. (  
  5.     s_lat float(10,6),  
  6.     s_lng float(10,6),  
  7.     s_last_act datetime,  
  8.     s_gender tinyint,  
  9.     s_number tinyint,  
  10.     s_page tinyint  
  11. )  
  12. LABEL_PROC:  
  13. BEGIN  
  14.     if s_number <= 1 then  
  15.         set s_number = 20;  
  16.     end if;  
  17.     if s_page <= 0 then  
  18.         set s_page = 0;  
  19.     end if;  
  20.     if s_gender <= 0 then  
  21.         set @genderQuery = "";  
  22.     else  
  23.         set @genderQuery = concat(" and gender = " , s_gender , " ");  
  24.     end if;  
  25.     set @limitQuery = concat("LIMIT " , s_page * s_number , " , " , s_number , " ");  
  26.   
  27.     set @strsql =  CONCAT("select userid, ",  
  28.         "( 6371 * acos( cos( radians(",s_lat,") ) * cos( radians( lat ) ) * cos( radians( lng ) - radians( ",s_lng," ) ) ",  
  29.         "+ sin( radians( ",s_lat," ) ) * sin( radians( lat ) ) ) ) AS distance ",  
  30.         " FROM user_geo where last_activity_time >= '", s_last_act , "' " , @genderQuery ,  " ORDER BY distance " , @limitQuery) ;  
  31.   
  32.     prepare stmtsql from @strsql;  
  33.     execute stmtsql;  
  34.       
  35.   
  36. END LABEL_PROC;  
  37. //  
  38. DELIMITER ;  

然后再次调用：

SQL代码
  1. call search_around_user(31.000700,120.000099,'2013-03-11 00:00:00',0,20,0)  

所耗费的时间和上述直接写SQL的时间是几乎一样的。想来，这也是因为distance的计算不能被优化而导致的。。。于是乎，放弃用存储过程

 

 

Tags: mysql, 存储过程

DataBase | 评论:0 | 阅读:16804