Cập nhật nội dung html động

Để nhanh chóng tìm hiểu kiến ​​thức cơ bản về cách sử dụng bảng động, hãy xem mô-đun Bảng động trong loạt bài Đào tạo cốt lõi của chúng tôi

Bảng điều khiển động là một vùng chứa chứa các tiện ích con khác trong các bộ được gọi là "trạng thái. " Một bảng điều khiển động có thể có một hoặc nhiều trạng thái và mỗi lần chỉ hiển thị một trong các trạng thái của nó. Trạng thái hiển thị có thể được đặt động bằng hành động Đặt trạng thái bảng điều khiển, làm cho các bảng động trở nên hoàn hảo để tạo băng chuyền và trình chiếu

Bảng động độc đáo ở chỗ chúng là loại tiện ích con duy nhất có thể kéo hoặc vuốt trong trình duyệt web. Chúng cũng là loại widget duy nhất có thể được ghim vào một vị trí cố định trong cửa sổ trình duyệt, khiến chúng trở thành lựa chọn lý tưởng cho các thanh bên và tiêu đề điều hướng luôn hiển thị

Tạo bảng động

Kéo từ ngăn Thư viện

Có một tiện ích bảng điều khiển động trống trong phần Động của thư viện tiện ích con Mặc định. Một bảng điều khiển động được kéo vào khung vẽ từ ngăn Thư viện sẽ bắt đầu với một trạng thái trống, duy nhất mà bạn có thể thêm tiện ích con vào

Ghi chú

Kích thước của bảng điều khiển động này được cố định theo mặc định, vì vậy hãy đảm bảo bật nó nếu bạn muốn nó tự động thay đổi kích thước để phù hợp với các tiện ích có trong nó

Tạo với Widget hiện có

Bạn có thể tạo bảng điều khiển động mới bằng cách sử dụng các tiện ích đã có trên canvas. Chọn một hoặc nhiều widget, nhấp chuột phải và chọn Create Dynamic Panel trong menu ngữ cảnh. Thao tác này sẽ tạo một bảng điều khiển động mới với một trạng thái duy nhất chứa các tiện ích đã chọn

Mặt nạ bảng động

Theo mặc định, bảng điều khiển động có đường viền màu tím để dễ dàng phát hiện chúng trên canvas. Bạn có thể chuyển đổi mặt nạ phác thảo tại View → Masks trong menu ứng dụng

quản lý bang

trên Canvas

Nhấp đúp vào bảng điều khiển động trên khung vẽ để vào chế độ chỉnh sửa trạng thái, được biểu thị bằng mặt nạ màu tím và thanh công cụ màu trắng trên khung vẽ

Ở chế độ này, bạn có thể thêm, xóa và chỉnh sửa các tiện ích trong trạng thái của bảng điều khiển động. Để tự chỉnh sửa trạng thái của bảng động, hãy nhấp vào tên của trạng thái hiện tại trong thanh ngữ cảnh nổi xuất hiện phía trên bảng động. Trong danh sách thả xuống xuất hiện, bạn có thể làm như sau

• Nhấp vào tên của một tiểu bang để xem các vật dụng của nó trên canvas
• Nhấp vào biểu tượng Trạng thái trùng lặp ở bên phải tên của một trạng thái để tạo một bản sao của nó
• Nhấp vào biểu tượng Xóa trạng thái ở bên phải tên của một tiểu bang để xóa nó
• Nhấp vào Thêm trạng thái ở cuối danh sách thả xuống để tạo trạng thái mới
• Nhấp vào biểu tượng Xem tất cả trong thanh ngữ cảnh nổi để nhập
• Kéo tên trạng thái lên và xuống để sắp xếp lại chúng (trạng thái trên cùng là trạng thái hiển thị theo mặc định)

Trong ngăn phác thảo

Chọn trạng thái bảng điều khiển động hoặc một trong các tiện ích có trong bảng điều khiển trong ngăn Phác thảo để mở trạng thái chỉnh sửa trên canvas

Để nhanh chóng di chuyển các tiện ích hiện có vào hoặc ra khỏi trạng thái bảng điều khiển động, hãy kéo chúng vào bảng Phác thảo

