ijquery

جدول

screenshot

ایجاد جدول برای موضوعات مختلف

آموزش استفاده

  1. قبل از تگ <head/>
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    		<script src="jquery.backgroundPosition.js" type="text/javascript" charset="utf-8"></script>
    
    		<style type="text/css" media="screen">
    			tbody tr{
    				background: #fff url('bg-select.jpg') no-repeat scroll 200% 0px;
    			}
    			td{
    				border-bottom:1px solid #eee;
    				padding:10px;
    			}
    			th{
    				background-color:#333;
    				color:white;
    				padding:15px 30px 15px 10px;
    				font-weight:bold;
    			}
    			body{
    				font-family: Arial, "MS Trebuchet", sans-serif;
    				direction:rtl;
    				text-align:right;
    			}
    			table{
    				border:1px solid #bbb;
    			}
    		</style>
    
    		<script type="text/javascript" charset="utf-8">
    			$(document).ready(function() {
    				$('tbody tr')
    					.css({backgroundPosition: '200% 0px'})
    					.hover(function(){
    					$(this).animate({backgroundPosition: '(0% 0px)'},700)  
    				}, function(){
    					$(this).animate({backgroundPosition: '(200% 0px)'})  
    				});
    			});
    		</script>

     

  2. بعد از تگ <body>
    <table border="0" cellspacing="0" cellpadding="0">
    			<thead>
    				<tr>
    					<th>عنوان 1</th>
    					<th>عنوان 2</th>
    					<th>عنوان 3</th>
    					<th>عنوان 4</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr>
    					<td>اطلاعات</td>
    					<td>اطلاعات</td>
    					<td>اطلاعات</td>
    					<td>اطلاعات</td>
    				</tr>
    				<tr>
    					<td>اطلاعات</td>
    					<td>اطلاعات</td>
    					<td>اطلاعات</td>
    					<td>اطلاعات</td>
    				</tr>
    				<tr>
    					<td>اطلاعات</td>
    					<td>اطلاعات</td>
    					<td>اطلاعات</td>
    					<td>اطلاعات</td>
    				</tr>
    				<tr>
    					<td>اطلاعات</td>
    					<td>اطلاعات</td>
    					<td>اطلاعات</td>
    					<td>اطلاعات</td>
    				</tr>
    				<tr>
    					<td>اطلاعات</td>
    					<td>اطلاعات</td>
    					<td>اطلاعات</td>
    					<td>اطلاعات</td>
    				</tr>
    			</tbody>
    		</table>

     


پیش نمایش دانلود فایل پلاگین

2 دیدگاه دربارهٔ «جدول»

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *