Thủ thuật

Cấp bậc tác giả:

DOTNET

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

Được viết bởi QuangIT ngày 10/09/2012 lúc 04:14 PM
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.
  • 0
  • 9126

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.


(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

Nguồn bài viết: Dngaz.com

Bài viết tương tự

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML

Xem tất cả

Học Hệ thống Mạng

Xem tất cả
Đối tác:            

Thiết kế bởi DOTNET GROUP.  Hoàn thành giai đoạn I

©2023 DOTNET GROUP. All contents are copyright of their authors.