Tạo hiệu ứng Play/Pause/Show bài viết với asp.net

Trong bài trước "Tạo Shopping Cart show sản phẩm - asp.net" Tôi đã giới thiệu bạn dùng thư viện obout_Show_Net.dll để Show sản phẩm. Bài này tôi tiếp tục hướng dẫn bạn dùng thư viện đó để Tạo hiệu ứng Play/Pause/Show bài viết.

Để làm được bạn cần có thư viện obout_Show_Net.dll. Bạn có thể download Tạo bài viết tạo Shopping Cart show sản phẩm - asp.net.
Bạn có thể download ví dụ này ở liên kết cuối bài viết. Khi đã có thư viện này bạn viết code như sau:
+ Đăng ký sử dụng thư viện: (Bạn có thể Add vào Toolbox rồi kéo thả cho dễ)

<%@ Register TagPrefix="obshow" Namespace="OboutInc.Show" Assembly="obout_Show_Net" %>

Trong thẻ Head bạn tạo Style sheet như sau:

<style type="text/css">
.title
{
font-family:Tahoma;
font-size:13px;
color:#6B89AF;
display:block;
}
.divImage
{
float:left;
width:360px;
}
.divDescription
{
float:right;
width:250px;
}
.BaoFrame{
position:relative;
border: 1px solid #DDDDDD;
padding:1px;
margin: 0px 0px 0px 0px;
font-family:Tahoma;
font-size:13px;
width:620px;
}
</style>

Giờ trong thẻ body của trang bạn vết code như sau:

<div class="BaoFrame">
<obshow:Show id="Show1" runat="server" StyleFolder="Common/style5/"
Width="610" Height="300" ShowType="Show" ManualChanger="true" >
<Changer Type="Both" ArrowType="Side2" Height="30" Width="500" HorizontalAlign="Left" />
<Panels>
<obshow:Panel>
<div class="divImage">
<img src="DuongDanAnh1" />
</div>
<div class="divDescription">
<span class="title">Tiêu đề bài viết 1</span>
<span>Mô tả bài viết 1</span>
</div>
</obshow:Panel>
<obshow:Panel>
<div class="divImage">
<img src="DuongDanAnh2" />
</div>
<div class="divDescription">
<span class="title">Tiêu đề bài viết 2</span>
<span>Mô tả bài viết 2</span>
</div>
</obshow:Panel>
<obshow:Panel>
<div class="divImage">
<img src="DuongDanAnh3" />
</div>
<div class="divDescription">
<span class="title">Tiêu đề bài viết 3</span>
<span>Mô tả bài viết 3</span>
</div>
</obshow:Panel>
<obshow:Panel>
<div class="divImage">
<img src="DuongDanAnh4" />
</div>
<div class="divDescription">
<span class="title">Tiêu đề bài viết 4</span>
<span>Mô tả bài viết 4</span>
</div>
</obshow:Panel>
<obshow:Panel>
<div class="divImage">
<img src="DuongDanAnh5" />
</div>
<div class="divDescription">
<span class="title">Tiêu đề bài viết 5</span>
<span>Mô tả bài viết 5</span>
</div>
</obshow:Panel>
</Panels>
</obshow:Show>
</div>

Trong đoạn code trên bạn chú ý:

+ StyleFolder="Common/style5/": Bạn cần có style5 (Download ở cuối bài) là một Style đã được thiết kế dành cho Show. Bạn có thể thay đổi các thuộc tính này hoặc nếu bạn cần để lại yêu cầu trên diễn đàn tôi sẽ gửi cho bạn mấy Style mẫu khác
+ Bạn cần thay đổi các đường dẫn đến các ảnh và nội dung cũng như diễn giải cho các bài viết của bạn.

Bạn có thể download code bài viết Tại đây (Các thư viện cần thiết khác bạn download ở bài viết trước ( tạo Shopping Cart show sản phẩm - asp.net. ))

 

 Hướng dẫn lấy dữ liệu từ database