3/11/2018

settings_overscan print announcement
أهلا و مرحبا إخواني ...نزولا عند طلباتكم سنحاول أن نريكم في هذا البرنامج التعليمي طريقة البحث من خلال تصفية المحتوى  أو تركيب Search filter javascript v1 .. طبعا إن لم أقل العشرات فالمئات من السكريبتات التى تمكنك من تفعيل هذه الخاصية على صفحاتك ومحتواك كما أن لكل سكريبت مميزاته وملحقاته لكن بما أننا نريد البساطة والسهولة في الواجهة والإستخدام إليكم هذا السكريبت الذي سيوفي حقه  ويمنحنا العمل المطلوب كما أنني جعلته يعمل على شكلين ... صفحة تحتوي على جدول والأخرى ذات محتوى نصي على شكل ملصقات .. فتابع معي...





المعاينة


لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML 
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب


لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية

  • قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع كود.css التالي ..

  • إستعمل أداة فك وضغط النصوص الخاصة بأكواد css لكي تستطيع التعديل عليها من هنا

    
    /*===filter-search===*/
    .light-table-filter-search{position:relative;overflow:hidden;margin:0;margin-bottom:10px;}
    /*===filter-box===*/
    .light-table-filter-search input.light-table-filter{resize:vertical;position:relative;background-color:#f1f1f1;border:none;border-bottom:3px solid #e0e0e0;outline:none;height:3.6rem;width:100%;font-size:1rem;font-weight:700;margin:0!important;padding:0!important;box-shadow:none;box-sizing:content-box;transition:all .3s;line-height:normal;color:inherit;font:inherit;text-indent:15px;}
    .light-table-filter-search:after{font:normal normal normal 14px/1 FontAwesome;}
    .light-table-filter-search:after{content:"\f002";font-size:1.5em;position:absolute;text-align:center;top:0;left:0;height:100%;width:80px;z-index:9;color:#FFFFFF;background-color:#f79029;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
    /*===table td solo===*/
    .card-title table{display:table;width:100%;border:0;margin:0;padding:0;border-collapse:collapse;border-spacing:0;}
    .card-title table td{text-align:right;font-size:15px;color:#525252;padding:10px 20px;border-style:solid;border-width:1px;border-color:#ffffff;overflow:hidden;word-break:normal;}
    /*======page tag=====*/
    .card-title table th{font-size:14px;font-weight:700;padding:10px 5px;border-style:solid;border-width:1px 1px 5px;overflow:hidden;word-break:normal;}
    .card-title table .tg-title{width:10%;background-color:#f79029;color:#ffffff;border-color:#e68625;text-align:center;}
    .card-title table .tg-baqh{text-align:center;}
    .card-title table tr.tg-tag{background-color:#fbfbfb;}
    .card-title table tr.tg-tag:nth-of-type(odd){background-color:#f1f1f1;}
    /*======page text=====*/
    .card-title table h4{text-align:center;display:block;margin:20px 0;padding:10px;font-size:17px;color:white;background:#f79029;}
    .card-title td.tg-tdoo{display:block;margin:5px;background:#f1f1f1;}
    .card-title table tr.tg-text{width:50%;float:right;width:calc(100% / 2);}
    @media screen and (max-width:600px){.card-title table tr.tg-text{width:100%;float:none;width:calc(100% / 1);}}
    /*blackberry playbook + nexus7*/
    /*=====END filter=====*/
    

    التعديل على الكود
    الكود المحدد بهذا اللون شكل صندوق البحث
    الكود المحدد بهذا اللون شكل الجدول
    الكود المحدد بهذا اللون شكل المحتوى النصي
  • قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js التالي ..

  • 
    <script type='text/javascript'>
    //<![CDATA[
    //filter
    !function(t){"use strict";var e=function(e){var a;function n(n){a=n.target;var r=t.getElementsByClassName(a.getAttribute("data-table"));e.forEach.call(r,function(t){e.forEach.call(t.tBodies,function(t){e.forEach.call(t.rows,o)})})}function o(t){var e=t.textContent.toLowerCase(),n=a.value.toLowerCase();t.style.display=-1===e.indexOf(n)?"none":"table-row"}return{init:function(){var a=t.getElementsByClassName("light-table-filter");e.forEach.call(a,function(t){t.oninput=n})}}}(Array.prototype);t.addEventListener("readystatechange",function(){"complete"===t.readyState&&e.init()})}(document);
    //]]>
    </script>  
    

    ملاحظة مهمة
    السكريبت التالي هو نفسه حذاري أن تضعهما جميعا فقط قمت بوضعه لإنه بدون ضغط أي هو الخامة الأساسية للسكريبت السابق ففي حالة وقع تعارض بينه وبين الأكواد الموجودة في قالبك قم بتركيبه بدل السكريبت المضغوط وهو كالتالي ..

    
    <script type='text/javascript'>
    //<![CDATA[
    //filter
    (function(document) {
     'use strict';
    
     var LightTableFilter = (function(Arr) {
    
      var _input;
    
      function _onInputEvent(e) {
       _input = e.target;
       var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
       Arr.forEach.call(tables, function(table) {
        Arr.forEach.call(table.tBodies, function(tbody) {
         Arr.forEach.call(tbody.rows, _filter);
        });
       });
      }
    
      function _filter(row) {
       var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
       row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
      }
    
      return {
       init: function() {
        var inputs = document.getElementsByClassName('light-table-filter');
        Arr.forEach.call(inputs, function(input) {
         input.oninput = _onInputEvent;
        });
       }
      };
     })(Array.prototype);
    
     document.addEventListener('readystatechange', function() {
      if (document.readyState === 'complete') {
       LightTableFilter.init();
      }
     });
    
    })(document);
    //]]>
    </script>  






لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأخيرة

  • أخير قم بإنشاء صفحة أو تدوينة ثم إنتقل إلى تبويب HTML ثم ضع أحد الأكواد التالية

  • إضافة فلتر بحث مع الجدول

    
    <div class="col s12 m12 l7 messages">
    <div class="light-table-filter-search">
    <input class="light-table-filter" data-table="order-table" placeholder="أدخل أية حروف دلالية للبحث عن المحتوى..." type="search" />
             </div>
    <div class="card blue-grey darken-1">
    <div class="card-content white-text">
    <span class="card-title tg-wrap">
                   <table class="order-table">
     <thead>
    <tr>
        <th class="tg-title">العلامة</th>
        <th class="tg-title">التعريف والاستخدام </th>
      </tr>
    </thead>
     <tbody>
    <tr class="tg-tag">
        <td class="tg-baqh card-panel">إسم العلامة 1</td>
        <td class="tg-lqy6">شرح العلامة 1</td>
    </tr>
    <tr class="tg-tag">
        <td class="tg-baqh card-panel">إسم العلامة 2</td>
        <td class="tg-lqy6">شرح العلامة 2</td>
    </tr>
    </tbody>
    </table>
    </span>
    </div>
    </div>
    </div> 
    

    التعديل على الكود
    غير النصوص الخاصة بالجدول بما يتناسب مع محتواك تغير فقط النصوص المحددة بهذا اللون
    الكود المحدد بهذا اللون تستطيع أن تقول خانة واحدة للجدول قم بتكرارها للحصول على المزيد.

    إضافة فلتر بحث مع محتوى نصي


    
    <div class="col s12 m12 l7 messages">
    <div class="light-table-filter-search">
    <input class="light-table-filter" data-table="order-table" placeholder="أدخل أية حروف دلالية للبحث عن المحتوى..." type="search" />
             </div>
    <div class="card blue-grey darken-1">
    <div class="card-content white-text">
    <span class="card-title">
                   <table class="order-table">
    <tbody>
    <tr class="tg-text">
    <td class="tg-tdoo card-panel"><h4>
    عنوان 1
    </h4>
    هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة رقم 1
    </td>
    </tr>
    <tr class="tg-text">
    <td class="tg-tdoo card-panel"><h4>
    عنوان 2
    </h4>
    هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة رقم 2
    </td>
    </tr>
    </tbody>
    </table>
    </span>
    </div>
    </div>
    </div> 
    

    التعديل على الكود
    غير النصوص الخاصة بالمحتوى  طبعا تغير فقط النصوص المحددة بهذا اللون
    نفس العملية الكود المحدد بهذا اللون قم بتكراره للحصول على المزيد من الشرائح.
    ملاحظة مهمة
    لقد لا حظت في المعاينة الخاصة بالنصوص أن هناك إطارين للمحتوى في السطر الواحد أي كل إثنين بجانب بعض إذا أردت أن تجعل كل شريحة نص تأخذ كامل العرض ثم تأتي الثانية بعدها وهكذا على التوالي .. فقط قم بالبحث عن .card-title table tr.tg-text الموجود في أكواد Css وإستبدل الستايل الخاص به بالكود التالي ..

    
    .card-title table tr.tg-text {
        width: 100%;
        float: none;
        width: calc(100% / 1);
    }