06 2014 档案

移动端网页设计经验与心得
摘要：⒈分辨率这应该是移动端网页最关心的问题了，因为移动设备五花八门，各种分辨率都有。要想在这些设备上都能有良好的浏览体验，得花一番功夫。使用viewport：这已经是移动端网页的必备了，它可以设定页面的宽度，是否允许缩放等等。一般设置width=device-width，就是设置为设备的屏幕宽度，当然也... 阅读全文
posted @ 2014-06-26 16:01 axl234 阅读(281) 评论(0) 推荐(0)
在电脑上测试手机网站全攻略
摘要：最近公司要开发网站的移动版，让我准备准备知识，话说本人开发移动网站的经验还真不多，最悲剧的事情就是我的手机是个经典的诺基亚，而且公司还不给配手机，这是有多扣啊，没办烦啦，没有手机就用电脑模拟呗，相办法代替，查了很多资料，尝试了大部分方法，下面将这一天的努力总结下分享给大家，也让大家免去看那么多文章，... 阅读全文
posted @ 2014-06-26 10:54 axl234 阅读(238) 评论(0) 推荐(0)
Web 开发中 9 个有用的提示和技巧
摘要：在本文中，我们给出 9 个有用的 HTML、CSS 和 JavaScript 的技巧和提示，可能在做 Web 开发中经常会需要用到的，其中有几个是关于 HTML5 和 CSS3 的，如果你是一个前端开发者，那么或许对你有些用处。1. 使用 html5 的 placeholder 属性以前我们经常要写... 阅读全文
posted @ 2014-06-25 15:52 axl234 阅读(195) 评论(0) 推荐(0)
jQuery 网格布局插件
摘要：如今，大多数网站设计要靠网格系统和布局，这能够提供给设计人员一个方便的途径来组织网页上的内容。网格的设计最常见于报纸和杂志的版面，由文字和图像构成的列组成。 这篇文章给大家分享精心挑选的15款最佳的 jQuery 网格布局插件（jQuery Grid Plugins），它可以帮助你在创建网格布局项... 阅读全文
posted @ 2014-06-25 15:19 axl234 阅读(479) 评论(0) 推荐(0)
CSS架构目标
摘要：擅长CSS的Web开发人员不仅可以从视觉上复制实物原型，还可以用代码进行完美的呈现。无需使用表格、尽可能少的使用图片。如果你是个名副其实的高手，你可以快速把最新和最伟大的技术应用到你的项目中，比如媒体查询、过渡、滤镜、转换等。虽然这些都是一个真正的CSS高手所具备的，但CSS很少被人单独拿出来讨论，... 阅读全文
posted @ 2014-06-25 15:12 axl234 阅读(152) 评论(0) 推荐(0)
jQuery(function(){})与(function(){})(jQuery)的区别
摘要：开发jQuery插件时总结的一些经验分享一下。一、先看jQuery(function(){});全写为jQuery(document).ready(function(){});意义为在DOM加载完毕后执行了ready()方法。二、再看(function(){})(jQuery)；其实际上是执行()(... 阅读全文
posted @ 2014-06-25 15:08 axl234 阅读(150) 评论(0) 推荐(0)
jQuery下实现检测指定元素加载完毕
摘要：检测元素出现方法。虽然是基于 jQuery 的，但是代码很简洁，可以修改成纯js版的。文本jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = in... 阅读全文
posted @ 2014-06-25 15:04 axl234 阅读(1955) 评论(0) 推荐(0)
Font Awesome 4.0.3 提供了369个网页常用的矢量字体图标
摘要：Font Awesome为您提供了一套可缩放的字体矢量图标，可以快速自定义图标的大小，颜色，阴影，这些都可以通过CSS来实现，无需任何的JS代码哦。一,主要特点如下:1，一个字体，369个图标2，无需要使用JavaScript3，通过CSS自定义图标的大小，颜色，阴影4，用户界面友好5，支持 Int... 阅读全文
posted @ 2014-06-25 10:59 axl234 阅读(2057) 评论(0) 推荐(0)
CSS3无前缀脚本prefixfree.js与Animatable使用
摘要：现代浏览器基本支持CSS3，但是一些旧版本的浏览器还是需要添加前缀的。像box-shadow,border-radius这类属性，目前较新版本的浏览器都是不需要前缀的（包括IE9），但是，有些CSS3属性，例如渐变，前缀少不了，每次都需要像盖高楼一样堆叠CSS3代码，如下图:.bg { ... 阅读全文
posted @ 2014-06-25 10:57 axl234 阅读(347) 评论(0) 推荐(0)
关于jQuery中.attr()和.prop()
摘要：功能需求是这样的，两个radio：男和女，一个button：重置。启动页面默认选中男，在用户选择女之后又点击重置按钮，需要恢复到默认状态。男女重置我的js代码是这样的：$("#reSet").click(function() { $("input[name='sex']:first").attr(... 阅读全文
posted @ 2014-06-24 15:54 axl234 阅读(203) 评论(0) 推荐(0)
mouseover，mouseout，mouseenter，mouseleave的区别
摘要：相信做前端开发的都听说过“冒泡型事件”吧，《JavaScript高级程序设计》第九章有详细的讲述，但是，在学习的时候一知半解，也没详细去理解，导致最近在工作中碰到了问题：有许多 li 标签，标签上有2个按钮，当且仅当鼠标移入 li 时才会显示上面的2个按钮，如下图，左边是默认状态，右边是鼠标移入状态... 阅读全文
posted @ 2014-06-24 15:51 axl234 阅读(939) 评论(0) 推荐(0)
Javascript 中的false,零值,null,undefined和空字符串对象
摘要：在Javascript中，我们经常会接触到题目中提到的这5个比较特别的对象--false、0、空字符串、null和undefined。这几个对象很容易用错，因此在使用时必须得小心。类型检测我们下来看看他们的类型分别是什么：运行上述代码，弹出的对话框应该显示的都是true。也就是说，false是布尔类... 阅读全文
posted @ 2014-06-24 15:48 axl234 阅读(265) 评论(0) 推荐(0)
html5定位并在百度地图上显示
摘要：在开发移动端 web 或者webapp时，使用百度地图 API 的过程中，经常需要通过手机定位获取当前位置并在地图上居中显示出来，这就需要用到html5的地理定位功能。navigator.geolocation.getCurrentPosition(callback);在获取坐标成功之后会执行回调函... 阅读全文
posted @ 2014-06-24 15:24 axl234 阅读(1290) 评论(0) 推荐(0)
网页宽高自适应大小
摘要：如今，显示器的分辨率越来越多，终端也变得多样化，web开发页面的自适应问题越来越多，如果不做处理，一旦显示器的分辨率发生变化，展示的内容可能出现许多意料之外的排版问题。关于不同终端的展示问题可以通过响应式布局来实现，而不需要响应式布局时我们需要自己来避免上述问题。宽度自适应：1、设置最外层容器（如 ... 阅读全文
posted @ 2014-06-24 15:06 axl234 阅读(585) 评论(0) 推荐(0)
javascript常用的107个语句
摘要：1.document.write(“”); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)5... 阅读全文
posted @ 2014-06-18 15:22 axl234 阅读(178) 评论(0) 推荐(0)
Mansory算法分析
摘要：相信大家对mansory排版算法印象十分深刻，它能够十分有效的实现页面紧凑排版，节省空间，并且还显得十分美观。在很多网站，包括鼎鼎有名的pinterest都使用了这个算法来实现排版。这个过程有点象瓦匠在码砖头，所以我会有时候称这些div为brick（砖头），容器为墙面!有一个现象不知道大家注意否，这... 阅读全文
posted @ 2014-06-18 15:18 axl234 阅读(230) 评论(0) 推荐(0)
HTML5 Web Workers来加速您的移动Web应用
摘要：一直以来，Web 应用程序被局限在一个单线程世界中。这的确限制了开发人员在他们的代码中的作为，因为任何太复杂的东西都存在冻结应用程序 UI 的风险。通过将多线程引入 Web 应用程…在本文中，您将使用最新的 Web 技术开发 Web 应用程序。这里的 大部分代码只是 HTML、JavaScript ... 阅读全文
posted @ 2014-06-18 15:10 axl234 阅读(370) 评论(0) 推荐(0)
SVG
摘要：一、SVG技术背景随着网络上信息数据的大量涌现，如何正确显示和出版是有效传输、接收和利用它们的基础。图形、图像是信息数据可视化的主要方式。但现有的图形、图像格式存在着缺陷：非开放式，显示和印刷质量及适应性差，难以创建Web上图文信息的个性化定制、交互式以及实时动态方面的应用等。SVG正是在这样的背景... 阅读全文
posted @ 2014-06-18 15:08 axl234 阅读(432) 评论(0) 推荐(0)
用HTML5、地理定位API和Web服务来开发移动应用
摘要：HTML 5 是一项让人振奋的技术，这有着充分的理由。这将会是一次技术突破，因为它可以将桌面应用程序功能带入浏览器中。除了传统浏览器外，对于移动浏览器，其潜力甚至更大。不仅如此，最流行的移动浏览器甚至已经采用并实现了 HTML 5 规范中很多重要部分。在这个由五个部分组成的系列里，您将仔细了解 HT... 阅读全文
posted @ 2014-06-18 14:47 axl234 阅读(362) 评论(0) 推荐(0)
使用HTML5/CSS3制作便签贴
摘要：利用HTML5/CSS3，仅用5步就可以制作便签贴效果的HTML页面，效果图如下：(注：图里的文字纯属杜撰，搞笑目的，如有雷同，纯属巧合，谢谢!)注：该效果可以在Safari, Chrome,Firefox和Opera在看到效果，IE上由于对HTML5的支持不完全，所以看不出效果。第一步：创建基本H... 阅读全文
posted @ 2014-06-18 14:36 axl234 阅读(459) 评论(0) 推荐(0)
HTML5实战与剖析之classList属性
摘要：classList属性究竟是干什么的，我们先撇下classList不管。我们考虑这么一个问题，那就是我们如何将拥有多个类名的元素中的其中一个类名删除呢?梦龙较劲脑汁儿终于想到一个实现的方法。将拥有类名li、meng和long，三个类名中的类名meng删除。代码如下 HTML代码view sourc... 阅读全文
posted @ 2014-06-18 14:29 axl234 阅读(291) 评论(0) 推荐(0)
编写javascript的基本技巧
摘要：第一、编写可维护的代码什么叫着编写可维护的代码呢？就是当我的做出来的项目，拿给其它编码团队能很快的看懂你编写的代码，你的整个项目的逻辑等等。一个项目的修改维护是要比开发一个项目的成本是要高的。例如：当一个项目发布出现bug，最好的情况是当我们一发现bug，立即就可以修复，这种情况是可能发生在刚写完这... 阅读全文
posted @ 2014-06-17 15:39 axl234 阅读(218) 评论(0) 推荐(0)
Framework7功能齐全的 iOS7 App 前端框架
摘要：Framework7 是一个功能很全的HTML框架，用来构建iOS7应用程序。 Framework7 允许您灵活搭建列表视图（表视图） 。你可以让他们作为导航菜单，你可以在列表里面使用图标，输入框以及任何元素，甚至使它们嵌套。Framework7 使用 Ajax 在页面之间导航。http://www... 阅读全文
posted @ 2014-06-17 15:32 axl234 阅读(303) 评论(0) 推荐(0)
移动开发的小积累
摘要：在webkit内的触摸事件主要有以下几个：touchstart---->触摸开始touchmove----->接触点改变touchend------>触摸结束touchcancel--->触摸取消下面我主要针对我日常用的比较多的touchstart,touchend两个事件进行封装，使得其像jQue... 阅读全文
posted @ 2014-06-17 15:21 axl234 阅读(194) 评论(0) 推荐(0)
Apple Swift学习资料汇总
摘要：今年的苹果开发者大会(WWDC)上，公布了ios8的几个新特性，其中包括引入了群聊功能，支持第三方输入法等功能。但更让开发者感兴趣的莫过于Swift语言的发布了。Swift是apple自创的一门转为cocoa和cocoa touch设计的语言，意用来替换objc。Swift能使代码大量简化，并且开发... 阅读全文
posted @ 2014-06-13 10:52 axl234 阅读(212) 评论(0) 推荐(0)
20个热门jQuery的提示和技巧
摘要：以下是一些非常有用的jQuery提示和所有jQuery的开发技巧。1。优化性能复杂的选择查询DOM中的一个子集，使用复杂的选择时，大幅提高了性能：var subset = $("");$("input[value^='']", subset);2。设置上下文和提高性能jQuery核心功能上，指定上下... 阅读全文
posted @ 2014-06-13 10:47 axl234 阅读(166) 评论(0) 推荐(0)
10个原生JavaScript技巧
摘要：这些代码片段主要由网友们平时分享的作品代码里面和经常去逛网站然后查看源文件收集到的。把平时网站上常用的一些实用功能代码片段通通收集起来，方便网友们学习使用，利用好的话可以加快网友们的开发速度，提高工作效率。1、原生JavaScript实现字符串长度截取function cutstr(str, len... 阅读全文
posted @ 2014-06-13 10:46 axl234 阅读(204) 评论(0) 推荐(0)
HTML5开发 BUG解决
摘要：1.点透Q：元素A上定位另外一个元素B，点击元素B，如果元素A有事件或链接，会触发元素A上的事件或链接，即点透A：在元素B的touchend中增加ev.preventDefault();阻止默认事件即可，请注意：此时元素内容如果过长，其原生滑动也同时阻止elmB.addEventListener('... 阅读全文
posted @ 2014-06-09 15:16 axl234 阅读(358) 评论(0) 推荐(0)
JS笔试题
摘要：1，考察thisvar length = 10function fn(){ alert(this.length)}var obj = { length: 5, method: function(fn) { fn() // ? arguments[0]()... 阅读全文
posted @ 2014-06-09 10:41 axl234 阅读(518) 评论(0) 推荐(0)
AMD：浏览器中的模块规范
摘要：为实现与Node.js相同方式的模块写法，大牛们做了很多努力。但浏览器环境不同于服务器端，它的模块有一个HTTP请求过程(而Node.js的模块文件就在本地)，这个请求过程多数使用script tag，script 默认的异步性导致很难实现与Node.js一模一样的模块格式。Modules/Wrap... 阅读全文
posted @ 2014-06-09 10:10 axl234 阅读(261) 评论(0) 推荐(0)
Win8 App使用Listview的简单方法
摘要：这是Win8 App神圣不可侵犯的头文件： ListViewExample HTML页面加入以下代码： ... 阅读全文
posted @ 2014-06-06 11:09 axl234 阅读(219) 评论(0) 推荐(0)
Javascript模块化编程
摘要：网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模... 阅读全文
posted @ 2014-06-06 10:46 axl234 阅读(258) 评论(0) 推荐(0)
require.js的用法
摘要：一、为什么要用require.js？最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。 这段代码依次加载多个js文件。这样的写法有很大的缺点。首... 阅读全文
posted @ 2014-06-06 10:37 axl234 阅读(234) 评论(0) 推荐(0)
JavaScript中模块“写法”
摘要：在JavaScript模块到底是什么event = function() { // do more return { bind: function() {}, unbind: function() {}, trigger: function() ... 阅读全文
posted @ 2014-06-06 09:44 axl234 阅读(212) 评论(0) 推荐(0)
模块化的JavaScript
摘要：我们再一次被计算机的名词，概念笼罩。backbone、emberjs、spinejs、batmanjs等MVC框架侵袭而来。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模块化的JavaScript概念及库扑面而来。模块化JavaScript的概念尤为突出，似... 阅读全文
posted @ 2014-06-06 09:42 axl234 阅读(201) 评论(0) 推荐(0)
javascript如何判断访问网页的设备及是否支持触屏功能
摘要：var system ={}; var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11... 阅读全文
posted @ 2014-06-06 09:39 axl234 阅读(1482) 评论(0) 推荐(0)
Javascript自由拖拽类
摘要：基本拖拽配置new Dragdrop({target 拖拽元素 HTMLElemnt 必选bridge 指定鼠标按下哪个元素时开始拖拽，实现模态对话框时用到dragable 是否可拖拽 (true)默认dragX true/false false水平方向不可拖拽 (true)默认dragY t... 阅读全文
posted @ 2014-06-05 10:26 axl234 阅读(212) 评论(0) 推荐(0)
JQuery中html()方法的注意事项
摘要：.html方法当不传参数时用来获取元素的html内容，return this[0] && this[0].nodeType === 1 ? this[0].innerHTML.replace(rinlinejQuery, "") : null;得知其通过非标准的但所有浏览器都支持的inn... 阅读全文
posted @ 2014-06-05 10:19 axl234 阅读(649) 评论(0) 推荐(0)
css属性pointer-events
摘要：绝对定位元素盖住链接或添加某事件handle的元素后，那么该链接的默认行为（页面跳转）或元素事件将不会被触发。现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。如下 1 ... 阅读全文
posted @ 2014-06-05 10:17 axl234 阅读(233) 评论(0) 推荐(0)
HTML5图片预览
摘要：两种方式实现URLFileReaderhtml5 图片上传预览URL.revokeObjectURL方法Opera不支持，FileReader除IE9及以下不支持，其它浏览器都支持。 阅读全文
posted @ 2014-06-04 11:13 axl234 阅读(226) 评论(0) 推荐(0)
用cssText属性批量操作样式
摘要：给一个HTML元素设置css属性，如var head= document.getElementById("head");head.style.width = "200px";head.style.height = "70px";head.style.display = "block";这样写太罗嗦了... 阅读全文
posted @ 2014-06-04 11:09 axl234 阅读(213) 评论(0) 推荐(0)
用Windows Live Writer 2012发博客
摘要：一、软件准备： 最新版的是Windows Live Writer 2012，但是不提供单独的安装包，它是和微软其它软件一起的（包括MSN、Window Move Maker等），软件大小为131M，官方下载地址：http://g.live.com/1rewlive5-all/zh-cn/wlsetup-all.exe 或者自己百度“Windows Essentials 2012 简体中文离线”。 ... 阅读全文
posted @ 2014-06-03 16:15 axl234 阅读(301) 评论(0) 推荐(0)
HTML5 datalist 标签
摘要：以前需要用JS写一个自动完成组件（Suggest），很费劲。HTML5时代则不用了，直接使用datalist标签，直接减少了工作量。如下HTML5 datalist tag浏览器版本：datalist提供一个事先定义好的列表，通过id与input关联，当在input内输入时就会有自动完成（autoc... 阅读全文
posted @ 2014-06-03 15:07 axl234 阅读(200) 评论(0) 推荐(0)
JavaScript获取图片的原始尺寸
摘要：页面里的img元素，想要获取它的原始尺寸，以宽度为例可能首先想到的就是width，如下这里使用的getWH方法是之前文章里提到的。这时候获取的宽度和图片的原始尺寸是一样的。如果给img加上了width属性，这种方式就不行了，比如图片实际宽度是690，设置了width为400，这时按上面的方式获取则返... 阅读全文
posted @ 2014-06-03 15:05 axl234 阅读(247) 评论(0) 推荐(0)
利用Keydown事件阻止用户输入
摘要：先了解下各事件的区别KeyDown：在控件有焦点的情况下按下键时发生KeyPress：在控件有焦点的情况下按下键时发生KeyUp： 在控件有焦点的情况下释放键时发生1、KeyPress主要用来接收字母、数字等ANSI字符。KeyDown 和 KeyUP 事件过程通常可以捕获键盘除了PrScrn所有... 阅读全文
posted @ 2014-06-03 15:04 axl234 阅读(853) 评论(0) 推荐(0)
js函数设计原则
摘要：一般认为函数指具有返回值的子程序，过程指没有返回值的子程序。C++中把所有子程序成为函数，其实那些返回值为void的 函数在语义上也是过程。函数与过程的区别更多是语义上的区别，而不是语法的区别。语言纯化论者认为一个函数应该只有一个返回值，这和数学函数一样。即函数只接受输入（参数），通过参数运算返回结... 阅读全文
posted @ 2014-06-03 14:29 axl234 阅读(1052) 评论(0) 推荐(0)
Javascript闭包演示
摘要：有个网友问了个问题，如下的html，为什么点击所有的段落p输出都是5，而不是alert出对应的0，1，2，3，4。闭包演示 产品 0 产品 1 产品 2 产品 3 产品 4 以上场景是初学者经常碰到的。即获取HTML元素集合，循环给元素添加事件。在事件响应函数中(event handler... 阅读全文
posted @ 2014-06-03 14:23 axl234 阅读(170) 评论(0) 推荐(0)
JavaScript判断图片是否加载完成
摘要：一、load事件 img - load event loading...测试，所有浏览器都显示出了“loaded”，说明所有浏览器都支持img的load事件。二、readystatechange事件 img - readystatechange event loading...readyStat... 阅读全文
posted @ 2014-06-03 14:20 axl234 阅读(240) 评论(0) 推荐(0)
JavaScript创建类的方式
摘要：一些写类工具函数或框架的写类方式本质上都是 构造函数+原型。只有理解这一点才能真正明白如何用JavaScript写出面向对象的代码，或者说组织代码的方式使用面向对象方式。当然用JS也可写出函数式的代码，它是多泛型的。为了讨论的单一性，暂不考虑类的继承，(私有,受保护)属性或方法。EMCAScript... 阅读全文
posted @ 2014-06-03 11:01 axl234 阅读(305) 评论(0) 推荐(0)