1

我知道如何动态构建图片库，我现在如何允许在用户点击图片时触发事件？

我不想在布局内部但在外部具有参与功能：可能吗？

不确定我是否清楚，所以告诉我。

4

4 回答 4

4

如前所述，最好是创建一种样式以最小化布局中的代码。因此，样式已经为您想要的操作配置。

对于图片库，我会根据自己的要求创建拇指样式。

但是对于简单的事情，您不需要使用 'engage 函数！如果您需要的是左/右键单击处理，那么一两个操作块就足够了，而且简单得多。

这是一个完整的例子：

Rebol [
    title: "Basic image gallery"
]

thumb-size: 100x100 ; size of the thumbnails
thumbs-per-row: 6   ; number of thumbs per row

; Here is the actions I want to use when clicking/right clicking the image face.
; It's just a block: it's the 'layout function that will make it a function
; with 'face and 'value arguments
thumb-action: [
    ; left click: show full size image
    view/new layout [
        origin 2 space 2
        vh3 form (either any [file? face/user-data url? face/user-data text? face/user-data] [face/user-data] ["An image without reference"])
        image face/image
    ]
]
thumb-alt-action: [
    ; right click: open up the folder/web site where the file is
    switch/default type?/word face/user-data [
        file! [call/shell join "explorer " to-local-file first split-path face/user-data]
        url! [browse face/user-data]
    ] [alert rejoin ["Can't do anything with " type? face/user-data " type of value ! Sorry."]]
]

; Our styles for the gallery
gallery-styles: probe stylize [
    ; Here is a style for the thumbnails, with the actions wanted
    thumb: image thumb-size effect [aspect] thumb-action thumb-alt-action
]

; Some samples images
imgs: [
    ; This paths are for a typical Windows7 installation
    %/c/windows/web/wallpaper/nature/img1.jpg
    %/c/windows/web/wallpaper/nature/img2.jpg
    %/c/windows/web/wallpaper/nature/img3.jpg
    %/c/windows/web/wallpaper/nature/img4.jpg
    ; URLs as examples
    http://www.rebol.com/graphics/reb-logo.gif
    http://www.rebol.com/graphics/ref-card.jpg
]

; Base for your gallery layout
gallery-lay: copy [
    origin 2 space 2 across
    styles gallery-styles
    vh2 "Image gallery"
]

; Builds the final layout
count: 0
foreach img imgs [
    ; This for handling only a defined number of thumbs per row
    if 0 = (count // thumbs-per-row) [append gallery-lay 'return]
    count: count + 1
    ; Here you add the layout code for the current image
    append gallery-lay compose [thumb (img) user-data (img)]
]

; Here we are: the result
view layout gallery-lay
于 2013-02-22T13:46:07.553 回答
2

一个非常简单的技巧是使用您想要的操作设置样式，并在必要时查看您在生成面部时设置的用户数据值。

lay: [
    across
    style my-box box [print [face/user-data face/color]]
]
repeat i 4 [
    repeat j 4 [
        repend lay [
            'my-box 50x50 get random/only [red green blue yellow] 
            'user-data to pair! reduce [i j]
        ]
    ]
    append lay 'return
]
view layout lay
于 2009-08-10T19:32:56.513 回答
2

有很多方法可以做到这一点。您没有指定如何构建图片库，但我假设您正在构建 IMAGE 样式的布局，然后显示该布局。

听起来你也想自由地对每个图像做特定的事情，所以我建议你建立一个单独的样式，可能源自 IMAGE。你可以这样做：

stylize/master [
    image: image with [
        feel: make feel [
            engage: func [face act event] [
                ; do my custom engage function
            ]
        ]
    ]
]

将代码放在布局之前。这样，您可以将 IMAGE 行为的复杂代码保留在布局块之外。当您以这种方式工作时，样式会全局更改。

您也可以通过更改名称来创建新样式：

stylize/master [
    image2: image with [
        ...
    ]
]

IMAGE 将保持不变，而您可以在布局中使用 IMAGE2。

为什么风格化/大师？我出于习惯使用 STYLIZE/MASTER，因此我不必在布局中指定特定的样式列表，并且可以为每个布局节省一行代码。

于 2009-08-10T19:33:03.360 回答
1

让我们再试一次：

lay: [
    across
    style my-box box [print [face/user-data face/color]]
]
repeat i 4 [
    repeat j 4 [
        repend lay [
            'my-box 50x50 get random/only [red green blue yellow] 
            'user-data to pair! reduce [i j]
        ]
    ]
    append lay 'return
]
view layout lay
于 2009-08-10T19:36:48.953 回答