前端购物车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美元

递归调用,POST循环请求

jQuery 代码部分

[javascript]

$(function(){

       _post(‘demo.php’,{userid:’PHP’});
 });

    function _post(url,post){

                   $.post(url,post,function(data){

                         if(data.status){
                                   _post(data.back.url,data.back.data);
                      }

                 },"json");
 }

[/javascript]

PHP代码

[php]

$data = array(‘back’=>array(‘url’=>’demo2.php’,’data’=>array(‘userid’=>’dwz’)),’status’=>true);
echo json_encode($data);

[/php]

效果页面

PHP开发工程师

PC端获取用户的具体位置

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

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

百度地图应用

百度地图应用

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

PHP定时更新程序设计

说道定时器,我以前一直进入一个死胡同,而且一直迷惑不解的是:“服务器怎么能直接去执行PHP代码?”

现在回想起来,我以前的想法是错误的,网页的执行流程

 打开WEB页面 —- 加载HTML代码 (包括CSS,javascript)— 执行PHP代码 — 完成 

粗约的就先理解成上面的这个样子。

我们都知道PHP做成服务器端的脚本,它是有超时设置的,可以通过 set_time_limit() 函数来处理。但这样处理PHP代码十分

消耗CPU资源。所以不建议通过循环处理PHP代码来实现。

一般的情况是用javascript来处理。

[javascript]
$(function(){
var tims = 1000*60*60*10; //设置延迟处理的时间,这里设置的是10个小时
 setInterval(function(){
//要执行的码
$.post("./data.php",{ postdata },function(datas){
if(id.data == 1)
{
  $("body").append(id.info+"<br/>");
}
});
},tims);
},json);
[/javascript]

上面是WEB前台要执行的javascript代码,通过延时执行ajax来达到自动处理的效果 继续阅读

PHP云打印类

一个项目需求要几百台电脑都有打印功能,本来是想用网络打印机的,后来发现没有网络打印机,就自己动手写一个打印类算了。

类实现想法是:先把要打印的数据都收集起来,在用js调用window打印函数。目前就使用于IE。

类提供打印排队功能。(PS,说白了就是一条一条读取数据) 继续阅读