Category Archives: Frontend

关于适配你需要知道的—MobileWeb适配总结

开门见山，本篇将总结一下MobileWeb的适配方法，即我们常说的H5页面、手机页面、WAP页、webview页面等等。 本篇讨论的页面指专门针对手机设备设计的页面，并非兼容全设备的响应式布局。 文中提到的 device-width 指 viewport meta 标签中 width 的值，即由浏览器指定的值，常用机型对应值可参照Screen Sizes。 适配达到的效果是什么？ 在不同尺寸的手机设备上，页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放（看起来差不多）”。 适配应关注哪些要素？ 一般来说，我们需要关注的是：字体、高宽间距、图像（图标、图片）。 其中，图像相对要复杂一些，针对流量、清晰度等问题网上也有比较成熟的解决方案，比如：矢量化、字体化、image-set 等等，在此不做深入。在满足快速开发的需求下，我们使用较为偷懒的方式：利用 css 将图像限定在元素内（ img 图片使用 [max-]width: 100% ，背景图像使用 background-size ），布局只针对元素进行。 另外要考虑到，设计师设计视觉稿时使用什么样的宽度，才能既满足设计自身的需求又能让前端开发方便的切图适配。 举个例子 围绕这三要素，我们用一个小例子来说明接下来要介绍的三种方案的实现方式，按 640px 标准需实现的效果如图： app.jpg 固定高度，宽度自适应 这是目前最通用的一种做法，属于自适应布局，viewport width 设置为 device-width，以较小宽度（如 320px）的视觉稿作为参照进行布局。垂直方向的高度和间距使用定值，水平方向混合使用定值和百分比或者利用弹性布局，最终达到“当手机屏幕变化时，横向拉伸或者填充空白的效果”。图像元素根据容器情况，使用定值或者 background-size 缩放。 粗略浏览了下一些大厂的首页，像百度、腾讯、Facebook、Twitter 都是采用的这种方案。 要点： 以小宽度作为参照是因为如果布局满足了小宽度的摆放，当屏幕变宽时，简单的填充空白就可以了；而如果反过来就可能造成“挤坏了”，考虑 header 区域，左测 logo 右测横向 nav 的情况。 需要小宽度的布局，又需要大宽度的图像，这是一个矛盾点。 320px 过于窄小，不利于页面的设计；只能设计横向拉伸的元素布局，存在很多局限性。 兼容性较好。 实现比较简单，样式中的尺寸都按照视觉稿二分之一大小设置，查看效果和代码。 固定宽度，viewport 缩放 视觉稿、页面宽度、viewport width 使用统一宽度，利用浏览器自身缩放完成适配。页面样式（包括图像元素）完全按照视觉稿的尺寸，使用定值单位 （px、em）即可完成。 优点： 开发简单：缩放交给浏览器，完全按视觉稿切图。 还原精准：绝对等比例缩放，可以精准还原视觉稿（不考虑清晰度的情况下）。 测试方便：在PC端即可完成大部分测试，手机端只需酌情调整一些细节（比如图标、字体混合排列时，因为字体不同造成的对齐问题）。 存在的问题： 像素丢失：对于一些分辨率较低的手机，可能设备像素还未达到指定的 viewport 宽度，此时屏幕的渲染可能就不准确了。比较常见的是边框“消失”了，不过随着手机硬件的更新，这个问题会越来越少的。 缩放失效：某些安卓机不能正常的根据 meta 标签中 width 的值来缩放 viewport，需要配合 initial-scale 。 文本折行：存在于缩放失效的机型中，某些手机为了便于文本的阅读，在文本到达 viewport 边缘（非元素容器的边缘）时即进行折行，而当 viewport 宽度被修正后，浏览器并没有正确的重绘，所以就发现文本没有占满整行。一些常用的段落性文本标签会存在该问题。 缩放失效问题需通过 js 动态设定 initial-scale

文本折行问题可以通过 […]

关于CSS3的box-sizing

以前写padding都要从宽高里送去相应的值，今天看京东手机版网页，发现了box-sizing:border-box;，加上之后就不用再减去相应的值了，因为填充已经到边框里面了。 定义和用法 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 默认值： content-box 继承性： no 版本： CSS3 JavaScript 语法： object.style.boxSizing="border-box"

修改placeholder的颜色

CHROME下去掉保存密码后输入框变成黄色背景样式

用阴影实现:

如果不想保存密码的话加个autocomplete="off"到form或者input就行了。 from:http://jinzhe.net/post/26.html

利用Data URL(data:image/jpg;base64,)将小图片生成数据流形式

先看一段代码：

那这些代码是如何生成的咧？ 先看下这些代码“data:image/jpg;base64,iVBORw0KGgoAAAANSUhE……” 就是一张图片的Data URL，就是利用base64编码把图片数据翻译成标准ASCII字符。 等同于：

显示结果： Data URL是在本地直接绘制图片，不是从服务器加载，所以节省了HTTP连接，起到加速网页的作用。 语法： data:image/jpg;    声明数据协议及类型名称 base64,               编码形式为base64 /9j/4AAQSkZ……    base64编码结果 最后附上Data URL的生成方法（PHP）：

