my blog my blog

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

 

最近写了个小企业站,使用的是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玩儿玩儿~~~酱说我的文章分类有点儿乱,其实,我也是这么觉得的,很多事儿都该条理下了~

Holo风格圆盘进度条knob使用教程

 

jQuery Knob是一款可以实现圆盘风格进度条的小插件,使用很方便,api也比较全面。先上个效果图:

jquery knob

这个是奶牛自己写的一个小效果图,下面说说knob。knob的实现的效果是HTML5的canvas。兼容性上Chrome, Safari, Firefox, IE 9.0都可以,还蛮不错的。更多效果可以看http://anthonyterrien.com/knob/。

下面说说使用:

1.下载knob可以去https://github.com/aterrien/jQuery-Knob,也可以直接

  1. git clone git://github.com/aterrien/jQuery-Knob.git 

2.嵌入html中js代码

  1. <script src="js/jquery.knob.js"></script> 

3.使用,knob是通过对<input>进行处理来实现canvas绘图的。先在页面中插入一个input

  1. <input class="knob" type="text" value="30" data-width="150" 
  2. data-fgColor="#009100" data-skin="tron" data-thickness=".1" 
  3. data-angleOffset="0">  

我这个里面已经加了一些参数,等下解释。

4.通过js脚本来对knob进行初始化

  1. $('.knob').knob(); 

这是最简单的操作,当然,根据官方的文档,初始化里面是可以提供参数的。也就是说上面input里面的data-的参数都可以通过初始化来完成。如格式:

  1. $(".knob").knob({ 
  2.                 'width':150 
  3.                 ,'fgColor':"#009100" 
  4.                 ,'thickness':".1" 
  5.                 ,'angleOffset':"0" 
  6.                 }); 

这样子,其实input里面只要标识出class或者id以及value供使用就可以了。

5.关于演示页面中的skin的使用,奶牛看了下代码,是通过如下方式实现的。

  1. $('.knob').knob({draw : function () { 
  2.  
  3.                     // "tron" case 
  4.                     if(this.$.data('skin') == 'tron') { 
  5.  
  6.                         var a = this.angle(this.cv)  // Angle 
  7.                             , sa = this.startAngle          // Previous start angle 
  8.                             , sat = this.startAngle         // Start angle 
  9.                             , ea                            // Previous end angle 
  10.                             , eat = sat + a                 // End angle 
  11.                             , r = true
  12.  
  13.                         thisthis.g.lineWidth = this.lineWidth; 
  14.  
  15.                         this.o.cursor 
  16.                             && (sat = eat - 0.3) 
  17.                             && (eateat = eat + 0.3); 
  18.  
  19.                         if (this.o.displayPrevious) { 
  20.                             ea = this.startAngle + this.angle(this.value); 
  21.                             this.o.cursor 
  22.                                 && (sa = ea - 0.3) 
  23.                                 && (eaea = ea + 0.3); 
  24.                             this.g.beginPath(); 
  25.                             thisthis.g.strokeStyle = this.previousColor; 
  26.                             this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false); 
  27.                             this.g.stroke(); 
  28.                         } 
  29.  
  30.                         this.g.beginPath(); 
  31.                         this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ; 
  32.                         this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false); 
  33.                         this.g.stroke(); 
  34.  
  35.                         this.g.lineWidth = 2
  36.                         this.g.beginPath(); 
  37.                         thisthis.g.strokeStyle = this.o.fgColor; 
  38.                         this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false); 
  39.                         this.g.stroke(); 
  40.  
  41.                         return false; 
  42.                     } 
  43.                 } 
  44.             }); 

这样子一个可行的绘图就出来了,下面说说怎么修改值:

  1. $('.change').change(function(){ 
  2.                 $('.knob').val($('.change').val()).trigger('change'); 
  3.             }) 

比如我们还有一个input的class为change,那么只要change以改变,就直接反馈到canvas绘图上了。更详细的api可以参考https://github.com/aterrien/jQuery-Knob。

关于XMLHttpRequest状态的讨论及处理方法

 

这两天把html5的Drag 、File API 和XMLHttpRequest Level 2的一些东西看了下,写了几个小demo,可以实现文件拖放进入浏览器,文件预览以及文件上传,打算过几天好好整理下,然后推到github上做个开源小项目。