Để thêm một trạng thái mới vào bảng điều khiển động, hãy di chuột qua tên của nó và nhấp vào biểu tượng Thêm trạng thái ở bên phải. Tương tự, bạn có thể sao chép một trạng thái bằng cách di chuột qua tên của nó và nhấp vào biểu tượng Trạng thái trùng lặp ở bên phải. Chọn một trạng thái và nhấn DELETE để xóa nó hoặc nhấp chuột phải và chọn Delete trong menu ngữ cảnh

Để sắp xếp lại trạng thái của bảng điều khiển động, hãy kéo chúng lên và xuống hoặc nhấp chuột phải vào chúng và sử dụng các tùy chọn trong menu ngữ cảnh. Trạng thái trên cùng là trạng thái hiển thị theo mặc định

Mẹo

Nếu bảng điều khiển động cản trở bạn tương tác với các tiện ích khác trên khung vẽ, bạn có thể tạm thời ẩn bảng điều khiển đó khỏi chế độ xem bằng cách nhấp vào biểu tượng Ẩn khỏi Chế độ xem ở bên phải tên của bảng điều khiển đó trong khung Phác thảo. Thao tác này sẽ ẩn bảng điều khiển trên khung vẽ, nhưng nó vẫn hiển thị trong trình duyệt web. Để hiển thị lại bảng điều khiển, hãy nhấp lại vào biểu tượng

Tất cả các quốc gia xem

Bạn có thể xem đồng thời tất cả các trạng thái của bảng động bằng cách vào chế độ xem tất cả các trạng thái. Để làm điều đó, hãy chọn Xem tất cả từ góc trên bên phải của thanh ngữ cảnh của bảng điều khiển. Ngoài ra, bạn có thể chọn tùy chọn Xem tất cả ở cuối danh sách thả xuống của tên trạng thái bảng điều khiển

Khi xem tất cả các trạng thái, bạn có thể sắp xếp lại bố cục để hiển thị tất cả các trạng thái theo chiều dọc hoặc chiều ngang bằng cách nhấp vào nút Bố cục tự động và chọn tùy chọn bạn muốn từ trình đơn thả xuống

Ngoài ra, bạn có thể thêm, xóa và chỉnh sửa các tiện ích ở bất kỳ trạng thái bảng động riêng lẻ nào. Để thêm một tiện ích mới vào trạng thái, chỉ cần kéo tiện ích đó từ ngăn thư viện và thả vào trạng thái bảng bạn chọn

Bạn cũng có thể thêm trạng thái bảng điều khiển mới trong khi ở chế độ xem tất cả các trạng thái bằng cách nhấp vào biểu tượng + ở đầu trang. Để thoát khỏi chế độ xem tất cả các trạng thái và quay lại trang bạn đang truy cập, hãy chọn biểu tượng mũi tên quay lại ở trên cùng bên trái của trang

Phá vỡ trạng thái đầu tiên

Tùy chọn Break Away First State cho phép bạn loại bỏ trạng thái đầu tiên của bảng điều khiển động và đặt tất cả các tiện ích chứa trong đó trên khung vẽ bên ngoài bảng điều khiển. Để truy cập tùy chọn này, nhấp chuột phải vào bảng động và chọn Break Away First State trong menu ngữ cảnh

Ghi chú

Nếu bảng điều khiển động chỉ có một trạng thái, việc loại bỏ trạng thái đó cũng sẽ xóa bảng điều khiển

Kiểu đường viền và nền

Bạn có thể tạo kiểu cho trạng thái bảng điều khiển động của mình bằng các tùy chọn sau trong ngăn Kiểu. Mỗi tiểu bang có các lựa chọn riêng cho từng thuộc tính, vì vậy bạn có thể tạo kiểu cho tất cả chúng giống nhau hoặc khác nhau

• Tô màu hoặc hình ảnh. Đây là các thuộc tính nền, vì vậy màu tô hoặc hình ảnh sẽ chỉ hiển thị ở các khu vực của bảng điều khiển động không bị các tiện ích che phủ

• Màu viền, độ dày và khả năng hiển thị. Các đường viền của trạng thái hiển thị phía trước các tiện ích có trong nó, vì vậy các đường viền dày có thể chồng lên nhau hoặc cắt các tiện ích ở các cạnh của trạng thái bảng điều khiển

• bóng bên ngoài. Bóng hiển thị phía sau bảng điều khiển động và nó phải luôn hiển thị theo các giá trị độ lệch mà bạn chọn trong ngăn Kiểu

