iPad 仿真器

eshion

用aardioHTMLayout做的一个ipad仿真器，功能比较简单，主要为了实践一下aardio开发HTMLayout页面的便利程度，

总得说来，用aardio开发效率非常高。

程序中用aardio实现了自定义的解锁拖动behavior moveable，不过发现自定义的事件只能写在aardio代码里，而不能用css！写在样式文件上，

这样对于如果多个元素要用到moveable行为，而每个元素行为不完全一样的话，要判断的东西就就比较多；如果能用css！为每个元素写单独的移动事件，

代码可读性会更好。或许还有更好解决方案，望高手们不吝指点。

源码下载：
ipad.7z (675.26 KB, 下载次数: 388)

2015-6-16 09:14 上传

点击文件名下载附件

Jewel_M

下载来学习学习！

hxhlb

支持一下子,学习一下.

ljtnine

很强大，感谢分享

编程

今天仔细看了一下 eshion的源码，下面的建议供参考：

1. 在HTMLayout里用超链接模拟按钮在定位与拖放时有些麻烦，建议使用 widget，
因为 div#main 被设为 command="window-caption"，这就带来一个问题：左键单击、拖放事件被标题栏干扰了。打开 web.layout.behavior.windowCommand 看源码，如果被点击的节点是 widget，input，li 会忽略不处理，所以桌面图标使用 widget 也可以解决该问题。打开 layout\index.html 修改如下

1. 
   
2. <div class="desktops">
   
3.         <widget class="app_1" name="calendar"></widget>
   
4.         <widget class="app_2" name="contact"></widget>
   
5.         <widget class="app_3" name="notes"></widget>
   
6.         <widget class="app_4" name="Maps"></widget>
   
7.         <widget class="app_5" name="videos"></widget>
   
8.         <widget class="app_6" name="youtube"></widget>
   
9.         <widget class="app_7" name="itunes"></widget>
   
10.         <widget class="app_8" name="app store"></widget>
    
11.         <widget class="app_9" name="Settings"></widget>
    
12. </div>
    

复制代码

2. 打开 layout\style.css 修改如下（ 使桌面图标可以拖动 ）

1. 
   
2. .desktops{
   
3.   flow: h-flow; /*桌面的子节点设为自动水平布局*/
   
4.   accept-drop: selector( .desktops widget ); /*指定可拖放到桌面的节点*/
   
5.   drop:insert; /*拖放到桌面的图标插入到该位置*/
   
6.   
   
7.   padding:20px 20px;
   
8.   height: 350px;
   
9.   width: 100%%;
   
10. }
    
11. 
    
12. .desktops widget{
    
13.         draggable:only-move; /*设为可拖放，拖放模式为移动图标*/
    
14.         width: 58px;
    
15.         height: 60px;
    
16.         margin: 10px 20px 0;
    
17.         cursor: pointer;
    
18. }
    

复制代码

修改后仿真器上的桌面图标可以拖动了，其实关键的只加了三句代码，

可被拖动的图标CSS设为 draggable:only-move;
可以接受拖放的容器指定 accept-drop: selector( .desktops widget ) 以及 drop:insert;

关于拖放的更多细节，可参考：aardio范例里 -> HTMLayout范例预览工具 -> 拖放

，请下载附件覆盖到eshion提供的Ipad仿真器工程目录即可。
layout.zip (2.25 KB, 下载次数: 340)

2013-2-26 10:53 上传

点击文件名下载附件

  

双书幻

牛..B....

eshion

编程 发表于 2013-2-25 14:59
......关于拖放的更多细节，可参考：aardio范例里 -> HTMLayout范例预览工具 -> 拖放

我试了一下，drag-n-drop中，moving用assigned!来触发事件的时候只能触发一次（而且还不能控制移动元素的top），能在鼠标移动的时候不断触发吗？类似aardio中的onMouseMove

qqmmcc

很逼真，感谢分享~

笑问天

厉害，感谢分享1

小X

做的不错哦 很漂亮

CP3

早早尝了个鲜,非常漂亮,感谢分享~~

stillywud

非常帅气。。。让我能想起一些商机~~

海飘飘

牛

binotes

仰望啊

wudijushi

的确不错，界面也能用moveable实现切换吗？

神彩飞扬

谢谢分享，好棒 。

xauto

感谢分享 ！

fyy

效果非常好！

我是老废

前端的高手啊！！！有前途