注意：本方法适合于小图片，大图片就不要考虑了，另外IE8以下浏览器不支持这种方法。用这种方法会加重客户端的CPU和内存负担，总之有利有弊。 from:http://www.lvtao.net/dev/php-image-data-url.html

使用jquery获取父元素或父节点的方法

jquery获取父元素方法比较多，比如parent()，parents()，closest()这些都能帮你实现查找父元素或节点，下面我们来一一讲解： 先举个例子， 1.<ul class="parent1"> 2.<li><a href="#" id="item1">jquery获取父节点</a></li> 3.<li><a href="#">jquery获取父元素</a></li> 4.</ul>   我们的目的是通过 id 为 item1 的便签a取到 class 为 parent1 的ul元素，有以下几种方法： 1、parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合。 你可以使用可选的表达式来筛选。 代码如下 1.$('#item1').parent().parent('.parent1'); 2、:parent 匹配含有子元素或者文本的元素 代码如下   1.$('li:parent');  3、parents([expr]) 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。 代码如下  1.$('#items').parents('.parent1'); 4、closest([expr]) closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。 closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后 就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0 个，1个，或者多个元素。 closest对于处理事件委派非常有用。 1.$('#items1').closest('.parent1'); from:http://www.cnblogs.com/weixing/archive/2012/03/20/2407618.html

jQuery Ajax 简单的实现跨域请求

html 代码清单： <script type="text/javascript" src="http://www.youxiaju.com/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ $.ajax(     {         type:’get',         url : 'http://www.youxiaju.com/validate.php?loginuser=lee&loginpass=123456',         dataType : 'jsonp',         jsonp:"jsoncallback",         success  : function(data) {             alert("用户名："+ data.user +" 密码："+ data.pass);         },         error : function() {             alert('fail');         }     } ); }) </script> 服务端 validate.php 代码清单： <?php header('Content-Type:text/html;Charset=utf-8'); $arr = array(     "user" => $_GET['loginuser'],     "pass" => $_GET['loginpass'],     "name" => 'response' ); echo $_GET['jsoncallback'] . "(".json_encode($arr).")"; 效果图：   from:http://blog.csdn.net/liruxing1715/article/details/18707605

推荐 14 款基于 JavaScript 的数据可视化工具

俗话说，一图胜千言。图形化的信息可以让人们对数据有更加直观清晰的理解，让信息发布者更加高效地展示自己的核心内容。在前端开发中，如果缺少合适 工具，制作数据可视化图表会十分复杂。然而随着数据可视化概念逐年火热，有较多优秀的图表开源库和制作工具脱颖而出。下面，我们就拿其中比较有名的 14个产品进行简要介绍。 AnyChart 链接：http://www.anychart.com/ AnyChart 是基于 Flash/JavaScript(HTML5) 的图表解决方案，它可以轻松地跨浏览器、跨平台工作。除了基础的图表功能外，它还有收费的交互式图表和仪表功能。它可以通过 XML 格式获取数据，该方式让开发人员非常灵活地控制图表上的每一个数据点，而当图表数据点数量偏大时，则可以采用 CSV 数据输入，减小数据文件大小和图表加载时间。 amCharts 链接：http://www.oschina.net/p/amcharts amCharts 是一款高级图表库，致力于对 Web 上的数据可视化提供支持。它所支持的图表包括柱状图、条状图、线图、蜡烛图、饼图、雷达、极坐标图、散点图、燃烧图和金字塔图等等。amCharts 库是一款完全独立的类库，在应用中不依赖任何其他第三方类库，就可直接编译运行。除了提供最基本的规范要素外，amCharts 还提供了交互特性。用户在浏览基于 amCharts 制作的图表时，用鼠标 hover 图表内容，可以与其进行交互，使图表展示细节信息，其中呈现信息的容器被叫做 Balloon（气球）。除此之外图表可以动态动画的形式被绘制出来，带来了了非常好的展示效果。 Cesium 链接：http://www.oschina.net/p/cesiumjs Cesium 同样专注于地理数据可视化，它是一个 Javascript 库，可以在 Web 浏览器中绘制 3D/2D 地球。无需任何插件即可基于 WebGL 来进行硬件加速。除此之外，它还有跨平台、跨浏览器的特性。Cesium 本身基于 Apache 开源协议，支持商业及非商业项目。 Chart.js 链接：http://www.oschina.net/p/chartjs Chart.js 是一个简单、面向对象，为设计和开发者准备的图表绘制工具库。它提供了六种基础图表类型。基于 Html5，响应式，支持所有现代浏览器。同时它不依赖任何外部工具库，本身轻量级，且支持模块化，即开发者可以拆分 Chart.js 仅引入自己需要的部分进入工程。在小巧的身段中它同时支持可交互图表。 Chartist.js 链接：http://www.oschina.net/p/chartist-js Chartist.js 是一个非常简单而且实用的 JavaScript 图表生成工具，它支持 SVG 格式，图表数据转换灵活，同时也支持多种图表展现形式。在工程中，Chartist.js 的 CSS 和 JavaScript 分离，因此代码比较简洁，在应用时配置流程十分简单。它生成的是响应式图表，可以自动支持不同的浏览器尺寸和分辨率，更多的是，它也支持自定义 SASS 架构。 D3 链接：http://www.oschina.net/p/d3 2011年，Mike Bostock、Vadim Ogievetsky 和 Jeff Heer 发布了 D3，它是目前 Web 端评价最高的 Javascript 可视化工具库。D3 能够向用户提供大量线性图和条形图之外的复杂图表样式，例如 Voronoi 图、树形图、圆形集群和单词云等等。它的优点是实例丰富，易于实现调试数据同时能够通过扩展实现任何想到的数据可视化效果，缺点是学习门槛比较高。与 jQuery 类似，D3 直接对 DOM 进行操作，这是它与其它可视化工具的主要区别所在：它会设置单独的对象以及功能集，并通过标准 API 进行 DOM […]

