Penulis sangat terinspirasi sekali dengan design komentar dan reply yang ada pada halaman facebook. Dengan menggunakan teknologi standar HTML, CSS dan jQuery penulis mencoba berbagi pengalaman ini dengan menulis pada halaman ini.

Membuat sebuah prototype design aplikasi website kadang-kadang membutuhkan waktu dan pikiran yang cukup banyak untuk itu. Dan bagi seorang web designer maupun web developer itu merupakan hal yang sudah biasa dan sering dilakukan sehari-hari. 


Begitu juga dengan penulis, beberapa hari yang lalu sembari mengerjakan pekerjaan kecil-kecilan, saya mencoba meluangkan waktu untuk membuat sebuah design web sederhana sosial media pada bagian komentar. 


Beberapa yang kita perlu perhatikan:
  1.  HTML struktur
  2. CSS 
  3. jQuery untuk event

Pada HTML, saya menggunakan elemen div dengan attribute contenteditable, yang memungkinkan kita untuk menulis pada sebuah halaman div. 

<div class="box-comment">
     <div class="data-alert"></div>
     <div contenteditable="true" spellcheck="false" class="text-comment"></div>
     <div class="block-action">
        <a href="#" id="click">comment</a>
     </div>
</div>

Pada bagian komentar, dan reply saya buat dengan struktur HTML yang hampir sama dengan keduanya.

<div id="all-data-comment">
    <div class="list-comment">
        <div class="data-comment">
            <div class="data-action">
                <a href="#" data-id="delete">&times;</a>
            </div>
            <div class="data-photo"></div>
            <div class="data-detil">
                <div class="data-user">Doe</div>
                <div class="data-text">Hello world!</div>
                <div class="data-time">3 menit yang lalu</div>
            </div>
            <div class="data-reply">
                <div class="all-data-reply">
                    <div class="inline-reply">
                        <div class="block-reply">
                            <div class="data-action">
                                <a href="#" data-id="delete">&times;</a>
                            </div>
                            <div class="data-photo"></div>
                            <div class="data-detil">
                                <div class="data-user">Jhone</div>
                                <div class="data-text">Hello world!</div>
                                <div class="data-time">3 menit yang lalu</div>
                            </div>
                        </div>
                    </div>
                    <div class="inline-reply">
                        <div class="block-reply">
                            <div class="data-action">
                                <a href="#" data-id="delete">&times;</a>
                            </div>
                            <div class="data-photo"></div>
                            <div class="data-detil">
                                <div class="data-user">Jhone</div>
                                <div class="data-text">Hello world!</div>
                                <div class="data-time">3 menit yang lalu</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="add-reply">
                    <div contenteditable="true" spellcheck="false" class="text-reply"></div>
                </div>
            </div>
        </div>
    </div> 
</div>

Setelah kita selesai membuat HTML kode nya, kemudian kita masuk ke CSS untuk design tampilannya

.box-comment{
    float: left;
    width: 100%;
    position: relative; 
    margin-top: 10px;
}
.box-comment .text-comment{
    min-height: 50px; 
    border: 1px solid #ccc;
    padding: 5px 1%;
    float: left;
    width: 98%;
}
.box-comment .block-action{
    display: inline-block;
    width: 100%;
    text-align: right;
} 
.box-comment .block-action a{
    display: inline-block;
    padding: 5px;
    background: #262664;
    color: #fff;
    text-decoration: none;
    margin: 5px 0 0 0;
}
.list-comment{
    display: inline-block;
    margin-top: 10px;
    width: 100%;
    position: relative;
}
.data-photo{
    display: inline-block;
    width: 10%;
    height: 50px;
    margin-top: 5px;
    border: 1px solid #ccc;
    background: #fff;
    vertical-align: top;
}
.data-detil{
    display: inline-block;
    vertical-align: top;
    width: 87%;
    padding: 0px .5%;
}
.data-user{
    font-weight: bold;
}
.data-time{
    font-size: 11px;
    color: #888;
}

.data-reply{
    float: left;
    width: 88%;
    padding: 5px;
    margin-left: 11%;
    background: #f9f9f9;
}
.inline-reply{
    border-top: 1px dotted #ccc;
} 
.inline-reply:first-of-type{
    border-top: none;
}
.add-reply{
    padding-top: 5px
}
.text-reply{ 
    width: 98.7%;
    min-height: 30px;
    background: #fff;
    padding: 1px 3px;
    border: 1px solid #ccc;
}
.data-action{
    position: absolute;
    padding: 5px;
    right: 1px;
}
.data-action a{
    visibility: hidden;
    text-decoration: none;
    color: #444;
}
.inline-reply:hover div > .data-action a, .data-comment:hover > .data-action a{
    visibility: visible;
}
.data-alert{
    padding: 5px 0;
    display: inline-block;
    text-align: center; 
    width: 100%;
    margin-bottom: 5px;
} 

Dan terakhir penambahan action even-driven onclick pada komentar dan onEnter pada reply, yang memungkin kan komentar atau reply yang kita masukan bisa langsung tampil pada halaman.


$(function() {
    function reply() {
        $('.text-reply').keydown(function(event) {
            if (event.keyCode === 13) {
                if ($(this).text().length > 0) {
                    var result = '<div class="inline-reply">' +
                            '<div class="data-action">' +
                            '<a href="#" data-id="delete">&times;</a>' +
                            '</div>' +
                            '<div class="data-photo"></div>' +
                            '<div class="data-detil">' +
                            '<div class="data-user">&nbsp;Jhone</div>' +
                            '<div class="data-text">&nbsp;' + $(this).text() + '</div>' +
                            '<div class="data-time">&nbsp;1 detik yang lalu</div>' +
                            '</div>' +
                            '</div>';
                    $(this).html('');
                    $(this).parent().parent().prepend(result);
                    remove();
                } else {
                    event.preventDefault();
                }
            }
        });
    }
    function remove() {
        $('a[data-id="delete"]').click(function() {
            $(this).parent().parent().parent().remove();
        });
    }
    reply();
    remove();
    $('#click').click(function() {
        var editor = $('.text-comment');
        if (editor.text().length > 0) {
            var result = '<div class="list-comment">' +
                    '<div class="data-comment">' +
                    '<div class="data-action">' +
                    '<a href="#" data-id="delete">&times;</a>' +
                    '</div>' +
                    '<div class="data-photo"></div>' +
                    '<div class="data-detil">' +
                    '<div class="data-user">&nbsp;Doe</div>' +
                    '<div class="data-text">&nbsp;' + editor.text() + '</div>' +
                    '<div class="data-time">&nbsp;1 detik yang lalu</div>' +
                    '</div>' +
                    '<div class="data-reply">' +
                    '<div class="add-reply">' +
                    '<div contenteditable="true" spellcheck="false" class="text-reply"></div>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>';
            editor.html(''); // set empty
            $('#all-data-comment').prepend(result);
            reply();
            remove();

        } else {
            $('.data-alert').html('Please Type Your Comment!').css({
                'color': '#cc0000',
                'border-color': '1px solid #ffcccc',
                'background': '#ffff66'
            });
            setTimeout(function() {
                $('.data-alert').html('').removeAttr('style');
            }, 1000);
        }
    });
});

Semoga bermanfaat untuk link demonya silahkan di lihat disini


 
Bagikan halaman ke sosial media
 
Tags :   css    design    jQuery       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda