basicShare 推荐一款极简的分享插件
之前用过百度分享,后来博客切换https服务后,
百度分享插件加载报错,
再加上目前主流的社会化分享目的地也就是 微信,微博,
或许是80后的我真的out了,
这个插件基本满足我的需要
极致简洁 UI效果
截图展示效果有点大....
看看实际效果:
分享
站点没有下载icon,所以前面的分享icon变成了方框□
css .basicShareBtn {
cursor: pointer;
background-color: #dff0d8;
border-color: #d6e9c6;
color: green;
font-size: 1
关于axios axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js.
主要功能
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
浏览器支持
使用 浏览器端 直接引用:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
使用 bower:
bower ins
之前写过一篇 关于css相对定位不跟随滚动条移动点击查看.
正如我的博客内容页右侧目录的效果.
垂直滚动内容时,右侧目录始终定位在右上角不跟随滚动条.
但是,
当我的目录足够长,因为它不跟随滚动条垂直移动,
导致超出屏幕的部分无法看到.
右侧目录相对定位 'position': 'fixed',
'top': 25px,
'width': 400px
top 25px 是因为我的博客顶部菜单高度25px,所以为了不让菜单遮挡右侧目录,所以距离顶部25px
但是页面初始化后,我们并不想直接让目录相对定位到右上角,
因为右上角还有需要展示的模块,
我们更希望是滚动条滚动到目录模块时,这个模块始
JavaScript 中的跨域问题
http://yijiebuyi.com/A.js
http://yijiebuyi.com/B.js
上面情况在同一域名下,不同资源文件 [允许跨域]
http://yijiebuyi.com/blog/A.js
http://yijiebuyi.com/jobs/B.js
上面情况在同一域名下,不同资源目录下的文件 [允许跨域]
http://yijiebuyi.com/A.js
http://yijiebuyi.com:1234/B.js
上面情况在同一域名下,不同端口 [不允许跨域]
http://yijiebuyi.co
为什么是 node.js 桌面应用
准确的说,这只是一个浏览器, node-webkit 项目是 chromium 和 node.js 搭建起来的本地运行时环境.
我们知道node.js 是javascript 在服务器端通过强大的 V8 引擎实现的.
chromium 内置了 V8 引擎
所以 node-webkit 就这样结合起来了.
回到刚才的问题,为什么说是桌面应用
Node支持的与操作系统交互的功能，文件系统，网络 , 操作系统资源等，
以及Node之上的第三方库都可以在node-webkit中进行使用
所以他很像是一个桌面级应用,但是又有区别
和传统桌面应用不
让你的浏览器 console 加入 query 方便测试调试.
这样我们去操作 dom 就像 javascript 文件中书写代码一样方便.
而且查找结果实时输出到 console 中
你可以很轻松的发现 jquery 选择器是不是有误
操作的结果是不是你想要的
如何实现
你需要在你的 console 中引入一段 jquery
var jquery = document.createElement(‘script’);
jquery.src = “http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”;
docu
在国庆长假马上结束时,分享一篇关于 css定位的博文,收回你的玩心,开始工作了.
css 中的定位是一个重点,也是难点,之前有一篇专门探讨 css中position定位的问题
达到的效果
如果你够细心的话,你会发现我的博客列表也和博文详情页右侧侧边栏有变化
之前侧边栏是跟随滚动条移动的,当右侧内容不足时,会看到一片空白,体验不好
所以我希望,当滚到到右侧无内容填补时,指点的模块能做一个固定定位,漂浮在顶部右侧,不再跟随滚动条移动
简单说,当右侧侧边栏有内容时,跟随滚动条上下移动
当滚动到右侧无内容时,最小边的模块一直漂浮在右上角,如下图
入群讨论 和 订阅公众号 模块始终
在任何一个项目中都缺少不了配置文件
具有下面的特点: 数据量不大,信息需要长期保存,容易维护
当然你也可以在数据库中建一张表,去存放这些信息,一点错都没有,但是,是不是有点牛刀杀鸡的感觉
今天和大家分享的是配置文件的定制,根据你的运行环境不同动态配置一张灵活的 config 配置文件.
之前的一篇博文 根据 ENV 环境变量不同加载不同的配置文件
这一篇可以说是上一篇的子章节,上一篇说的太笼统,
这一次针对一个点,然后铺开说一个功能
我的博客全部用绝对路径
为什么?
因为总有些人直接过来 copy 我的文章,然后不加出处,不署名,这是别人辛辛苦苦的劳动果实,作为一个I
因为没有新增 css 类别,所以关于css 的东西暂时归类到了 Html5
今天干活遇到的几个问题,下班前和大家分享
透明遮罩层
居中内容不透明
居中div显示内容
因为我的html5页面只在手机端展示,所以不考虑万恶的IE低版本浏览器
并且我把单独的css内容直接定义在html 标签里,这样你们看起来更加直观
透明遮罩层
<div id="nav_img_ios" style="display:none;height:100%; width:100%;
position:fixed; _position:absolute; top:0; z-index:10
现在的二维码相当火,借着移动互联网的风口也快飞起来了.现在各种语言的各种开源包,基本都有对应的生成二维码的源码.但是今天我们分享的不是服务器生成二维码,而是前端页面如果用 javascript 来生成一个二维码.这种动态生成二维码的需求越来越多.如果都要依靠服务器端赖生成,第一:面临资源紧缺的状况,如果在大的并发环境,这种cpu密集型计算必定导致一个问题,就是请求排队,那就不用谈了.用户不会一直在傻傻的等你.第二:就算你顺利生成了二维码,还面临一个网络传输带宽的压力,虽然它很小很小,但是当在一个并发压力大的环境下,依然面临带宽被占的问题.这样说来,如果能在客户端生成二维码,貌似是最好的解决方案
随着前端项目越来越复杂,随便引入几个第三方javascript脚本库貌似已经习以为常,但是随着越来越多的包被引入,开发人员维护起来也是一件相当头疼的事,比如第三方库的版本更新,安装,卸载等.twitter推出了一个前端包管理器 bower 帮我们解决了这些头疼的事情.bower 完全借鉴了npm构思和实现原理,所以后面你会看到它的使用几乎和npm是一模一样.当然,bower 是运行在node.js 基础上,所以你的当前环境确保已经安装 node.js .bower 的基础功能是什么?1.注册模块每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配2.文件存储把文件存储在一个有效的网
Promise是commonjs规范中的内容.现已经纳入了ES6，并且高版本的chrome、firefox浏览器都已经原生实现了Promise，只不过和现如今流行的类Promise类库相比少些API.这里说的是指Promise/A+ 规范.Promose 主要用于异步调用规范,它有三种状态， 等待（pending）、已完成（fulfilled）、已拒绝（rejected）等待 --> 已完成 / 等待 --> 已拒绝 但是已完成和已拒绝状态不可能互相转化.为什么要出现 Promose 规范:一直以来,对于javascript的异步回调,我们祖祖辈辈都是用callback方式 (貌似
javascript中函数成为一等公民后,导致很多其他语言函数所没有的功能,也正是这些特性让javascript更加灵活.函数可以是一个变量,可以是一个参数,可以是一个返回值,可以是一个类,可以是一个方法.....够灵活吧.其中高阶函数是javascript中闭包的实现基础,而闭包又是javascript高度灵活的体现.今天和大家分享的是一种特殊的函数,匿名函数.如其名一样,就是没有名字的函数,这种匿名函数用到的地方很多,比如jquery 的大部分实现都用了匿名函数.为什么要这样用? 因为javascript语言本身的缺陷使得它是一门没有私有作用域的语言,它不像一些高级语言一样,有命名空间或者
angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom .作为前端开发而不去操作dom ,这简直是一个玩笑! 没错,确实是这样的.关于 angular.js 的详细说明及事例请在博客搜索 angular.js既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并且文本框里数据要和控制层一个属性绑定,按钮要实现 ng-click 事件,如何做?传统实现方法,
目录:angular.js 系列一之准备工作angular 系列二 搭框架-node.js后端,angular.js前端angular 系列三 gulp 代码构建工具简介angular 系列四 初识angular.js hello world!angular 系列五 控制器controller的作用angular 系列六 Module类的介绍及模块化依赖angular 系列七 ui-router路由控制器介绍angular 系列八 ui-router详细介绍及ngRoute工具区别angular 系列九 ui-router适配模板,模板指定controller控制器angular 系列十 使用
javascript经过浏览器大战的几次更新换代,终于一统江湖,稳坐第一把交椅,经过你会发现javascript语法和实现并不尽人意,但是丝毫不影响它的发展.我们最开始接触javascript应该大部分是从html中的js脚本开始,但是这种看似简单的语言稀里糊涂的用了好几年,也没有搞清楚它的一些原理机制,有没有躺枪!起码javascript在操作dom的时候用了各种事件回调,比如按钮,链接的点击,鼠标经过,获取焦点等等.在这个过程中,我们在dom上绑定一个事件回调函数 比如 onclick="doCheck()" 这个过程就是给dom元素注册了一个click 事件,并且绑定
今天在三思悦网站通过微信上分享了一篇关于婴幼儿教育的帖子,等来到公司自己点进去一看,彻底凌乱了,看上去很多余的页头,样式完全错乱了,还有画蛇添足的页脚....移动浏览器可视化范围很小,所以充分利用有限的空间去展示有价值的东西,页头,页脚,侧边栏都是可以弱化,甚至不显示效果更佳.下面进行优化改造,我打算采用js来分辨pc浏览器还是移动端浏览器,pc端浏览器和移动客户端浏览器是通过 userAgent 来分辨,直接上代码:navigator.userAgent.match(/Android/i)//安卓客户端浏览器
navigator.userAgent.indexOf('iPhone&#
jquery选择器之基础训练第一篇链式操作jQuery允许把一系列的操作像链条一项写出来,比如下面的形式$('select').find('[class=city]').find("option:selected").val(); 上面的表达式分步显示是这样的:$('select') 找到所有下拉列表$.find('[class=city]') 过滤class=city的下拉列表$.find('option:selected').val() 找到下拉列表被选中的项的值之所有jquery支持这种极
jquery是前端开发者最喜欢的javascript开发框架之一,就像他的宣传语一样,写更少的代码,做更多的事情,现在拥有一大波开发者粉丝,甚至微软将它作为官方库,这一切说明jquery在开发者心中确实有很高的地位.jquery有一个强大的构造函数jQuery() 也就是我们常常简写的 $ ,这个构造函数强大之处在于,它能识别复杂的选择表达式进而找到你想要的元素.所以使用jquery的前提是会使用他的选择表达式,下面几种类似css选择器$(document)//选择整个文档对象 $('#documentID')//选择ID为myId的网页元素 $('a[name=me
在新窗口打开链接$(document).ready(function(){
//全部链接新页面打开
$('a[href^="http://"]').attr("target","_blank");
//部分链接新页面打开,比如class='menu'的链接
$('a[class='menu']').click(function(){
this.target="_blank";
});
});<a href="http://www.op
引子:母版页之方便之处相信做过web开发的都不用说太多,可以重复利用资源,维护方便,开发起来你只需关注当前页变动的东西,固定不变的全部放到母版页,可以理解为前人栽树后人乘凉,省时,省力,省心.下面围绕2点简单说下.一.node.js开发,基于ejs引擎的母版页二.前提环境 ,如何使用及示例介绍就像上面的这个图,如果你的业务说覆盖的页面只有中间是变化的,那么其他部分完全可以放到母版页中呈现.node.js 下的web应用开发有2种模板引擎 ejs 和 jade ,当然你可能直接用jquery 的前端模板后端ajax请求数据等等....(也算一种吧)ejs 下如何使用母版页?ejs的母版页功能支持
投稿人: 海涛varclientWidth=parseInt(document.body.clientWidth);
$('.detail_contentimg').each(function(i,n){
$(this).on('load',function(){
varwidth=parseInt(this.width);//图片实际宽度
varheight=parseInt(this.height);
varoutwidth=width;//图片输出宽度
varoutheight=height;
var rateWidth = (cl
node.js 是一个服务器端运行JavaScript脚本的环境,这个环境下保持了客户端JavaScript的api一致,并且强制使用单进程单线程模式下工作的方式也与运行在浏览器宿主下的javascript保持一致,看似没有其他服务器端语言的任何优势,错了,上面提到的单进程单线程模式其实就是它的一大优点.单线程+单进程(1)程序大部分api与客户端javascript保持一致(当然服务器端javascript可以随意执行io操作及调用一些系统层面的接口)(2)javascript语言历史悠长,门槛不高,涉及到javascript语言的工程师多如牛毛(3)单线程单进程模式促使程序执行上下文不需要
javascript 代码下判断 DOM 下是否存在某个元素if(document.getElementByIdx_x(‘but’)){
alert(‘元素存在’);
}else{
alert(‘元素不存在’);
}但是在JQuery 下如判断某个元素是否存在.jquery 内置没有直接判断dom中某个元素是否存在的方法.$(“#but”) 获取到的是jquery 对象,是一个object,无法判断此元素是否存在.但是jquery 对象有个length 属性,表示当前jquery 对象中获取到几个 domElement 元素.所以我们的jquery代码可以这样写:if($(“#but”).le