js操作select标签

html中的select标签 javascript对它们的操作 一、基础理解 复制代码代码如下: var e = document.getElementById("selectId"); e. options= new Option("文本","值") ; //创建一个option对象,即在<select>标签中创建一个或多个<option value="值">文本</option> //options是个数组,里面可以存放多个<option value="值">文本</option>这样的标签 1:options[ ]数组的属性: length属性———长度属性 selectedIndex属性——--当前被选中的框中的文本的索引值,此索引值是内存自动分配的(0,1,2,3…..)对应(第一个文本值,第二个文本值,第三个文本值,第四个文本值……….) 2:单个option的属性(—obj.options[obj.selecedIndex]是指定的某个<option>标签,是一个—) text属性———返回/指定 文本 value属性——返回/指定 值，与<options value="…">一致。 index属性——-返回下标, selected 属性——-返回/指定该对象是否被选中.通过指定 true 或者 false，可以动态的改变选中项 defaultSelected 属性—--返回该对象默认是否被选中。true / false。 3:option的方法 增加一个<option>标签—--obj.options.add(new("文本","值"));<增> 删除一个<option>标签—--obj.options.remove(obj.selectedIndex)<删> 获得一个<option>标签的文本—--obj.options[obj.selectedIndex].text<查> 修改一个<option>标签的值—--obj.options[obj.selectedIndex]=new Option("新文本","新值")<改> 删除所有<option>标签—--obj.options.length = 0 获得一个<option>标签的值—--obj.options[obj.selectedIndex].value 注意: a:上面的写的是如这样类型的方法obj.options.function()而不写obj.funciton,是因为为了考虑在IE和FF 下的兼容,如obj.add()只能在IE中有效. b:obj.option中的option不需要大写,new Option中的Option需要大写 二 、应用 复制代码代码如下: <html> <head> <script language="javascript"> function number(){ var obj = document.getElementById("mySelect"); //obj.options[obj.selectedIndex] = new Option("我的吃吃","4");//在当前选中的那个的值中改变 //obj.options.add(new Option("我的吃吃","4"));再添加一个option //alert(obj.selectedIndex);//显示序号，option自己设置的 //obj.options[obj.selectedIndex].text = "我的吃吃";更改值 //obj.remove(obj.selectedIndex);删除功能 } </script> </head> <body> <select id="mySelect"> <option>我的包包</option> <option>我的本本</option> <option>我的油油</option> <option>我的担子</option> </select> <input […]

javascript:history.go()和History.back()的区别

<input type=button value=刷新 onclick="window.location.reload()"> <input type=button value=前进 onclick="window.history.go(1)"> <input type=button value=后退 onclick="window.history.go(-1)"> <input type=button value=前进 onclick="window.history.forward()"> <input type=button value=后退 onclick="window.history.back()"> 后退+刷新<input type=button value=后退 onclick="window.history.go(-1);window.location.reload()">在C# Web程序中，如为页面按钮写返回上一页代码 this.RegisterClientScriptBlock("E", "<script language=javascript>history.go(-2);</script>"); 其中，history.go(-2)，要写为-2，因在按钮事件触发前，已刷新一次页面，所以应是-2。 Response.Write("<script language=javascript>history.go(-2);</script>"); 此处也要写为“-2”。跟直接写脚本的有所不同。history.back()是会上一页 i=1 history.go(i)去指定的某页 如果是history.go(0)那就是刷新这两个属于JS代码，相当于IE的前进、后退功能。 具体的用处就要看什么时候需要这个就用上。比如用户注册时的验证是后台验证，不符合要求的时候就可以用这个，可以最大限度保证用户少重复输入数据。 例如：载入页面： function onLoadPage(){ if(event.srcElement.tagName=="SPAN"){ oFrame=top.window.middle.frames[2]; oTxt=event.srcElement.innerText; switch(oTxt){ case "前 进": oFrame.history.go(1); case "后 退": oFrame.history.back(); case "刷 新": oFrame.location.reload(); } } } 打开一个jsp页面,肯定是用客户端脚本进行刷新了。 Javascript刷新页面的几种方法： 1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(location) 5 document.execCommand('Refresh') 6 window.navigate(location) 7 location.replace(location) 8 document.URL=location.href   from:http://www.mikebai.com/Article/2009-11/757.html