hmweb- 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. hmweb, asp.net, Hiệu ứng, Play, Pause, Show, Dữ liệu, SQL server, obout_Show_Net,
Đây là minh họa cho kết quả sau khi bạn thực hiện bài viết này.
Để làm được bạn cần có thư viện obout_Show_Net.dll. Bạn có thể download Tại 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. ))
Bạn thực hiện để hiểu cách làm. Trong bài sau tôi sẽ hướng dẫn bạn lấy dữ liệu từ cơ sở dữ liệu. Bạn có thể thảo luận tại diễn đàn playpauseshow
Chúc bạn thành công
