Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > ASP/ASP.Net > Hướng dẫn tạo Slideshow control với Jquery và XML trong asp.net
Hướng dẫn tạo Slideshow control với Jquery và XML trong asp.net
Nguyễn Trung Hiếu
Share Code Web Company 2012

Hướng dẫn tạo Slideshow control với Jquery và XML trong asp.net

Bài viết hướng dẫn bạn tạo một user control Slideshow trình diễn ảnh, sử dụng jquery và xml trong asp.net. Ứng dụng của bài này thì rất đa dạng và phong phú. Hy vọng có thể giúp ích cho việc lập trình của bạn.

Để làm được cái này, trước tiên bạn cần download những thứ sau:

Sau khi download xong bạn để vào thư mục như bên dưới:
slideshow control in asp.net

SlideShow.ascx.cs

Đầu tiên bạn thêm một user control mới và đặt tên là Slideshow. Trong code behind bạn thêm một thuộc tính như sau:

WrapperID sẽ trả về giá trị ID của user control. Với mỗi lần bạn thực hiện kéo thả user control này vào trong website của bạn thì nó sẽ tự động tạo ra trường ID này. Ví dụ bạn tạo tag name của user control là “SlideShow”, thì WrapperId sẽ trả về giá trị là SlideShow1Div, SlideShow2Div…..

Thêm thuộc tính wight và height cho phép user control có thể được điều chỉnh độ rộng, độ cao tùy ý.

Trong đó:

  • AutoPlay – true = tự khởi động slideshow
  • ShowNavigation – true = cho phép hiển thị 2 nút prev và next
  • Delay_btw_slide = cho phép thiết lập chế độ delay giờ 2 lần load ảnh
  • FadeDuration = cho phép thời gian 1 bức ảnh chạy
  • Cycles_before_stopping = số vòng xoay của 1 bức ảnh
  • BtnPrevious, BtnNext, BtnPlay, BtnPause = Các nút điều khiển slideshow

Thêm các thuộc tính để lấy đường dẫn file XML. Đường dẫn mặc định là ~/xml/sites.xml

Sau đó, add thêm phương thức để bind javascript ra

Phương thức trên sẽ thực hiện bind tự động thẻ div ra mã HTML

Phương thức này dùng để đăng ký script để có thể sử dụng 2 cái file js mà chúng ta đã down về.

Tập tin simplegallery.js

Tôi sẽ không nêu ra các đoạn mã js trong bài viết này, bạn tự tạo ra hoặc có thể download mã ở cuối bài viết nhé.

Sử dụng code SLideShow XML

Bạn sử dụng Slideshow control này một cách bình thường như bao control khác đó thêm đoạn mã sau vào chỗ nào mà bạn muốn nó hiển thị

Sau đó tiền hành cài đặt các thuộc tính cho user Control này như dưới đây:
setting user control slideshow
Vậy là xong. Chúng ta đã có một user control để sử dụng cho project của chúng ta rồi. Thật tuyệt phải không nào

Download Code

(Codeproject)

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 5.702 hits
%d bloggers like this: