Avalon入门到放弃

自从来一个这家公司之后,我感觉我PHP开发的“尊严”已经丢尽了。我已经沦落到一个靠写JS过日子的后台开发了。

工作除了写不完的活动页面,还有粘贴复制的JS代码,日子越来越枯燥了,生活也越来越无聊了,人生的悲观情绪悠然而生,有的观众朋友就会问:“那你为啥不换一个工作呢?”,“如果这种问题非要回答的话,我只能告诉你,因为没人要我呀!”

被逼无奈,只能委屈求全,忍辱负重开始学习新的JS框架,感觉之前的jquery框架太多单一,没法体现出我作为21世纪优秀大学生的优良品种。所以我花了一点时间去了解一下MVC的JS框架,和MVVM的JS框架,然后莫名其妙的学了一个requirJS,了解啥叫AMD模式。人生呀,就是这样,就以为你充满了未知,而更佳精彩(一言不合,我就炖鸡汤)。

言归正传,现在说AVALON这个MVVM框架。。快速入门  看,点这个avalon快速入门

我现在说我,对这个框架的理解

  1. 去DOM化编程,模版渲染。
  2. 支持IE6+

[javascript]

require([‘jquery’,’NiuxGame’], function($) {
gamelist = avalon.define({
$id : "gamelist",
data:[],
reload:function(){
var _this = this;
_this.data = ALL_GAME_INFOS;
$.each(ALL_GAME_INFOS,function(item, value){
_this.data.push(item)
});
}
});
gamelist.reload();
avalon.scan();
});
[/javascript]

[html]

<div ms-controller="gamelist">

<dl ms-repeat-el="data">

<dt>{{el.gameNo}}</dt>

</dl>

</div>

[/html]

上面的代码的目的是:通过动态加载数据,然后通过avalon模版引擎渲染模版avalon.scan()  注意这个东西

我的最终目标是,把大部分页面功能都封装成小的JS文件,然后再用require按需加载。这样活动页面前端开发速度有能有本质的提示。能把异步请求的功能完成,这样的话,后面的开发都会容易很多。

 

前端购物车JS插件(HTML5新特效插件)

最近做一个商城,需要用到一个简答的购物车功能,当然,后端实现比较容易,,这里重点还是讲一下前端的JS插件。

从源代码里面没看出来,它叫啥,好像叫:ctshop .js,不管啦,反正我提供下载就好,我做了一些简单的修复,支持了中文

这个插件使用了HTML5的新特效:storage ,就是游览器数据库的功能,这跟之前把数据存在cookies里面原理是相识的,这样的好处在于用户刷新页面,数据还在,,又不需要跟后端进行数据交互。

[javascript]

create_storage_cart: function() {
for (var t = this, e = t.storage_get(), a = 0, n = e.items.length; n > a; a++) {
var i = e.items[a].id,
r = e.items[a].name,
s = e.items[a].price,
c = e.items[a].input;
t.cart.append(‘<li class="animated ‘ + t.settings.animation + ‘" data-id=’ + i + "><span class=" + t.settings.cart + "-name>" + r + "</span><span class=" + t.settings.cart + "-price>" + s + ‘</span><input type="number" min="1" value="’ + c + ‘" class=’ + t.settings.cart + "-input><button class=" + t.settings.cart + "-remove>x</button></li>")
}
},
[/javascript]

需要兼容老版的游览器,需要在上面进行修改。下面是插件的配置文件

[javascript]

s = {
currency: "$",
currency_after_number: "false",
permanent_cart_buttons: "false",
display_total_value: "true",
permanent_total_value: "false",
animation: "fadeIn",
empty_disable: "false",
empty_text: "Your cart is empty",
paypal: {
business: "office@createit.pl",
currency_code: "USD",
lc: "EN",
cpp_cart_border_color: "",
cpp_payflow_color: "",
no_note: "0",
no_shipping: "0",
"return": "",
cancel_return: ""
},
lang:{ //我新增的属性,主要是用来支持多语言
clear:’清空’,
checked:’结算’
},
};
[/javascript]

实例化

[javascript]

$(‘body’).ctshop({
currency: ‘$’,
paypal: {
currency_code: ‘RMB’
},
empty_text:’您敢信,你的购物车居然是空的!’,
});

