首先,接受我对冗长的代码和解释的道歉,因为我是 JQuery 的新手,而且我在这里有一个非常具体的案例。
我在我的项目的管理面板中为员工、学生和课程创建了一个仪表板。我有三个 DIV,我分别在其中提取员工记录、学生记录和课程。我使用以下代码使我的 div 可拖动和圆角:
CSS
#draggable { width: 600px;vertical-align: top; }
#draggable2 { width: 600px; }#draggable3 { width: 600px; }
#divheader {width:100%px; background-color: #C50C2F; color:#fff;font-weight: 500; border-color:#C50C2F;}
#divheader2 {width:100%px; background-color: #C50C2F; color:#fff;font-weight: 500; border-color:#C50C2F;}
#divheader3 {width: 700px; float: left; margin: 0 20px 0 0; background-color: #C50C2F; color:#fff;font-weight: 500; border-color:#C50C2F;}
JAVASCRIPT
<script>
$(function() {
$( "#draggable" ).draggable();
});
$("#draggable").corner();
$("#divheader").corner();
$(function() {
$( "#draggable2").draggable();
});
$("#draggable2").corner();
$("#divheader2").corner();
$(function() {
$("#draggable3").draggable();
});
$("#draggable3").corner();
$("#divheader3").corner();
</script>
我还为“REFRESH”和“Hide”添加了两个链接,分别刷新和隐藏 div。
从数据库中提取和显示数据的代码:
<div id="draggable" class="ui-widget-content" style="width:700px; vertical-align: top;" align="center" >
<div id="divheader">Employees<a href="#" ><img src="/images/admin/icons/minimize.png" title="Hide Employee panel" alt="Hide" height="20px;" width="20px;" align="right"> </a>
<a href="/secure/admin/" ><img src="/images/admin/icons/refresh.png" title="Refresh Employee Records" alt="Refresh" height="20px;" width="20px;" align="right"></a>
</div>
<div id="adminHeaders">
<div class="adminOverviewBlockTitle" align="left" >Name</div>
<div class="adminOverviewBlockTitle">Job Title</div>
<div class="adminOverviewBlockTitle" >Start Date</div>
<div class="adminOverviewBlockTitle" >Date Left</div>
<div class="adminOverviewBlockTitle" >Status</div>
<div class="adminOverviewCells emptyblockimg" ></div>
</div>
<script>
$( "a" ).click(function() {
$("#draggable").hide();
});
</script>
<div>
<?
if (isset($sets))
{
foreach ($sets as $key=>$pos)
{
?>
<div class="adminOverviewBlockTitle" align="left" ><?=$pos->name?></div>
<div class="adminOverviewBlockTitle" ><?=$pos->title?></div>
<div class="adminOverviewBlockTitle" ><?=$pos->date_entered?></div>
<div class="adminOverviewBlockTitle" ><?=$pos->date_left?></div>
<div class="adminOverviewBlockTitle" ><?=$pos->status?></div>
<div class="adminOverviewBlocksCells emptyblockimg" ><a href="<?=base_url()?>secure/mpt/edit/<?=$pos->id?>" ><img border="0" src="/images/admin/icons/pencil.png" alt="Edit" width="20px;" height="20px;" alt=""></a></div>
<div> </div>
<p> </p>
<?}
}
?>
</div>
</div>
其他 2 个 DIV 也是如此。
但问题是:
1)如何在每个超链接上隐藏单独的 DIV?
2)当单击“刷新”链接而不刷新整个页面或其他 DIV 时,我想将数据库中的数据提取到特定的 DIV 中?
请帮助我。我如何使用 Jquery/Ajax 和 PHP/Codeigniter 来实现这一点。