• Bán kính góc và tầm nhìn. Các góc của trạng thái hiển thị phía trước các tiện ích có trong nó, vì vậy các góc tròn có thể chồng lên nhau hoặc cắt bỏ các tiện ích ở các góc của trạng thái bảng điều khiển

Ghi chú

Khi bạn đã chọn bảng điều khiển động, các thay đổi được thực hiện đối với các tùy chọn kiểu này chỉ được áp dụng cho trạng thái đầu tiên của bảng điều khiển

Tính chất đặc biệt

Phù hợp với nội dung

Đặt bảng động thành "Vừa với nội dung" cho phép chiều rộng và chiều cao của bảng tự động thay đổi kích thước để phù hợp với các tiện ích có trong bảng. Việc thay đổi kích thước này xảy ra khi chuyển đổi giữa các trạng thái bảng điều khiển có kích thước khác nhau và khi các thay đổi được thực hiện đối với các tiện ích chứa trong trạng thái hiển thị

Để chuyển đổi cài đặt này, hãy chọn hoặc bỏ chọn hộp cho Vừa với nội dung trong ngăn Kiểu hoặc bấm đúp vào bất kỳ ô điều khiển thay đổi kích thước nào của bảng điều khiển động

Ghi chú

Vừa với nội dung sẽ tự động bị tắt nếu bạn thay đổi kích thước bảng điều khiển động theo cách thủ công, thông qua các trường W và H trong ngăn Kiểu hoặc bằng cách kéo bộ điều khiển thay đổi kích thước của bảng điều khiển

cuộn

Bạn có thể làm cho nội dung của bảng điều khiển động có thể cuộn được bằng cách làm cho bản thân bảng điều khiển động đó ngắn hơn hoặc hẹp hơn nội dung trạng thái của nó. Thao tác này sẽ tắt tính năng Vừa với nội dung và ẩn bất kỳ tiện ích con nào nằm ngoài ranh giới của bảng điều khiển động

Sau đó, để bật tính năng cuộn, hãy chọn một trong các tùy chọn sau trong menu thả xuống Cuộn trong ngăn Kiểu

• Cuộn khi cần thiết
• Cuộn dọc
• Cuộn ngang

Ghi chú

Các bảng động chỉ có thể được cuộn trong trình duyệt web và kiểu dáng của các thanh cuộn được kiểm soát bởi trình duyệt. Thanh cuộn mô phỏng sẽ xuất hiện trên bảng điều khiển động trong Axure RP, nhưng chúng không hoạt động

Rộng 100%

Bảng điều khiển động "rộng 100%" được sử dụng để tạo màu hoặc hình ảnh trải dài toàn bộ chiều rộng của cửa sổ trình duyệt

Bắt đầu bằng cách đặt màu nền hoặc hình nền cho trạng thái đầu tiên của bảng điều khiển động. Sau đó, kiểm tra 100% Wide trong khung Style. Khi bạn xem nguyên mẫu trong trình duyệt web của mình, nó sẽ mở rộng toàn bộ chiều rộng của cửa sổ. Nếu bạn thay đổi kích thước cửa sổ, chiều rộng của bảng điều khiển động (và nền của nó) sẽ được điều chỉnh tự động

Ghi chú

Thuộc tính này chỉ thay đổi kích thước của bảng điều khiển động. Các vật dụng chứa trong đó không bị ảnh hưởng

Ghim vào trình duyệt

Tùy chọn "Ghim vào trình duyệt" cố định bảng điều khiển động ở vị trí tương ứng với cửa sổ trình duyệt, nghĩa là bảng điều khiển sẽ không di chuyển khi cuộn trang. Sử dụng tùy chọn này để xây dựng những thứ như tiêu đề điều hướng luôn hiển thị và

1. Chọn một bảng điều khiển động và nhấp vào Ghim vào trình duyệt trong ngăn Kiểu

2. Trong hộp thoại xuất hiện, hãy đánh dấu vào ô Pin to browser window to enable the feature

3. Bên dưới, định cấu hình vị trí ngang và dọc của bảng điều khiển

   Ghi chú

   Lề cho các tùy chọn chốt Trái và Đỉnh được đặt tự động dựa trên tọa độ X và Y của bảng điều khiển động trên canvas Axure RP. Để thay đổi các lề này, hãy di chuyển Bảng điều khiển động trên canvas

4. Chọn hộp Keep in front nếu bạn muốn bảng điều khiển luôn xuất hiện trước tất cả các tiện ích con khác trên trang

5. Nhấn OK để đóng hộp thoại

Tương tác đặc biệt

Các sự kiện và hành động dành riêng cho bảng điều khiển động

Bảng điều khiển động có một số khả năng đặc biệt mà không tiện ích nào khác có. chúng có thể được kéo, vuốt và cuộn và trạng thái hoạt động của bảng điều khiển (trạng thái hiển thị) có thể được thay đổi linh hoạt. Bạn có thể khai thác các khả năng này thông qua các sự kiện (Dragged, Swiped Up, v.v. ) và các hành động (Đặt trạng thái bảng điều khiển, di chuyển bằng cách kéo, v.v. ) dành riêng cho bảng động. Để tìm hiểu thêm, hãy xem bài viết về các sự kiện, trường hợp và hành động tương tác

Hành động trạng thái bảng điều khiển

Nếu bạn đã tạo bảng điều khiển động với nhiều trạng thái, bạn có thể sử dụng hành động Đặt trạng thái bảng điều khiển để tự động thay đổi trạng thái hiển thị của bảng điều khiển trong trình duyệt web

Khi định cấu hình hành động, bạn có thể chọn trạng thái từ một trong các tùy chọn này

• Tên của một tiểu bang cụ thể

• Tiếp theo, sẽ đặt bảng điều khiển sang trạng thái tiếp theo trong danh sách. Tùy chọn này có thể được sử dụng với Lặp lại mọi. hộp kiểm ms để tự động chuyển qua tất cả các trạng thái của bảng điều khiển. Thêm tùy chọn Wrap from last to first sẽ cho phép bạn tạo các cấu trúc lặp lại như băng chuyền hình ảnh và trình chiếu

• Trước đó, sẽ đặt bảng điều khiển về trạng thái trước đó trong danh sách. Tùy chọn này có thể được cấu hình tương tự như Next

• Dừng lặp lại, điều này sẽ dừng bất kỳ lặp lại Tiếp theo hoặc Trước đó tự động nào nữa

• Giá trị, cho phép bạn đặt bảng thành một trạng thái cụ thể thông qua tên hoặc vị trí của nó trong danh sách trạng thái (1, 2, 3, v.v. ). Bạn có thể nhập một giá trị bằng chữ vào trường này hoặc điền động nó bằng một biến hoặc biểu thức. Điều này rất hữu ích để đặt trạng thái của bảng điều khiển động trên một trang khác

Hiệu ứng kiểu chuột lửa

Theo mặc định, các tiện ích có hiệu ứng kiểu chuột bên trong bảng động hoạt động như bình thường. hiệu ứng phong cách được hiển thị khi bạn di chuột qua hoặc nhấp vào tiện ích trong trình duyệt web. Tuy nhiên, bạn có thể chọn kích hoạt các hiệu ứng kiểu của tất cả các tiện ích có trong cùng một lúc khi bạn di chuột qua hoặc nhấp vào bất kỳ phần nào của chính bảng điều khiển động, bao gồm mọi khoảng trống giữa các tiện ích

Để làm như vậy, hãy chọn bảng điều khiển động và chọn hộp cho Hiệu ứng kiểu chuột lửa trong ngăn Tương tác

Tương tác trên Dynamic Panels VS Contained Widgets

Các bảng động có một số sự kiện giống như các tiện ích chứa trong chúng có thể có (ví dụ: Nhấp hoặc Nhấn), điều này có khả năng dẫn đến xung đột. Nếu một bảng điều khiển động và một trong các tiện ích chứa trong đó có các hành động được thiết lập trong cùng một sự kiện, thì các hành động của tiện ích đó sẽ được thực thi thay vì của bảng điều khiển

Nhóm lựa chọn

Bạn có thể tạo mối quan hệ giữa một nhóm các tiện ích bảng hình dạng, đường thẳng, hình ảnh và/hoặc động, trong đó chỉ một tiện ích tại một thời điểm có thể được đặt ở trạng thái đã chọn bằng. (Điều này tương tự như mối quan hệ giữa. )