您的位置：NetBeans->在netBeans中实现鱼眼(FishEye)的步骤

在netBeans中实现鱼眼(FishEye)的步骤2007-11-14 来自：xuejinyoulan  [收藏到我的网摘]

来源:Ada Li : Weblog
　　下面给出一个鱼眼（FishEye）的例子。FishEye的效果如同放大镜，当鼠标在图像上滑动的时候，图像会放大或者缩小。
　　
　　1. NetBeans 菜单”文件”-”新建项目”.在出现的”新建项目”窗口中,”类别”选择”Web”, 项目选择”Web应用程序”.点击”下一步”

　　2. 在”新建项目窗口中”, “项目名称”中输入”jMakiFishEye”项目. 点击”下一步”

　　3. 在”框架”窗口中,选择”jMaki Ajax Framework” . 点击”完成”.

　　4. NetBeans 中出现 jMakiFishEye 项目的同时,也会出现在”组件面板”中出现jMaki的Widgets, 包括Dojo, Flickr, Google, Yahoo等中的一些Widgets. 如果没有出现”组件面板”, 选择菜单”窗口”-＞“组件面板”.

　　在netBeans中, 用鼠标直接把”jMaki Dojo”下的Fish Eye List拖到 jMakiFishEye 项目中的index.jsp文件中. 这个例子中放在

　　6. 托拽的结果是在index.jsp中加入了一些代码, 一行是导入了jMaki的 taglib, 一个是创建了FishEye widget实例.

　　7. 这个例子中缺省配置的几幅图像是参与开发jMaki的工程师头像，下面我要把这几幅图像替换为duke. 在jMakiFishEye项目的web目录下创建images 目录，拷贝几幅duke图像，修改index.jsp中 FishEye的代码如下：

　　9. 这个FishEye的效果是水平方向的,如果想改成垂直方向, 打开jMakiFishEye下的index.jsp, 鼠标右键点击FishEyeWidget代码段, 可以看到”jMaki”菜单, 是用来对jMaki中Widget做外观配置的窗口. 出现的”dojo.fisheye Customizer”窗口中,修改”orientation”中的值为”Vertical”.

推荐人评论

下面给出一个鱼眼（FishEye）的例子。FishEye的效果如同放大镜，当鼠标在图像上滑动的时候，图像会放大或者缩小。

用户评论

正在载入评论列表...