my blog my blog

Category: 建站心得
Facebook你的帐号暂时被锁定如何处理?

 

好吧,这是我今天遇到的最蛋疼的一个问题,"你的帐号暂时被锁定 你之前似乎未用此设备登录过。为保障你的账号安全,请回答几个问题",因为我知道我的facebook密码,但是登陆就让我输入生日,也怪自己注册的时候没注意没小心,结果,唉,始终输入错误,最后还是找软小姐帮忙处理好的,哎呀,软小姐就119啊。其实你可以完全让自己的好友看自己的生日是多少嘛,然后有密码就一切ok了。

PS:IFTTT支持weibo,但是不支持中文短信,这个真的很蛋疼,想要个免费的中文天气提醒都不成,蛋疼啊蛋疼啊~~~

通过CSS屏蔽weibo的好友关注推荐

 

weibo没有会员实在是有些恶心了,那些推荐也好烦人,好吧,代码说:

  1. <div node-type="feed_spread" class="WB_cardwrap WB_feed_type S_bg2"> </div> 

这个就是那个微博中穿插好友关注推荐的代码,如果用css选中它我们当然不能用.WB_cardwrap.WB_feed.type S_bg2来做,因为这样子会同样选中其它的推文,那样子就看不到别人的微博了,我们要做的是

  1. [node-type=feed_spread] {visibility:hidden;display:none;} 

好吧,就是如此简单,可以轻松的屏蔽掉微博的页面中穿插的好友推荐。

使用的是CSS [attribute] 选择器,具体教程可以参考:  http://www.w3school.com.cn/cssref/selector_attribute.asp

流式网格布局宽度控制的处理到响应式布局

 