[/javascript]

很简单的吧。。

看看效果:购物车demo

下载ZIP包:JS购物车源码

 

Hotspotter — jquery图片热点插件

之前那个图片热点的Jquery插件,太高端了!不怎么好用,还需要自己切小图。。所以昨天有去找了另一个插件叫:Hotspotter

正如你所见这个插件又是收费的,而且国内也有人在卖它,我态度一直很明确(嘿嘿)。。我还是之前的套路,我又把它扒下来了,发现确实高端了不少。。

图片定位和图片显示都相当不错,给你一个demo提供参考

上面是精简出来的demo

[javascript]
$(document).ready(function () {
$(‘.hs-area’).hotspotter({ imgTopMargin: 50 });
$(‘#resize’).resizable({
aspectRatio: true,
stop: function () {
$(this).hotspotter();
}
});
});
[/javascript]

然后我看了源码,,o(︶︿︶)o 唉~说多了都是泪,,没有配置文件,需要自己生成HTML

[html]
<div class="hs-area ui-resizable" id="resize">
<img data-imgdim="640,480" src="images/zx.jpg" style="width: 100%;">
<div class="hs-wrap" style="display: block;">
<div data-activeon="hover" data-coord="136,162" class="sniper-spot"></div>
<div class="tt-wrap bottom">
<div data-dir="bottom" data-pos="-15" data-anim="goin" class="tip-tooltip bottom">
<div style="height:145px;width:425px;">
<img src="images/fxj.jpg" style="width:200px;float:left;">
<p> PHP开发工程师 </p>
</div>
</div>
</div>
</div>
</div>
[/html]

看完这里我再简单说一下,这里那个作者扩充的HTM的属性的作用(我也是猜的)

[html]
data-activeon="hover" //触发实践
data-coord="136,162" //标记的坐标(这里可以添三个参数,第三个表示圆角CSS3的DIV样式)
class="sniper-spot" //标记的类型,是点还是巨型
data-dir="bottom" // 数据展示的位置,bottom 下面,top ,left,right
data-pos="-15" //距离标记点的偏移量
data-anim="goin" //动画效果
[/html]

我要不要把源码打一个压缩包呢?你点广告了,我就给你。。。哈哈哈(不要脸)

jquery的插件spinner的一些使用细节

开始,我不是不想写这个博文的,最近要做一个功能。就是需要使用到spinner这个插件功能。如下图

spinner插件效果图

spinner插件效果图

看了效果图,其实,你应该知道我要做啥功能了。就是一个简单的,在下单量那里点击,上键或者下键,根据对于的商品价格进行总结计算。

就这么一个简单的,我好意识要写博客?肯定不是这样原因,你百度一下关键字:jquery-spinner插件。搜索完之后,你估计会愤怒。

一篇文章被转载了N次,这些我也就算了,你就是做一个spinner浅尝辄止的说明,需要一篇接一篇的转发吗?互联网本来就信息多,你们这造了多少信息垃圾,你们就不一点不负责么?

所以我选择看源代码来明白这个插件到底怎么用。

[javascript]

b.fn.spinner.defaults = {
 value: 1, //初始值
 min: 1, //最小值
 max: 999, //最大值
 step: 1, //每一步增量
 hold: true, //保持(表示没看懂)
 speed: "medium", //速度
 disabled: false //是否可以修改
};

[/javascript]

上面是这个源码的中的默认值,这是是参数,然后还有操作的函数

[javascript]

a.prototype = {
//anything code
change: function() {
//javascript code ,值改编的时候,获取其值
},
stopSpin: function() {
//javascript code
},
startSpin: function(d) {
//javascript code
},
iterator: function(d) {
//javascript code
},
value: function(d) {
//javascript code
},
disable: function() {
//javascript code
}
};

[/javascript]

上面是是这个插件的全部的内置函数,你用firebug答应结点的时候时候,也可以获取到。

你可能在网上找到说,获取spinner中的数值的方法是

[javascript]
spinner.spinner("value")
[/javascript]

这只能获取他的初始值,每次change数据改版的时候,这种获取值的方法是失败的.

从源代码来看的话

