1

写真ギャラリーを動的に構築する方法を知っていますが、ユーザーが写真をクリックしたときにイベントをトリガーできるようにするにはどうすればよいですか？

レイアウトの内側ではなく外側にエンゲージ機能を持たせたくありません：それは可能ですか？

はっきりしないので教えてください。

4

4 に答える 4

4

前述のように、レイアウト内のコードを最小化するスタイルを作成するのが最善です。したがって、スタイルは必要なアクションに対してすでに構成されています。

ピクチャーギャラリーの場合、要件に合わせてサムスタイルを作成します。

しかし、単純なことのために'engage funcを使用する必要はありません！必要なのが左/右クリックの処理である場合は、1つまたは2つのアクションブロックで十分であり、はるかに簡単です。

完全な例を次に示します。

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 [
        ...
    ]
]

レイアウトで IMAGE2 を使用できますが、IMAGE は変更されません。

なぜスタイライズ/マスター? 私は STYLIZE/MASTER を習慣的に使用しているため、レイアウトで特定のスタイル リストを指定する必要がなく、レイアウトごとに 1 行のコードを削減できます。

于 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 に答える