最近写了个小企业站,使用的是BootStrap的fluid layout流式布局,自己的笔记本分辨率是1333×768的,所以页面设计在本机测试没什么问题,但是交付的时候发现人家说在小分辨率上太难看了,然后就得解决,其实说来也简单,就直接用min-width来作控制即可。最简单的方案就是在css中这样子设置

  1. html,body{ 
  2.     min-width:1333px

这样子处理完成后,可以保证页面的最小宽度为1333px,理论上页面就不会走形了,而这个min-width是css2的,所以兼容性肯定也可以保证。但是,从这里,可以引申联想到一些设计时候需要注意的问题。

1.低分辨率的设备访问时候,是否可以根据分辨率自适而不是单纯的用最小宽度来控制。

2.对于移动设备的访问时候,是否可以根据不同的分辨率有不同的排版甚至部分内容的显示隐藏控制。

好吧,响应式,对响应式设计。

默认的BootStrap是没有加入响应式的css的,需要手动引用,官方doc中是这样子描述的

  1. Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. 
  2. If you've compiled Bootstrap from the Customize page, you need only include the meta tag. 
  3.  
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  5.     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> 
  6.  
  7. Heads up! Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. 
  8. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed. 

就是说,需要手动引用两行代码到head标签中。第二行引用就不说了,是引用的响应式的css文件,第一行引用需要说下,这是对viewport的说明。宽度与设备的宽度相适应,缩放默认比例为1。当然content还可以有其它内容

  1. width:viewport 的宽度,可以指定为一个像素值,如:600,或者为特殊的值,如:device-width (设备的宽度)。 
  2. height:viewport的高度。 
  3. initial-scale:初始缩放比例,即当浏览器第一次加载页面时的缩放比例。 
  4. maximum-scale:允许浏览者缩放到的最大比例,一般设为1.0。 
  5. minimum-scale:允许浏览者缩放到的最小比例,一般设为1.0。 
  6. user-scalable:浏览者是否可以手动缩放,yes或no。  

这样子就引入了BootStrap的响应式css了。到了这里还没有完,我们应该去关注下这个响应式的css是怎么具体实现的响应式功能。打开css文件后你会发现最大的不同是该css文件中引用了很多@media,对,这就是Media Queries啦,Media Queries也是css3的一个重要功能,它提供了对不同的设备分辨率进行适配的功能。

Media Queries的格式如下:

  1. @media 设备类型 and (设备特性) { 样式代码 } 

其中的设备类型有:

  1. 1、all:所有设备 
  2. 2、screen :电脑显示器 
  3. 3、print:打印用纸或打印预览视图 
  4. 4、handheld:便携设备 
  5. 5、tv:电视机类型的设备 
  6. 6、speech:语意和音频盒成器 
  7. 7、braille:盲人用点字法触觉回馈设备 
  8. 8、embossed:盲文打印机 
  9. 9、projection:各种投影设备 
  10. 10、tty:使用固定密度字母栅格的媒介,比如电传打字机和终端 

然后就是设备特性了,这个设备特性跟viewport很相似

  1. 1、width:浏览器宽度 
  2. 2、height:浏览器高度 
  3. 3、device-width:设备屏幕分辨率的宽度值 
  4. 4、device-height:设备屏幕分辨率的高度值 
  5. 5、orientation:浏览器窗口的方向纵向还是横向,当窗口的高度值大于等于宽度时该特性值为portrait,否则为landscape。 
  6. 6、aspect-ratio:比例值,浏览器的纵横比. 
  7. 7、device-aspect-ratio:比例值,屏幕的纵横比. 
  8. 8、color:设备使用多少位的颜色值,如果不是彩色设备,值为0 
  9. 9、color-index:色彩表的色彩数 
  10. 10、monochrome:单色帧缓冲器每个像素的字节 
  11. 11、resolution:分辨率值,设备分辨率值 
  12. 12、scan:电视机类型设备扫描方式,progressive或interlace 
  13. 13、grid:只能指定两个值0或1 

其中呢,设备类型是可以忽略掉不必须写的,默认应该是all。像BootStrap的响应式css中就是用如下的格式来进行css定义的

 

  1. /* Large desktop */ 
  2. @media (min-width1200px) { ... } 
  3.   
  4. /* Portrait tablet to landscape and desktop */ 
  5. @media (min-width768px) and (max-width979px) { ... } 
  6.   
  7. /* Landscape phone to portrait tablet */ 
  8. @media (max-width767px) { ... } 
  9.   
  10. /* Landscape phones and down */ 
  11. @media (max-width480px) { ... } 

如果需要对范围进行一个界定的话可以使用and关键词。这样子就可以完成对不同的分辨率的设备进行单独的布局设置调整了。在BootStrap中还有一点是比较不错的,它支持.visible-phone、.visible-tablet、.visible-desktop、.hidden-phone、.hidden-tablet、.hidden-desktop这几个属性来对不同的设备进行定义是否显示某些模块。

最近要是有空就写个小响应式的demo玩儿玩儿~~~酱说我的文章分类有点儿乱,其实,我也是这么觉得的,很多事儿都该条理下了~

用七牛云储存作CDN提升网站加载速度

 

最近写了一个小型静态企业站,为了测试方便就直接用了七牛云储存,因为是静态页面,所以所有的页面文件素材都放七牛上就可以了,页面的载入速度还是比较理想的,比直接用国内主机应该要好一些,至少不会宕机吧。今天咱就说说这两年开始流行的CDN。

以前也用过cloudflare、CDNZZ的产品,对于国外主机的站点还是有一定效果的。CDN通过抓取全站的静态资源,当访问者发出DNS请求的时候,cdn的dns服务器就对请求的资源进行相应的线路选择,线路优化后加载速度就会得到一定的提升。作为静态页面来说,除去.html文件的加载,剩下的就是加载css、js以及图片资源了。其实,如果直接不使用CDN的话,将css、js以及图片资源都放在譬如七牛云储存这样的地方也是可以的,只要将这些资源设置为外链的方式即可,同样可以起到很好的作用。

引用外部资源必然就需要引用外部的域名,这个可能会增加一个域名的解析时间,奶牛以前的做法是把所有的js资源都置在本地,好处是不用害怕网络不连通造成的网站页面走形。现在随着云储存的发展,完全可以把这些资源置于外部储存来解决。而且浏览器的并发现在也都蛮不错的,基本上并发出去对小型的静态页面就可以很快的抓取回所有内容。

再说说七牛,七牛的云储存在路径方面还是挺新颖的,因为貌似就没有路径的概念,只是把资源作为整体,用key value的方式进行储存,使用命名中带有/来作为分割目录。感兴趣的朋友可以测试下,并且七牛有同步的程序,配置好conf就直接用同步来放置静态页面即可。七牛每月送10G的流量,这个对于普通的静态资源来说,流量也不算小了,所以今天推荐下。

点此免费注册七牛云储存

 

JavaScript操作浏览器Cookie

 

最近在构思一个企业站建设的中英文页面问题,想到双语,我觉得两种方法实现起来比较好,一种是ajax直接把数据调用过来,但是对于有很多个div块儿的像首页这种的页面的话,可能要有几个ajax请求,所以,我觉得还是使用预先在页面的html中填写后通过cookie来控制比较方便。

使用cookie定义一个language的项,使用cn/en来区分语言,在页面的class中添加cn/en作为区分中文英文的标志,这样子,需要中文英文切换的时候,直接调用jQuery就可以方便的搞定了。

  1. $('.cn').hide(); //关闭中文 
  2. $('.en').show(); //开启英文 
  3. $('.en').hide(); //关闭英文 
  4. $('.cn').show(); //开启中文 

默认情况下显示中文,在页面载入完成后对页面进行cookie的判断,判断是否有定义,如果没有定义就不管了,如果有定义language项,那么就通过js控制启用cookie记录的语言。当页面浏览的时候,监视页面的语言选择按钮,这样子,在切换语言的同时将对应的cookie记录下来,并设置一个较为长久的过期时限即可。对于cookie的操作呢,使用js的document.cookie也可,也可以使用轻量级封装的类库jquery.cookie,当然咯,还是类库方便一些,通过api直接查直接用,但是对于cookie的理解还需要知道两点的:

  1. cookie默认是以session为周期的,会话结束,cookie亦失效。 
  2. cookie可以设置过期日期的(常用的记住密码就是用这个实现) 
  3. cookie的删除操作其实就是将cookie的过期日期设置在过去,然后cookie就自动失效删除了 

剩下的就不多说了,直接去https://github.com/nenew/jquery-cookie 拿类库来用吧,要不复杂结构的cookie手动拆析分离太麻烦了。

奶牛毕业了

 

今天中午跟浩文、大双、守谦、高强吃了顿不算散伙饭的散伙饭,该聚的也就这样子聚完了,虽然还有很多人想见,但终还是没见上一面。不要问我工作如何,我心理上还没准备好,再给我两年准备吧。

正如酱所说,毕业是件很仓促的事儿。

做毕设的时候挺紧张挺充实的,甚至觉得是大学最充实的日子,可是毕设完成后就是整理论文,答辩,一切都变得匆匆了,那份离愁却不断涌来,说真的,还没玩儿够,没学够,好多东西都还只是想过却没做过,虽然,大学这样子下来,遗憾并不太多,最后一年拿到了人生的第一次奖学金,也拿到了优秀毕设,大学就这样散了对么?

最近一周都在各种饭局间游荡,最大的感慨就是千万别跟哥们儿提喝酒了,怕了,啤酒看都不想看见了。可能这东西是最解离愁的,所以喝吧,可能再都没法跟这群玩了四年的人再这样子喝了玩儿了,你会怀念,当这一切都回不去的时候。

最近可以接一些项目,网站建设方面的(企业站神马的),有小项目的果断抛过来,2K+预算的,低预算的就做不了了。

有业务的加,谢谢。

jQuery实现页面内平滑回到顶部的过程分析及实现方法

 

jQuery可以实现一些很绚丽的网页效果,比如淡入淡出还有滑动效果等,它的动画自定义也很强大,animate()功能很出色,今天奶牛跟大家一起来看看那些网页中的回到顶部或者回到底部如何用jQuery来实现平滑滚动。

首先,我们需要知道,我们的滚动要到达的目的地,比如一个页面内的元素,我们要知道它距离窗口顶部的位置。这样子,比如我们的header的id就是header,footer的id就是footer。那么我们可以通过offset()方法来获得一个top跟left值。

  1. $('#header').offset() 
  2. $('#footer').offset() 

因为我们需要的是页面上下滚动,所以我们只需要offset()方法来获得的top值

  1. $('#header').offset().top 
  2. $('#footer').offset().top 

现在目的地已经有了,那么我们将来实现到达目的地的方法,就是scrollTop()方法,这个方法在没有参数的情况下,返回一个当前滚动距离top顶端的值,如果scrollTop(value)的话,我们将直接滚动到页面的那个位置

  1. $(window).scrollTop($('#header').offset().top) 
  2. $(window).scrollTop($('#footer').offset().top) 

这样子的实现太过僵硬,因为是直接到达目的地,所以我们下一步就是为它添加动画效果

  1. $('html').animate({scrollTop:$('#header').offset().top},800); 
  2. $('html').animate({scrollTop:$('#footer').offset().top},800); 

其中的800是动画持续的时间,在持续时间之后我们还可以增加’swing‘或者’linear’

  1. $('html').animate({scrollTop:$('#header').offset().top},800,'swing');  
  2. $('html').animate({scrollTop:$('#footer').offset().top},800,'linear');  

具体效果可以自己测试下,linear是匀速的运动,默认是swing

这样子,我们需要的功能就已经实现了。比如你可以固定一个元素并未其进行监听,然后当点击的时候执行上面的jquery代码。

  1. $(document).ready(function(){ 
  2.     $('#scroll').hide(); 
  3.     $(window).scroll(function() { 
  4.         if($(window).scrollTop() >= 100){ 
  5.             $('#scroll').fadeIn(400); 
  6.         } 
  7.         else 
  8.         { 
  9.             $('#scroll').fadeOut(200); 
  10.         } 
  11. }); 

下面的一段代码可以实现,当页面的滚动超过100px的时候,就会展现id为scroll的元素,如果不超过的话就隐藏。

参考文章:

http://docs.jquery.com/CSS

http://docs.jquery.com/CSS/scrollTop

http://api.jquery.com/offset/

http://api.jquery.com/scrollTop/

http://api.jquery.com/animate/

小结

 

1.button

js监听一个button的click事件,preventDefault()无效,不一定是js没写对,而是button有没有定义type=“button”,在一个form表单中,button如果不定义的话,默认就做submit处理了,所以请求直接就发出去了,监听也没用。

2.hibernate查询分页

最简单的还是hibernate的query直接在querystring中进行限定,限定setFirstResult()和setMaxResults()。比如我们要从第11条记录开始查询,那么我们可以这样子写

  1. String queryString = "select m from Profile as m where m." 
  2.                     + propertyName1 + "= ? and m." + propertyName2 + "= ?"
  3.             Query queryObject = getSession().createQuery(queryString) 
  4.                     .setFirstResult(10).setMaxResults(10); 
  5.             queryObject.setParameter(0, value1); 
  6.             queryObject.setParameter(1, value2); 
  7.             List<?> s = (List<?>) queryObject.list(); 
  8.             return s; 

这样子返回一个查询结果的list,然后迭代出来就可以了,当然,这只是查询部分的,如果要写分页的话,还需要count()等来辅助进行。

3.jquery的.on()

如果我们直接用$(document).ready(function(){})来做的话,对于使用ajax调用产生的新的dom元素,用一般的.click()等事件监听是不会起到作用的,在老版本的jQuery中使用.live()可以来进行对未来元素和现有元素的监听工作,但是新版本的建议是使用.on()来进行处理,这样子新生成的元素也就自然而然的可以监听到了。

4.jquery的遍历

遍历的话jquery的方法真的很好用,特别是选择器,很方便,.parent()、.children()、.prev()、.next()用起来非常省事儿。

5.jquery的ajax

  1. var data = {"userid" : $('input[name="userid"]').val(), 
  2. "phonenum" : $('input[name="phonenum"]').val(), 
  3. "email" : $('input[name="email"]').val() 
  4. }; 
  5. $.post('profile-update', data, function(data, textStatus, jqXHR) { 
  6. if (jqXHR.success(function() { 
  7.     alert("success"); 
  8. }) 
  9. ); 

当然,也可以直接连缀上一个.success()来处理,可以看http://api.jquery.com/jQuery.post/

6.hibernate的casecade级联

对于一对多或者多对多的情况,如果删除主表中的记录,那么以主表的主键做外键的其它表就会产生错误,导致删除失败,需要设置hibernate的配置文件casecade为delete,这样子删除的时候就可以自动把这些也删除了,当然还有其它的选项,感兴趣的话可以直接查找casecade的相关内容。

CSS之使用clearfix清除浮动

 

好多东西,现用现学现查,然后记录下来,这几年都是这样子。看过很多东西,但是未必都记住了,有点儿印象,然后需要的时候再现学。今天分享下clearfix。

首先,奶牛直接copy下bootstrap里面的写法:

  1. .clearfix { 
  2.   *zoom: 1
  3.  
  4. .clearfix:before, 
  5. .clearfix:after { 
  6.   display: table; 
  7.   line-height0
  8.   content""
  9.  
  10. .clearfix:after { 
  11.   clearboth

在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹,可以保证外部div的height,即清除"浮动元素脱离了文档流,包围图片和文本的 div 不占据空间"的问题。

看到”闲聊CSS之关于clearfix–清除浮动“ (http://www.indievox.com/e2ghost/post/50238)的文章给了一个比较清晰的分析:

  1. 构成Block Formatting Context的方法有下面几种: 
  2.  
  3.     float的值不为none。 
  4.     overflow的值不为visible。 
  5.     display的值为table-cell, table-caption, inline-block中的任何一个。 
  6.     position的值不为relative和static。 
  7.  
  8. 很明显,float和position不合适我们的需求。那只能从overflow或者display中选取一个。
  9. 因为是应用了.clearfix和.menu的菜单极有可能是多级的,所以overflow: hidden或overflow: auto也不满足需求
  10. (会把下拉的菜单隐藏掉或者出滚动条),那么只能从display下手。 
  11.  
  12. 我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个
  13. 但是display: inline-block会产生多余空白,所以也排除掉。
  14. 剩下的只有table-cell, table-caption,为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context
  15. 因为display: table会产生一些匿名盒子,这些匿名盒子的其中一个(display值为table-cell)会形成Block Formatting Context。
  16. 这样我们新的.clearfix就会闭合内部元素的浮动。 

这就是为什么选择display:table的原因。

TinyMCE多输入框手动激活解决方案

 

昨晚弄那个TinyMCE编辑器,对于单输入框的时候还是比较好处理的,直接自动生成实例就激活了,但是当一个页面有多个输入框的时候就变得很复杂了。比如有三个四个的输入框,默认生成实例激活的话会很难看很乱,我们的目标是当一个输入框onfocus状态的时候激活TinyMCE编辑器,激活另一个输入框onfocus状态的时候,已激活的TinyMCE编辑器关闭,并在新的输入框中显示编辑器。

对于已经初始化好的textarea我们可以通过如下调用textarea id的方法进行显示和关闭:

  1. tinyMCE.get('nenew').show(); 
  2. tinyMCE.get('nenew').hide(); 

但是如果直接在tinymce的tinymce.init()之后调用会发生error,因为tinymce的实例可能还并没有初始化完成,所以我们需要一个回调,TinyMCE的API还是很全面的,虽然昨晚用的那个API有点儿小麻烦,不过已经折腾成功,经验分享下。

This option should contain a function name to be executed each time a editor instance is initialized. The format of this function is: initInstance(inst) where inst is the editor instance object reference.

Example of usage of the init_instance_callback option:

  1. function myCustomInitInstance(inst) { 
  2.         alert("Editor: " + inst.editorId + " is now initialized."); 
  3. tinyMCE.init({ 
  4.         ... 
  5.         init_instance_callback : "myCustomInitInstance" 
  6. }); 

上面是init_instance_callback的回调接口,但是还是得仔细读读那段说明:“这个选项在每个编辑器实例初始化完成后都要执行一次,这个function的格式是function callback(inst),而这个inst就是刚刚初始化完成的实例。”

可能看到上面的话你会觉得有些绕,对于后半句的那个功能是针对实例初始化完成后调用的,这是我们所需要的,但是请注意,这个回调是在每个实例初始化完成后都执行的,换句话说,你有4个textarea这个callback就要执行四次,但是如果你在这个callback中执行了针对未初始化的实例的操作,就会发生错误导致js无法继续进行初始化。

针对我们上面所说的,我们的目的是在所有textarea实例初始化完成后执行对于实例的隐藏,所以如果我们有三个实例的话,我们只要在第三个实例初始化完成后执行一次就可以了。直接上代码:

  1. <form> 
  2. <textarea id="1"  
  3. onfocus="tinyMCE.get('1').show();tinyMCE.get('1').focus();tinyMCE.get('2').hide();tinyMCE.get('3').hide();"> 
  4. </textarea> 
  5. <textarea id="2"  
  6. onfocus="tinyMCE.get('2').show();tinyMCE.get('2').focus();tinyMCE.get('1').hide();tinyMCE.get('3').hide();"> 
  7. </textarea> 
  8. <textarea id="3"  
  9. onfocus="tinyMCE.get('3').show();tinyMCE.get('3').focus();tinyMCE.get('1').hide();tinyMCE.get('2').hide();"> 
  10. </textarea> 
  11. </from> 

这个是表单的形式,也就是在每次onfocus状态的时候tinymce的激活关闭与选中,下面是javascript的初始化

  1. <script src="editor/tinymce.min.js"></script> 
  2. <script type="text/javascript"> 
  3.     tinymce 
  4.             .init({ 
  5.                 selector : "textarea", 
  6.                 plugins : [ 
  7.                         "advlist autolink lists link image charmap print preview anchor", 
  8.                         "searchreplace visualblocks code fullscreen", 
  9.                         "insertdatetime media table contextmenu paste" ], 
  10.                 toolbar : "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
  11.                 autosave_ask_before_unload : false, 
  12.                 max_height : 200, 
  13.                 min_height : 160, 
  14.                 height : 180, 
  15.                 init_instance_callback : "hidetinymce" 
  16.  
  17.             }); 
  18.     var i = 3
  19.     function hidetinymce(inst) { 
  20.         if (--i == 0) { 
  21.             try { 
  22.                 tinyMCE.get('1').hide(); 
  23.                 tinyMCE.get('2').hide(); 
  24.                 tinyMCE.get('3').hide(); 
  25.             } catch (error) { 
  26.  
  27.             } 
  28.         } 
  29.     } 
  30. </script> 

我们用一个变量i来做计数器,当实例3初始化完成后执行try内的内容,然后即可完成实例初始化完成后执行隐藏。

PS:tinymce的新版本还是蛮好看的,跟bootstrap的白色主题很搭,让人很喜欢。