189 8069 5689
Web设计师是否应该学习编写代码是个充满争议的问题。通常，在完成了一件网页设计后他们把创建网页代码的繁重工作都留给了程序员们。这种现象不只出现在网络开发行业，在软件及游戏开发业也是如此。
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名申请、网站空间、营销软件、网站建设、马村网站维护、网站推广。
有人也说AJAX很难，但自从jQuery出现后，再难我们都可以轻松驾驭了。jQuery作为当前流行的JavaScript框架将使 Ajax 变得及其简单。这篇文章就是为各位网站设计师和其他新手讲述的, jQuery对于Web 设计师来说有什么作用？
对那些可能还没听说过 jQuery 的设计师来说，什么是 jQuery？
jQuery 是一种让开发和设计者在他们的网页中添加交互内容的工具，它的核心命令让你在网页中定位或创建对象并对之进行操作，它事实上是一种更容易使用的 JavaScript，可以不必强迫页面刷新而对页面进行各种操作。
为什么 jQuery 对 Web 设计师有用？
JavaScript 为设计拓宽了视野，而 jQuery 让这一切变得更简单。对那些通晓 CSS 的设计师来说，编写 jQuery 代码很类似，而对于那些拥有 Flash 经验的设计师来说，jQuery 是一种标准化的，开放的技术，它可以实现类似 Flash 的交互效果。
你将在 The Future of Web Deisgn New York 大会上做 jQuery 讲座，大体内容是什么？
我将对 jQuery 库做一简介，接下来会通过一些实践一步一步讲解如何在站点中提升用户体验，我将演示一些技术，看看 jQuery 如何弥补 CSS 或某些浏览器的 CSS 处理的不足。我将讲解如何善用动画，如何防止滥用。最后将演示一些有趣的插件。
jQuery 有不少实用插件，哪一些是设计师不可或缺的？
这要看网站，或者说客户的需求。我自己常用的一个插件是 Mike Alsup 设计的 Cycle Plugin，这是一个轮番播放图片的饰件，拥有很漂亮的过度效果，这个插件并不限于播放图片，还可以播放任何内容，它确实很不错，在那么小的空间可以放那么多内容。
最近我还对 jQuery UI 插件颇感兴趣，这套插件使富用户体验，如拖放操作，变得很简单，它包含的部件都很棒，我已经开始使用其中的对话框，Tab 以及日期选择器等。
Web 设计的未来是什么？
在预测任何未来技术方面我完全象个傻瓜。在某些方面，如果我们无法摆脱那些旧浏览器的话，事情可能没多少改变，不过，即使现在，在那些更好的浏览器身上，我们也已经看到一些令人振奋的东西，我期待看到一些全新的东西。
Webkit 引擎开发团队已经做在 CSS 动画方面做了很多工作，他们甚至将触角伸向图形硬件来实现炫目的视觉效果。Firefox， Safari， and Chrome 正在 JavaScript 引擎方面你追我赶，而众多 JavaScript 库也在性能上大幅提升。我们会开到越来越多的 HTML 5 元素的使用，如 Canvas， 音频，视频。Web 字体方面也将更加完善，不管从技术方面还是版权方面。可以肯定的是，未来的 Web 会让人惊异。
一．jQuery
UI
jQuery
UI
是以jQuery
为基础的开源JavaScript
网页用户界面代码库。包
含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很
好交互性的web
应用程序。
jQuery
UI
的官网网站为：
jquery-ui-x.xx.x.custom.zip
。里面目录结构如下：
1.css，包含与jQuery
UI
相关的CSS
文件；
2.js，包含jQuery
UI
相关的JavaScript
文件；
3.Development-bundle，包含多个不同的子目录：demos(jQuery
UI
示例文件)、docs(jQuery
UI
的文档文件)、themes(CSS
主题文件)和ui(jQuery
ui
的JavaScript
文件)。
4.Index.html，可以查看jQuery
UI
功能的索引页。
二．CSS
主题
CSS
主题就是jQuery
UI
的皮肤，有各种色调的模版提供使用。对于程序员，可以使用
最和网站符合的模版；对于美工，也提供了没有任何样式的模版基于设计。
可以在这里：
查看已有模版样式。
三.
简单引入
由于jQuery
UI
不同组件的引入都有类似的特点和语法，所以这里只介绍两种组件
的引入方式，这样可以以此类推其他组件的引入方式。
button
按钮
//将button
按钮设置成UI
$('#button').button();
dialog
对话框
//将div
设置成dialog
对话框
$('#dialog
').click(function
()
{
$("#dialog
").dialog();
});
这样的形式，可以得知，jQuery
UI的引入都是这样的
组件名()
方法的形式引入。
jQueryWebcam这个插件为直接在JavaScript中与摄像头通信提供了一个透明的访问层。它通一个SW文件与摄像头交互，可以显示Webcam输出和捕捉图象。如果有多个摄像头，它可以显示可用的摄像头列表，然后供用户选择其中任意一个。
一、jQuery Webcam介绍
jQuery的摄像头插件是一个透明层，用相机直接在JavaScript中的沟通。
这个插件提供了三种不同的模式，通过一个小的接入网络摄像头应用程序接口直接与JavaScript
-或者更准确地说是jQuery。因此，它是可能带来的图像在画布上（回调模式），存储图像在服务器（保存模式）和流的Flash元素的实况图像画布上（流模式）。
二、jQuery Webcam使用方法
简单调用
$("#camera").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "/download/jscam_canvas_only.swf",
onTick: function() {},
onSave: function() {},
onCapture: function() {},
debug: function() {},
onLoad: function() {}
});
参数说明
windth：flash文件的宽度
height：flash文件的高度
mode：储存模式：callback, save, stream
swffile：flash文件的地址
拍照
调用webcam.capture();方法实现拍照。
保存照片
webcam.save();方法实现保存照片，简单调用里面的onSave参数是保存照片的方法，接收一个函数为照片
var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
if (canvas.toDataURL) {
ctx = canvas.getContext("2d");
image = ctx.getImageData(0, 0, 320, 240);
saveCB = function(data) {
var col = data.split(";");
var img = image;
for(var i = 0; i 320; i++) {
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp 16) 0xff;
img.data[pos + 1] = (tmp 8) 0xff;
img.data[pos + 2] = tmp 0xff;
img.data[pos + 3] = 0xff;
pos+= 4;
}
if (pos = 4 * 320 * 240) {
ctx.putImageData(img, 0, 0);
$.post("/author/uedsc?page=avatar", {type: "data", image: canvas.toDataURL("image/jpeg")}, function(){
location.reload();
});
pos = 0;
}
};
} else {
saveCB = function(data) {
image.push(data);
pos+= 4 * 320;
if (pos = 4 * 320 * 240) {
$.post("/author/uedsc?page=avatar", {type: "data", image: image.join('|')}, function(){
location.reload();
});
pos = 0;
}
};
}
以上是官方的例子，创建一个canvas来保存图片，然后上传到服务端。
1.UI.Layout jQuery UI布局插件
官方网站：
使用大小可折叠的嵌套面板和大量选项创建高级UI布局。布局可以创建任何你想要的UI外观; 从简单的标题或侧边栏到具有工具栏，菜单，帮助面板，状态栏，子表单等的复杂应用程序。集成并增强其他UI小部件，如选项卡，手风琴和对话框，以创建丰富的界面。
2.jQUery Masonry
官方网站：
所有项目的大小和样式都由您自己的CSS处理。项目大小可以用响应式布局的百分比来设置
3.jLayout
jLayout JavaScript库提供了用于布局组件的布局算法。一个组件是一个抽象; 它可以通过多种方式实现，例如HTML5 Canvas绘图中的项目或HTML元素。jLayout库允许您专注于绘制各个组件，而不是如何将其排列在屏幕上。
GitHub：
4.jQuery pageSlide
Query pageSlide 是一个jQuery插件，它可以控制一个隐藏页面的显示和关闭。jQuery展开左右侧栏目插件PageSlide，pageslide插件功能实现现实隐藏侧边栏的功能。插件可以读取另个一html,也可以是当前页面中的元素，目前比较流行的导航菜单展现形式,特别是在手机端或者触屏页面,效果还是不错的
demo：
5.jQSlickWrap
jQSlickWrap是一个真正可以将内容包裹在图片周围的jQuery插件。该插件使用HTML5 Canvas标签,用法非常简单。可以轻松而准确地实现浮动图像的文字环绕效果。
6.Columnizer
官方网址：
Columnizer jQuery Plugin将自动以报纸列格式来布局您的内容。您可以指定列宽或列的静态数量。而且，当然，这很容易使用！Columnizer会将CSS类添加到它创建的列中。每列将有一个“列”类名。第一列将有“第一”，最后一列将有“最后”。这使您可以更轻松地定位CSS标记中的特定列。
github:
7：Columns
jQueryJSON数据转换为html表插件Columns
GitHub：
Columns创建JSON数据转化为HTML方法 引用jQuery库1.7或更高版本和Columns插件文件，列是将JSON数据创建为可排序，可搜索和分页的HTML表格的简单方法。所有你需要的是提供的数据，和列将完成其余的。因为Columns动态地创建了所有必要的HTML，所以唯一需要的HTML是一个空的HTML元素，比如一个div标签，在初始化时使用相应的id。