كيفاش تصاوب قائمة تسجل فيها أعمالك اليومية ب jquery


فهاد الدرس الجديد غادي نقادو واحد المشروع بسيط للمبتدئين ف jquery عبارة عن قائمة ديال notes لي كنسجلها ومنبعد مكان نقوم بها كنمسحها المشروع سهل للمبتدئين فjquery.

نظرة سريعة بالفيديو

- الملفات الأساسية

غادي تمشي لwamp و منبعد تمشي للمجلد www وتزيد مجلد جديد تسميه ToDoList من بعد غادي تزيد فيه 3 ديال المجلدات css و js و fonts منبعد غادي تقوم بتحميل bootstrap وغادي تزيد الملف bootstrap.css ف css وتزيد ملف تسميه script.js ف js من بعد غادي تقوم بتحميل jquery وغادي تزيد الملف jquery.min.js ف js منبعد غادي تقوم بتحميل fontawsome وغادي تزيد الملف fontawsome.css ف css والملفات لي fonts فالمجلد fonts لي زدنا من بعد غادي تزيد ملف تسميه header.php فالمجلد الرئيسي الكود ديالو هو :

                                <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Notes</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/fontawsome.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="assets/js/jquery-3.1.1.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Notes App</a>
    </div>
  </div><!-- /.container-fluid -->
</nav>
                            

- الملف index.php

غادي تمشي لwamp و منبعد تمشي للمجلد www غادي تزيد ملف جديد تسميه index.php هو الصفحة الرئيسية لي غادي يكون فيها الكود لي غادي يمكن من عرض القائمة لي سجلنا ولي غادي تكون فيها إمكانية إضافة ومسح ملاحظة الكود ديال الملف هو :

                                <?php include('header.php');?>
<div class="container" id="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading" id="heading"><h4 class="pull-left">Notes</h4><h4 class="pull-right"><i class="fa fa-plus" id="add"></i></h4></div>
                <ul class="list-group">
                    <li class="list-group-item"><input type="text" placeholder="Ajouter une note"></li>
                    <li class="list-group-item"><span><i class="fa fa-trash"></i></span>Lorem ipsum dolor sit amet</li>
                    <li class="list-group-item"><span><i class="fa fa-trash"></i></span>Lorem ipsum dolor sit amet</li>
                    <li class="list-group-item"><span><i class="fa fa-trash"></i></span>Lorem ipsum dolor sit amet</li>
                    <li class="list-group-item"><span><i class="fa fa-trash"></i></span>Lorem ipsum dolor sit amet</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script src="assets/js/script.js"></script>
</body>
</html>
                            

- الملف style.css

فالمجلد css غادي نزيد ملف نسميه style.css لي غادي يكون فيه الكود لي غادي يحسن المظهر ديال الصفحة الرئيسية ديالنا الكود ديالوهو :

                                body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#container{
    border: 20px olid gray;
    width:360px;
    margin: 50px auto; 
}
.completed{
    color:gray;
    text-decoration:line-through;
}
#heading{
    height:50px;
}
input{
    font-size:18px;
    background-color:#f7f7f7;
    color:#2980b9;
    width:100%;
    padding:13px 13px 13px 13px;
    box-sizing: border-box;
    border:none;
}
li:nth-child(2n){
    background-color:#f7f7f7;
}
span{
    background: #e74c3c;
    height:40px;
    width:0px;
    color:white;
    margin-right: 20px;
    text-align: center;
    display: inline-block;
    padding: 10px;
    opacity: 0;
    transition: 0.2s linear;
}
li:hover span{
    cursor: pointer;
    opacity: 1.0;
    width:40px;
}
#add{
    cursor: pointer;
}
                            

- الملف script.js

هادا هو الملف لي فيه الكود الرئيسي ديالنا فكاين أولا الكود لي كيجعل المستخدم ملي كيكليكي على li لي هو كل ملاحظة فالقائمة كتزادها واحد ل class completed لي هي الخط بمعنى أنها تدارت ثم كاين الكود لي كيمكن من بعد مكيكليكي على لicone ديال مسح كتمسح ملاحظة من القائمة ثم كاين الكود لي كيزيد ملاحظة زادها المستخدم ثم الكود لي كيمكن من إخفاء ولا إظهار الحقل منبعد مكيظغط المستخدم على + الكود ديال الملف هو :

                                    $(document).ready(function(){
    //add and remove completed class on li click
    $('ul').on('click','li',function(){
        $(this).toggleClass("completed");
    });
    //remove note on span x click
    $('ul').on('click','span',function(event){
        $(this).parent().fadeOut(500,function(){
            $(this).remove();
        });
        event.stopPropagation();
    });
    //get text value on enter click and add it to ul
    $('input[type="text"]').keypress(function(event){
        if(event.which === 13){
            var note = $(this).val();
            $(this).val("");
            $('ul').append('<li class="list-group-item"><span><i class="fa fa-trash"></i></span>'+note+'</li>');
        }
    });
    //button + code
    $('#add').on('click',function(event){
        $('input[type="text"]').fadeToggle();
    });
});
                                


بحث في الموقع


إشترك للتوصل بالجديد