[javascript]
$(function(){

$(‘.add_num’).ace_spinner(
{
value:0,
min:0,
max:200,
step:1,
btn_up_class:’btn-info’ ,
btn_down_class:’btn-info’,
}
).on( "change", function( ) {

var num = $(this).val(); //获取选择框里面的改版后数字
} );

});
[/javascript]

有能力的多看插件的源代码,不要去过分的百度,太浪费时间和感情了。。。

Giga Image Viewer — 一个用jquery在图片上面描点的插件

最近还是做了这件事,,Giga Image Viewer 是一个很优秀的Jquery插件,作者并没有开源,可是JS代码是强制开源的

并且遵从GPL协议,最近做一个项目要用,很鄙视国内一下某些平台盗用别人代码还收费的现象。。

 

我就把代码都down下来,并且处理了一下。其实作者还是提供了很多方便的API,(业界良心呀)

[javascript]
$(document).ready(function(){
var settings = {
‘viewportWidth’ : ‘100%’,
‘viewportHeight’ : ‘100%’,
‘fitToViewportShortSide’ : true,
‘contentSizeOver100’ : false,
‘startScale’ : .5, //注意是.+数字
‘startX’ : 1860,
‘startY’ : 2830,
‘animTime’ : 500,
‘draggInertia’ : 10,
‘imgDir’ : ‘images/’, //图片的目录
‘mainImgWidth’ : 5000,
‘mainImgHeight’ : 5000,
‘intNavEnable’ : true,
‘intNavPos’ : ‘B’,
‘intNavAutoHide’ : false,
‘intNavMoveDownBtt’ : true,
‘intNavMoveUpBtt’ : true,
‘intNavMoveRightBtt’ : true,
‘intNavMoveLeftBtt’ : true,
‘intNavZoomBtt’ : true,
‘intNavUnzoomBtt’ : true,
‘intNavFitToViewportBtt’ : true,
‘intNavFullSizeBtt’ : true,
‘intNavBttSizeRation’ : 1,
‘mapEnable’ : true,
‘mapPos’ : ‘BL’,
‘popupShowAction’ : ‘click’,
‘testMode’ : false
};

$(‘#myDiv’).lhpGigaImgViewer(settings, ‘MyHotspots’);
});
[/javascript]

参数真心多,,还有一个必须的

[html]
<span class="comment"><!– viewer container –></span>
<div id="myDiv" style="width:960px; height:600px; overflow:hidden; border:solid 1px #a6a6a6; background:#000;"></div>

<span class="comment"><!– hotspots container –></span>
<div id="MyHotspots" style="display:none;">

<span class="comment"><!– hotspot –></span>
<div class="lhp_giv_hotspot" data-x="1597" data-y="2569" data-visible-scale=".4">
<span class="comment"><!– marker –></span>
<div class="lhp_giv_marker pos-BR">
<img src="gfx/arrow2.png" style="float:right;" />
<span class="label">Click me <span>#2</span></span>
</div>
<span class="comment"><!– pop-up –></span>
<div class="lhp_giv_popup pos-R">
<div class="content">
<span>Lorem ipsum #2</span><br/>
<img src="gfx/popupImg1.jpg" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit…
</div>
</div>
</div>

<span class="comment"><!– hotspot –></span>

</div>
[/html]

这样的话,这要修改下面的HTML功能就可以在地图上面描点了,看一下代码你就懂怎么描点的,我就不多少了。

我现在在想,我要不要把整理后的代码PUSH的出来呢?犹豫中… 作者售价是10美元

PC端获取用户的具体位置

以前一直用高德地图的API,后来因为需求,必须用百度的地图API。

这些API都已经封装的很智能了,只需要一定的编程思维,就很简单可以实现功能。

百度地图应用

百度地图应用

功能的大概:用户通过点击地图上面的位置,在地图上面进行描点,然后再把获取的到的地理位置保存到地图上面的地址栏目中。 继续阅读

基于thinkphp开发一个管理系统后台

日志

前几天,跳槽到了另一家公司做PHP,但我发现为嘛我整天都是在写jquery。

一来就要我写一个WEB管理里面,然各种网上找UI。还真让找到了

WEB后台管理系统

WEB后台管理系统

不错吧~当时我看到这个页面我灵感就来了,然后各种微创新。

主要是做一个数据处理,JS 对json的解析,jquery对json的解析可以能见到 继续阅读