JEFFRY'S BLOG

       Ini saat saya terinspirasi dari teman saya yang sedang search di google tentang java script.... tyus pada waktu itu saya liad ada tutorial jQuary eh tiba-tiba terbenak dipikiran saya untuk mempelajarinya, dan setelah saya coba-coba dari berbagai contoh saya terinspirasi lagi untuk memasangnya dicimande.

        Setelah saya coba pasang diproject saya yang menggunakan cimande, ternyata bisa. Dan saya akan berbagi ilmu tentang cara memasang jQuary dicimande, Berikut langkah-langkahnya:

1. Pertama sebelum anda memasukan script pada kode html pertama anda harus mendownload plugin dari jQuery, anda bisa mendownload lewat dengan click disini

2. Setelah itu jalankan eclip.

3. untuk kali ini saya menggunakan cimande versi 1.35-sdk. Kemudian masuk ke direktori Cimande-WebContent

4. Buat folder dengan nama jQuery.

5. Masukan Plugin yang baru anda download ke dalam direktory jQuery.

 * Ini view plugin jQuery.

 

6. Masuk ke eclip, refresh pada cimade. Ini bertujuan supaya direktory dapat di baca oleh eclip.

 * Ini view setelah jQuery dapat dibaca oleh eclip dan sudah ada dalam project cimande-WebContent.

 7. Kemudian Buka script velocity. Berikut adalah cotoh velocity dari project saya:

<link rel="stylesheet" type="text/css" href="../../style.css">
<script type="text/javascript" src="../../jQuery/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
 
<style type="text/css">
tr.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
<style type="text/css">
tr.cs1:hover   {
    cursor: crosshair;
    color: #7fd7cc;
    background-color:
    lightslategray;
    text-decoration: none}
</style>


<style type="text/css">
tr.cs1:hover   {
    cursor: crosshair;
    color: #7fd7cc;
    background-color:
    lightslategray;
    text-decoration: none}
</style>
        <p class="flip"><strong>Show/Hide Panel</strong></p>
<div class="panel">
<table bgcolor="#ffffff" border="0" cellpadding="3" cellspacing="1" width="100%">

<tr bgcolor="#ffffff">
    <td colspan="12">
    <hr>
        <p><strong>Product List</strong></p>
    <hr>
    </td>
</tr>
    <tr bgcolor="#e4e4e4">
        <td align="center"><strong>Code</strong></td>
        <td align="center"><strong>Name</strong></td>
        <td align="center"><strong>Description</strong></td>
        <td align="center"><strong>Document Note</strong></td>
        <td align="center"><strong>Product Category</strong></td>
        <td align="center"><strong>Classification</strong></td>
        <td align="center"><strong>UOM</strong></td>
        <td align="center"><strong>Vendor</strong></td>
                <td align="center"><strong>Action</strong></td>
    </tr>
    #foreach($i in $products)
    <tr bgcolor="#ffffff" class="cs1">
        <td align="center">$!i.code</td>
        <td align="center">$!i.name</td>
        <td align="center">$!i.description</td>
        <td align="center">$!i.documentNote</td>
        <td align="center">$!i.productCategory.name</td>
        <td align="center">$!i.classification</td>
        <td align="center">$!i.unitOfMeasure.name</td>
        <td align="center">$!i.businessPartner</td>
        <td align="center">
            <a href="edit.action?product.id=$!i.id">
                <img src="../../images/silk/page_edit.png" title="Edit" border="0"/></a>
            <a href="delete.action?product.id=$!i.id">
                <img src="../../images/silk/delete.png" title="Delete" border="0"/></a>
        </td>
    </tr>
    #end
    <tr bgcolor="#e4e4e4">
        <td colspan="10">
            #if ($currPage > 0)
            <a href="search.action?product.code=$!products.code&product.name=$!products.name&currPage=0" title="currPage">
                <img src="../../images/silk/resultset_first.png" border="0">
            </a>
            #end
            #if ($currPage > 0)
            <a href="search.action?product.code=$!products.code&product.name=$!product.name&currPage=$!prevPage" title="prevPage">
                <img src="../../images/silk/resultset_previous.png" border="0">
            </a>
            #end
            [page $!page]
            #if ($currPage < $maxPage)
            <a href="search.action?product.code=$!products.code&product.name=$!product.name&currPage=$!nextPage" title="nextPage">
                <img src="../../images/silk/resultset_next.png" border="0">
            </a>
            #end
            #if ($currPage < $maxPage)
            <a href="search.action?product.code=$!products.code&priceList.name=$!product.name&currPage=$!maxPage" title="maxPage">
                <img src="../../images/silk/resultset_last.png" border="0">
            </a>
            #end
        </td>
    </tr>
    <tr>
<td colspan="5"><input type="button" onClick="javascript:location.href='filter.action'" value="&lt;&lt; Back"></td>
</tr>
</table>
</div>

8. Dari script di atas tulisan yang di cetak tebal itu merupakan script dari jQuery.

9. untuk script <script type="text/javascript" src="../../jQuery/jquery-1.3.1.js"></script>. Ini berfungsi untuk membaca plugin jQuery yang terletak pada direktory WebContent.

10. untuk script <p class="flip">. Ini berfungsi untuk memanggil pada class pada java script dan css, yang nantinya akan memberikan efek Hide and Show. Artinya jika diclick maka class panel akan membuka dan menutup.

* Ini adalah view ketika hide

* Ini adalah view ketika show.

Mungkin blog ini kurang menarik bagi anda, tapi saya berharap dengan adanya blog ini dapat bermanfaat.