今天主要是讨论下XMLHttpRequest的响应状态问题。我们知道,XMLHttpRequest的响应阶段有5个,分别是:

  1. 请求未初始化 
  2. 服务器连接已建立 
  3. 请求已接收 
  4. 请求处理中 
  5. 请求已完成,且响应已就绪 

我们是通过onreadystatechange来进行判断的,我们可以得到的状态只有4个。就是从服务器链接已建立到请求完成。昨天也搜索了下网络,对这个状态的分析并不是很多,奶牛自己测试了下,分享下。

首先,正常情况下,我们可以得到4个阶段的情况,一个成功的请求并得到响应的readyState及status如下:

  1. readyState:1   status:0 
  2. readyState:2   status:200 
  3. readyState:3   status:200 
  4. readyState:4   status:200 

也就是说,当请求到达“请求已接收”阶段的时候就已经反馈回来了http status,就是我们看到的200,这个是正常的状态。

我们来设想这样一种情景:我们请求交互的服务器与我们的网络并不连通,或者说目标服务器已经下线、服务器无响应,会是种什么状态呢?应该如何处理呢?这是不是响应超时呢?我们来测试下:

  1. readyState:1   status:0 
  2. POST http://127.0.0.1/upload 
  3. readyState:2   status:0 
  4. readyState:4   status:0 

通过结果我们可以看出,我们的请求已经发出,但是由于服务器对接收到的请求并没有应答,因此我们并没有得到服务器的响应状态,并且服务器的处理状态我们也不得而知,也就是为什么没有readyState3的原因,而在readyState4的阶段,我们得到的status是0,这也就是我们需要来处理的状态,即readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0),这个状态我们应该归结为error、abort、timeout还是其它呢?

奶牛把它分类到其它里面,处理方法在onreadystatechange里面处理。

  1. xhr.onreadystatechange = function() { 
  2.      console.log("readyState:"+xhr.readyState+"   status:"+xhr.status); 
  3.      if (xhr.readyState == 4 && xhr.status == 200) { 
  4.           console.log("Request successful!");}; 
  5.      if(xhr.readyState == 4 && xhr.status == 0){ 
  6.           console.log("No response from server!"); 
  7.      }; 
  8. }; 

对于服务器无应答无响应或者错误状态的处理方法都应放在onreadystatechange,http status有很多,可参考http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

在XMLHttpRequest Level 2里面有新增加一个timeout的设置及处理方法,超时是指request请求并没有在规定的时间内完成的一种情况,设置方法如下:

  1. xhr.timeout = 3000
  2. xhr.ontimeout = function(event){ 
  3.         alert('time out !'); 
  4.       } 

这样子,如果在3秒内交互未完成,则提示超时并终止,我们假设一种极端的情况,既在1ms内服务器未能完成请求,这种状态很容易得到,我们来看下反馈信息:

  1. readyState:1   status:0 
  2. POST http://127.0.0.1/upload 
  3. readyState:4   status:0 

当然,在非极端的情况下,也就是说在变化阶段2、3的时候如果超时,则readyState == 4的时候也有 status ==0 ,所以,我们可以把超时归结到readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)的状态,但是并不能把readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)的状态说是超时,因为超时是在服务器有反馈的时候才有效的,即在readyState ==2 时候status有具体响应值的时候,所以readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)的状态是包含超时状态的。

而对于readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)的状态可以用上文中的方法进行处理。

毕设来了

 

2013年的毕业设计,比以往时候来得更晚一些。认识的人早早的都拿到毕设题目神马的了,只有我们学校还迟迟的到开学才抽签选题目。学校压根儿就没安排神马实习,这是我觉得大学比较大的遗憾,哪怕实习水点儿也好哇,总比没有得强。

说说毕设,毕设选的嵌入式软件方向的宿老师,说真心话,大学里面论教学,我最喜欢宿老师的教学风格,有问题直接查官方文档,对于教学的内容也很好的把握,从基础开始,但并不缺少对于后期的一些提要,java课是我大学觉得最有意思的课。

毕设方向也是java相关的,可以选android应用开发,也可以选java web,奶牛想了不少,也开始看java web方面的书籍了,得寻思上手哇,然后js神马的后期也得学起,html5 css3的能用就用,咋说新东西还是会让人眼前一亮的吧。

只想踏踏实实的把毕设做好,大学就毕业了,总不想自己虚度最后的时光,浑浑噩噩混日子神马的是不可取的。