Archive for the ‘网页设计’ Category
Jquery表格组件-jtable，小爝原创。
星期五, 4月 23rd, 2010对于一个B/S架构的项目，最常遇到的一个组件可能就是表格了。对于表格的重用，经过大概2周的时间为公司写了个纯的javascript的渲染组件-jquery1.4.2版本下支持。需求是这么产生的：
公司写css和开发javascript特效或者一些其他杂七杂八与javascript的工作都是我负责，在去年中的工作中总结到太多时候每个页面扔进了过多的重复代码，有CSS，也包含一些HTML，大量的垃圾源代码。而由于基于本身项目的多变性，外观和功能越来越多次的被推翻重来，很明显工作量和以前不能同日而语。我觉得需要这么一个东西来解救大家，让大家把底层的东西一次性做好，后端输出直接是清晰的json字符串，前端接收后直接转换成可定制多扩展易部署的通用视图。不仅良好的约定了前端开发人员与后台程序员的对接接口，也解决了大量重复劳动的过程，而仅仅需要维护一个库文件和部署的几行代码，方便实际。
那么好吧：面对的两个选择，一个是我们这的技术总监找到的这个Jquery插件-jqgrid，还有一个选择是自己开发一个类似的但是功能绝对不能比他这个差的！小爝选择了后者……。下面是一张Jqgrid的截图，通过图片来解释一些事情：
这个DEMO中我需要到的功能都是什么呢，支持json方式取数据，支持页面array组成数据，支持表格的样式可定制，支持表格的基本附加功能如：分页，跳转，搜索，上下页，各行换色的支持，特殊行样式支持，排序支持，点击后的表格样式，复选框的机制，表格内部链接的支持与互相数据之间的通信。
基本需求如上，看过他的部署代码，思路开始清晰，但是从头开始写这么一个东西还是有点心有余悸，毕竟也是第一次。在确定了以上需求都没有攻克不了的技术难点的情况下，开始开发吧。2周后，一个580多行的jquery插件产出，（包括大量注释和回行），基本需求符合上面需要的jtable插件被开发出来了-支持浏览器包括IE系列和非IE系列！
那么看下我的jtable都支持什么需求功能吧。除了上面所列机制的特点，我为公司定制了一套，也是特别要求的。页面加载后先加载当前页面array数据产生表格，取消第一次ajax请求，减轻服务压力，已经实现，并包含3种数据加载模式，array，json，上面2种的柔和。扩展部分：分页机制仿google下面分页，7页码，左右轮换，当前页码智能定位。限定表格行数，把一些服务器端逻辑展现到前台JS脚本下自动处理，可一页面多处部署，最最重要的我留了个接口可从外部传入自定义函数来控制表格的初始化等等。（这点做的时候觉得没必要，可后来讨论却是最重要的一步扩展）-实现了插件的扩展和重写。来张图吧：
看吧，ajax后清空的表格容器里依然可以记录操作项耶。这个jqgrid不知道支持没支持~
由于插件这次写的太过复杂细节会分出要点发出来分享，但是制作一个插件的过程确实过瘾而且锻炼人。目前这个demo只是展示给同事和需求的，所以配置方法，部署方法，接口等还不适合公司项目之外的使用，但是确实可以应用，我想等最后成熟了会发布chm出来的，也希望这个插件可以i解救一些被重复大量table困扰的开发小组。
后期可能还会再加其他扩展，比如内部我们讨论搜索到底需要不需要再另外留出个接口，实现可定制和分拆加载。昨天看了些YUI的loader（），觉得特性最好最强大，实现机制也不是非常复杂，有可能会借鉴一下，我越来越有想自己开发一套自己的js UI组件的梦想了，无论是以后基于自己的工具库还是jquery的……嘿。
最后DEMO地址：http://www.designsor.com/demo/jtable/
源文件代码等可自行FF下查看源代码。注释还算凑合主要我怕自己晕多写了些~（样式是自己做的嘞，不好看可自定制~~~哈）
Jquery滚动图片插件-jcarouselV1.0。
星期三, 4月 7th, 2010Jquery滚动图片插件-jcarouselV1.0版本终于在今天发布了，虽然BUG还很多，虽然内容功能都比较简陋，但是也是我第一次发布Jquery插件。心情很激动……
这个插件主要是仿腾讯PC频道首页的图片滚动展示JS效果，与腾讯的那个相比，我的插件可定制宽高，速度，间隔，且有停留查看功能，可自定制弹出窗口属性和HREF属性。基本的图片滚动功能都拥有了，而且支持自定义CSS样式。
具体的都在源文件里，详细的版本信息和更新以后都会发布在下面这个地址：
http://www.designsor.com/demo/jc/content/jcarousel/
支持一个页面多处调用，互相不冲突（这个要多谢豆瓣JS小组的史努比同学的全局变量解决方法）
下面发个效果图吧~
后期还会推出一款类似jqgrid的表格jquery处理插件，请期待吧~
到北京半年来读完的书。
星期一, 4月 5th, 2010公司有一部分，改天在公司照下再上传。这些是在租住的地方找的几本。
嗯，其实，书看太多，不好，就和史努比说的似的，有种想占有知识的错觉。嗯，潜心看些基础的东西吧。特此记录。目前为之，已读完一遍的有：构建可扩展的Web站点，JavaScript DOM高级程序设计，JavaScript语言精粹，javascript设计模式，jQuery实战，jQuery基础教程，精通CSS，Ajax基础教程，JavaScript DOM编程艺术，CSS网站布局实录，ppk 谈 JavaScript，高性能网站建设指南。
没读完的还是有那么3 4本。加油吧。
阿里巴巴UED前端开发面试题
星期五, 4月 2nd, 2010下面是朋友发给我的阿里巴巴UED前端开发的网上测试题，感觉很有意思，把我所写的答案贴出来分享一下，主要题目为4部，第一个是一些职业发展倾向的心理测试，跳过不说，然后是一道CSS布局题目，比较简单，下面给出题目要求：
我列出我的代码：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”x-ua-compatible” content=”ie=7″ />
<meta name=”author” content=”XiaoJue”>
<title>用CSS实现布局</title>
<style>
*{margin:0px; padding:0px;}
div{background:#CDD8DA;}
.left_t,.left_d{width:90px;}
div.left_t{height:152px;}
div.left_d{height:117px;margin-top:10px;}
div.main{width:217px;height:279px;left:100px;top:0px;position:absolute;}
</style>
</head>
<body>
<div class=”left_t blow”>a</div>
<div class=”left_d”>b</div>
<div class=”main blow”>c</div>
</body>
</html>
使用了绝对定位和一个下边距，这个因人而异了，3个标签构建布局，你可以写全屏幕的等等等等，但是我做的是按照它给出图片的样子，进行的布局。
下面一道是JS问题，比较有意思，也是着重说一下，看题目要求。
关键字封装。复用。提示：可以使用任何开源代码。也就是框架库了。
我为了快速实现，选择了最熟悉的jquery，为了体现封装和复用，选择了jquery的插件机制来进行封装和复用。
下面是代码预览地址：
http://www.designsor.com/demo/albb.html
具体代码可以查看连接里的页面源代码，实现方法有很多，在不做HTML页面修改和不影响所有其他东西的前提下，使用了JS来实现要求，兼容FF/IE，其他没有测试，但是所有方法均是jquery的方法，所以兼容性估计应该可以保障。
封装之后的调用代码样例：
$(function(){
$(’.blow’).jblow({”b_size”:25}); //调用封装的方法，可多次调用不影响HTML结构
})
HTML：
<body>
<div class=”left_t blow”>a</div>
<div class=”left_d”>b</div>
<div class=”main blow”>c</div>
</body>
好了，最后给出面试题地址：
CIBOX-HTML,CSS,JS音乐播放器。
星期三, 3月 31st, 2010若曦给我画的草稿LOGO，很喜欢，不知道上了色什么效果。
下面我简单的介绍下我想做的一个插件CIBOX。
其实就是根据Jquery的一个新的插件jplayer衍生出来的想法，利用PHP的CI框架和Jquery的强大音乐支持做一款音乐播放器插件，而实现是纯的可定制的HTML,CSS组件。
多的不说，已经开发了有快半个月，希望插件站点能在6月底完成，也期待我家若曦的带色LOGO正稿诞生~特别记录。
活学活用，Jquery制作图片展示轮播组建。
星期三, 3月 31st, 2010废话不多说，先看图吧。
然后是预览地址：一个是译言的首页滚动展示，直接看http://www.yeeyan.org/ 另一个的预览地址:http://www.designsor.com/demo/jquey/jquerypic.html
之前帮朋友做的2个轮播JS吧，大家都很常见的效果，图片滚动切换，图片渐隐切换，随时间滚动，停止，转换。大概的门户站都会有自己一个风格的这么个JS特效，但是我们到底有多少人，真正懂得里面的一些道理呢，可能更多的是自己找点特效代码或者Jquery Ui这种组建攒了攒，样子对了就好了，这样其实真的不好，花些时间搞懂这些常用的而又实用的功能很有必要，作为记录，下面给些小爝制作中的心得和分享。
首先，要想自己做出这种效果的门槛是，CSS HTML布局过硬，了解相对定位绝对定位原理，了解透明度CSS原理，了解JS基础的DOM知识，还有JS操作CSS的基础知识，最后是一些小的JS常用编程技巧。
如果上面你都符合，又想自己做出组合在一起的实际应用，那么往下读吧。
首先，上面2个例子，一个是左右滚动，下部指针控制且切换样式。一个是透明度渐隐，下部指针控制切切换样式。鼠标经过都停止切换，移开之后按照当前顺序继续切换。小图都可操作。
好了，以上就是这个功能的基本需求。小爝不推荐现在开始打开站酷，68，蓝色理想开始找代码。。。那样做你永远接触不到前端“开发”这个东西了，个人感觉领会了JS之后的开发才有真的乐趣。当然，现在我说的也只是皮毛。正文开始：
从需求开始想代码：
作为HTML+CSS+JS一起完成的东西，根本上是先理顺基本的思路，可能很多人会写CSS，布局完全靠想，写JS也是。我分享的完全是经验（实际代码自己去看网页源文件），那么继续，首先，布局：
根据效果图分析，快速形成布局。图片切换和JS这种特效做法很多，讲下基本的几种和优缺点：1，我目前用的，图片全部加载，代码直接铺上，快速实现功能，动画过度稳，图片无缓冲，但是开始加载时间会过长。2，XML,JSON,ARRAY数组切换，图片开始加载速度快，切换时延迟，代码稍复杂，实现功能速度比前者慢，要多写几个监听函数。3，结合PHP后端语言实现了，和前端开发没啥关系。
以上是原理，而不是直接叫你去找什么插件，什么特效代码，你要记住，所有这些都是以上原理。
下面：实现动画，首先：上下左右斜着的各种动画吧。原理：CSS随时间的变化而变化，绝对相对定位后的TOP,LEFT值变化而已。根据不同算法，加速度，减速，缓冲等均可实现。然后：透明度渐变，CSS中的透明度属性，随时间变化而变化，同理不解释。
根据不同需要，完成不同布局：
上面的2个需求不同，因为一个是左右移动，所以我选择绝对定位大容器后相对定位里面小图片，然后控制图片移动来实现切换，大容器OVERFLOW：HIDDEN；第2个因为是透明度切换，所以没必要移动的话，全部绝对定位5张图一个位置，根据时间来做不同的透明度变化，实现切换效果。
好，说到这里原理和实现方法还有代码你应该都弄好了，至于下部的指针，也就是小图片，随便你怎么去写吧。都做出HTML代码即可。
下面来说JQUERY里的封装好的几个JS事件句柄，也就是HOVER事件和CLICK事件了，JQ可以完成，JS也可以。通过DOM选择或者JQ的 $()来实现节点选择，这些是根本知识了。可以参考JS手册和JQ手册。时间函数，JS自带的SetTimeout还有清除延迟clearTimeout的用法，希望你仔细看下W3Cschool里的解释。我也不多说，了解完上面的知识，可以进行编码了。
设置标志位,JS常用小技巧。设置个全局变量保存当前图片指针状态，也就是说，当前图片切换到哪里了，我们需要记录。默认当然开始是第一个了，所以默认赋值为1。写一个切换函数function move(){},里面包含什么呢，节点的选择，你写的HTML的容器，用JS选择吧，然后做你需要做的动画效果，比如，第一个图，向左移动自己的宽度，结束。
开始封装，第一个图，用标识符代替，向左移动自己的宽度，自己的宽度，封装，向左移动的距离有了，第一次移动1*单位宽度；OK，然后标识符+1；结束。
这个函数差不多OK了。第一个操作结束，标识符移到2，嗯，时间函数,settimeout完成重复和延迟，settimeout(move,3000),函数的最后加这个代码，3秒后再次执行这个代码。哈哈，看，切换效果完成，因为标识符自增，下次执行的就是第2张图了，最后加入控制结束回归的判断，if(flg==5){flg=1}；OK不用解释了吧，里面的5可以封装的。。。
完成切换的JS了，原理就这么简单。透明度同理自己思考吧。下面是HOVER和CLICK事件了登场了，鼠标移到大容器上，我们的切换要停止，嗯，JS里是mouseover，道理一个意思，我们cleartimeout（）就可以了，里面的参数跟你上面设置的settimeout参数即可。例子：T=settimeout（move，3000）；cleartimeout（t）；嗯哼，移动上，动画切换停止了，移动走呢？我们重新运行move函数即可了么~嗯，记得一点，移动走会立刻触发move函数，我们还是依然 需要settimeout延迟出发move函数，然后一切OK！移走，移上的就都制作完毕了。封装你的代码吧，上面的例子我没有封装，只是快速实现了而已。
最后，click事件，用在改变指针，这个好办，下面的图的顺序和上面的大图肯定是对应的。那么下面的图是1，点1的时候指针赋值为1，点2赋值为2，即可。得到这些1啊2啊什么的，你需要了解FOR循环这个编程基础知识了，其实就是有5个图，我就循环5次，每次+1.值就是你要的1 2 3 4了。。。具体实现可以看我的代码，jquery里用的each函数完成的，手册里有具体例子和解释。
嗯，到这里就应该结束我们的展示图片JS的编写了。什么什么你还没有JS和jquery的CHM手册？如果每天不看几次小爝都会觉得不舒服，所以我推荐，没有的自己google搜下DOWN了开始看吧。
希望大家js越来越NB~！
李冰设计
星期三, 2月 3rd, 2010朋友的站点，李冰设计，小爝负责制作。效果图大概发两张如下：
网站地址：
主要实现难点，一些动画的JS特效与一个简单的静态JS相册，附带简单分页。可以查看网站源代码，都写在一个页面里了。希望大家多多支持。
有关微博。
星期三, 2月 3rd, 2010太久没有做图了。今天动了动手，感觉PS好难用，不顺手的来，而且很多时候会卡住，不知道如何进下一步设计。
一张耽搁了太久的练习稿。参考了很多地方，最后还是这么不伦不类。
应该再修改下，等朋友来了再说，如果可以 应该能按照这个范儿帮忙开发下其他页面。
好了，下面是缩略图，和大图地址。
原尺寸图地址：
http://www.designsor.com/wp-content/uploads/2010/02/weibo.jpg
一个Jquery导航DEMO
星期四, 1月 28th, 2010先看下效果图：
地址为：
http://www.designsor.com/demo/flash.html
废话不多说，说下实现思路和具体的一些知识点，代码写的比较仓促，是个效果DEMO。
具体的JS代码，首先当然这个是基于JQUERY的,先加载Google的代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | (function(){ /*$(".index_muen>li").hover(function(){ $(this).fadeTo("slow",1.0) },function(){ $(this).fadeTo("slow",0.5) }); */ //DOMO里没有明确出颜色渐变，但是我做了，后期正式做的时候处理 $(".index_main").fadeIn("slow",function(){ $(".muen2") .animate({left:"80px",width:"370px",height:"93px"}, 150, function(){ $(this).css("background-position","0px 0px"); $(".main_text2").slideDown(200); }); }); //初始化 //点击的依次绑定，这里写的有点乱，因为着急出效果。 $(".index_muen>li").click(function(){ $(this) .animate({left:"80px",width:"370px",height:"93px"}, 150, function(){ $(this).css("background-position","0px 0px") }); $(".index_muen>li").not($(this)) .animate({left:"0px",width:"95",height:"23"}, 150, function(){ $(this).css("background-position","0px -105px") }) $(".main_text2").hide("fast"); }); $(".muen2").click(function(){ $(".main_text2").slideDown(200); }); //单独的第2个有文字的导航。 }); |
说一下，主要是animate这个JQUERY内置的自定义动画函数，他的功能和用法，大概的思路应该很明了的看出来。
jQueryanimate(params, [duration], [easing], [callback])
paramsOptions一组包含作为动画属性和终值的样式属性和及其值的集合
duration (可选)
String,Number三种预定速度之一的字符串(”slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing (可选)
String要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.
callback (可选)
Function在动画完成时执行的函数
其中还有个关键点就是HTML和CSS部分的组合，这里就不发代码了，可以自己查看页面的源代码，因为HTML部分和CSS部分的合理性，致使动画很容易上手，建议好好分拆我写的CSS部分，其中的图片为了让动画更流畅，也使用了css sprites技术。但是本文重点不在这里，不做过多说明。
恩，等全部修改完之后再发布更稳定的，现在只是个DEMO，其实用JS做特效导航真是个不错的选择。
