كود تبويبات الاقسام

ممكن تعديل كود تبويبات الاقسام الموجود هنآ وجعله خاص بالنسخة awesome bb ؟

اهلا
تم التعديل

الكود:

$(function() {
  // تحديد إصدار المنتدى بناءً على وجود العناصر
  var version = $('#index')[0] ? 1 : 'badapple';

  if (version == 'badapple') {
    if (window.console && console.warn) console.warn('الملحق "fa_tabs" غير مدعوم لإصدار المنتدى الخاص بك.');
    return;
  }

  window.fa_tabs = {
    active: my_getcookie('fa_tab_active') || 0,
    list: [],
    version: version,

    lang: {
      title: 'اختر فئة',
      placeholder: 'فئة',
      all: 'الكل'
    },

    select: {
      content: '#board_index', // استخدام محتوى المنتدى
      category: '.forum' // استخدام العناصر المناسبة
    },

    change: function(index) {
      my_setcookie('fa_tab_active', index);

      // إظهار/إخفاء الفئات حسب التبويب
      for (var i = 0; i < fa_tabs.list.length; i++) {
        fa_tabs.list[i].style.display = (i === index || index === 'all') ? '' : 'none';
      }

      fa_tabs.active = index;
    },

    display: function(state) {
      for (var i = 0; i < fa_tabs.list.length; i++) {
        fa_tabs.list[i].style.display = state;
      }
    }
  };

  // بدء الإعدادات
  var frag = document.createDocumentFragment(),
      container = $('<div id="fa_category_tabs"><h2 id="fa_tabs_title">' + fa_tabs.lang.title + '</h2></div>')[0],
      tablist = $('<div id="fa_tablist"><div class="inner_tabs"><div></div></div></div>')[0],
      catglist = $('<div id="fa_catglist" />')[0],
      a = $(fa_tabs.select.category), // تحديد الفئات
      i = 0,
      j = a.length,
      htmlStr = '<a href="javascript:fa_tabs.change(\'all\');">' + fa_tabs.lang.all + '</a>';

  // حلقة لإنشاء التبويبات
  for (; i < j; i++) {
    htmlStr += '<a href="javascript:fa_tabs.change(' + i + ');">' + ($(a[i]).find('.forum-header .category-title h2').text() || fa_tabs.lang.placeholder + ' ' + i) + '</a>';
    catglist.appendChild(a[i]); // إضافة الفئة إلى القائمة
    a[i].style.display = 'none'; // بدء إخفاء الفئات
    fa_tabs.list[i] = a[i]; // تخزين الفئة
  }

  if (fa_tabs.list[0]) {
    tablist.firstChild.firstChild.innerHTML = htmlStr; // تعبئة قائمة التبويبات
    fa_tabs.change(fa_tabs.active); // إعداد التبويب النشط

    // إضافة العنصر بعد .action-bar-top
    $('.action-bar-top').after(container);
    container.appendChild(tablist);
    container.appendChild(catglist);
  }
});

// إضافة الأسلوب
$('head').append('<style type="text/css">#fa_tabs_title{color:#333;font-size:24px;font-weight:400;font-family:arial,sans-serif;margin:3px;line-height:24px}.inner_tabs a{font-family:arial,sans-serif;height:30px;line-height:30px;display:inline-block;color:#333 !important;background:#DDD;border:1px solid #CCC;border-bottom:none;border-radius:3px 3px 0 0;text-decoration:none!important;font-size:12px;font-weight:700;padding:0 10px;margin:3px 3px 0}.inner_tabs a:hover{background:#EEE;}</style>');

كونان2000 كتب:اهلا
تم التعديل

الكود:

$(function() {
  // تحديد إصدار المنتدى بناءً على وجود العناصر
  var version = $('#index')[0] ? 1 : 'badapple';

  if (version == 'badapple') {
    if (window.console && console.warn) console.warn('الملحق "fa_tabs" غير مدعوم لإصدار المنتدى الخاص بك.');
    return;
  }

  window.fa_tabs = {
    active: my_getcookie('fa_tab_active') || 0,
    list: [],
    version: version,

    lang: {
      title: 'اختر فئة',
      placeholder: 'فئة',
      all: 'الكل'
    },

    select: {
      content: '#board_index', // استخدام محتوى المنتدى
      category: '.forum' // استخدام العناصر المناسبة
    },

    change: function(index) {
      my_setcookie('fa_tab_active', index);

      // إظهار/إخفاء الفئات حسب التبويب
      for (var i = 0; i < fa_tabs.list.length; i++) {
        fa_tabs.list[i].style.display = (i === index || index === 'all') ? '' : 'none';
      }

      fa_tabs.active = index;
    },

    display: function(state) {
      for (var i = 0; i < fa_tabs.list.length; i++) {
        fa_tabs.list[i].style.display = state;
      }
    }
  };

  // بدء الإعدادات
  var frag = document.createDocumentFragment(),
      container = $('<div id="fa_category_tabs"><h2 id="fa_tabs_title">' + fa_tabs.lang.title + '</h2></div>')[0],
      tablist = $('<div id="fa_tablist"><div class="inner_tabs"><div></div></div></div>')[0],
      catglist = $('<div id="fa_catglist" />')[0],
      a = $(fa_tabs.select.category), // تحديد الفئات
      i = 0,
      j = a.length,
      htmlStr = '<a href="javascript:fa_tabs.change(\'all\');">' + fa_tabs.lang.all + '</a>';

  // حلقة لإنشاء التبويبات
  for (; i < j; i++) {
    htmlStr += '<a href="javascript:fa_tabs.change(' + i + ');">' + ($(a[i]).find('.forum-header .category-title h2').text() || fa_tabs.lang.placeholder + ' ' + i) + '</a>';
    catglist.appendChild(a[i]); // إضافة الفئة إلى القائمة
    a[i].style.display = 'none'; // بدء إخفاء الفئات
    fa_tabs.list[i] = a[i]; // تخزين الفئة
  }

  if (fa_tabs.list[0]) {
    tablist.firstChild.firstChild.innerHTML = htmlStr; // تعبئة قائمة التبويبات
    fa_tabs.change(fa_tabs.active); // إعداد التبويب النشط

    // إضافة العنصر بعد .action-bar-top
    $('.action-bar-top').after(container);
    container.appendChild(tablist);
    container.appendChild(catglist);
  }
});

// إضافة الأسلوب
$('head').append('<style type="text/css">#fa_tabs_title{color:#333;font-size:24px;font-weight:400;font-family:arial,sans-serif;margin:3px;line-height:24px}.inner_tabs a{font-family:arial,sans-serif;height:30px;line-height:30px;display:inline-block;color:#333 !important;background:#DDD;border:1px solid #CCC;border-bottom:none;border-radius:3px 3px 0 0;text-decoration:none!important;font-size:12px;font-weight:700;padding:0 10px;margin:3px 3px 0}.inner_tabs a:hover{background:#EEE;}</style>');

انا معدل قالب التومبيلات اخوي كونان الكود لم يعمل معي ارسلته لك في موضوع قسمي المفضل ممكن تعدله وتضيف الكودين ع بعض وتضيف ايضا مكان الصور الاخيرة وشكرا جزيلاً لك

اهلا اخي المبدع
تصميم الفئات لمنتداك غير ملائم لكود قسمي المفضل ولا لكود تبويبات الاقسام
وحتى لو يعمل لن يكون معروف بسبب طريقة التصميم المستخدمة بمنتداك

ولهذا لا انصحك بتركيب كود قسمي المفضل ولا كود تبويبات الاقسام

كونان2000 كتب:اهلا اخي المبدع
تصميم الفئات لمنتداك غير ملائم لكود قسمي المفضل ولا لكود تبويبات الاقسام
وحتى لو يعمل لن يكون معروف بسبب طريقة التصميم المستخدمة بمنتداك

ولهذا لا انصحك بتركيب كود قسمي المفضل ولا كود تبويبات الاقسام

اهلا اخي كونان ماذا تقصد ب لن يكون معروف ؟
هل يمكنك التعديل على كود الفئات لتتلائم مع كود قسمي المفضل وكود تبويبات الاقسام اخي كونان ؟
لتكون الاقسام شبيهة بهذا المنتدى مثلاً هنآ

المبدع الخبير كتب:

كونان2000 كتب:اهلا اخي المبدع
تصميم الفئات لمنتداك غير ملائم لكود قسمي المفضل ولا لكود تبويبات الاقسام
وحتى لو يعمل لن يكون معروف بسبب طريقة التصميم المستخدمة بمنتداك

ولهذا لا انصحك بتركيب كود قسمي المفضل ولا كود تبويبات الاقسام

اهلا اخي كونان ماذا تقصد ب لن يكون معروف ؟
هل يمكنك التعديل على كود الفئات لتتلائم مع كود قسمي المفضل وكود تبويبات الاقسام اخي كونان ؟
لتكون الاقسام شبيهة بهذا المنتدى مثلاً هنآ

اهلا
هذا التصميم موجود عند الاخ Mahmoud Gilany
يمكنك مراسلته
وهو يدليك على مصدر الاكود الخاص بالفئات
+
كان قصدي انه غير ملامئم بسبب انه فوضوي بعض الشيء

ولهذا لم انصحك بتركيب كود قسمي المفضل عليه

كونان2000 كتب:

المبدع الخبير كتب:

كونان2000 كتب:اهلا اخي المبدع
تصميم الفئات لمنتداك غير ملائم لكود قسمي المفضل ولا لكود تبويبات الاقسام
وحتى لو يعمل لن يكون معروف بسبب طريقة التصميم المستخدمة بمنتداك

ولهذا لا انصحك بتركيب كود قسمي المفضل ولا كود تبويبات الاقسام

اهلا اخي كونان ماذا تقصد ب لن يكون معروف ؟
هل يمكنك التعديل على كود الفئات لتتلائم مع كود قسمي المفضل وكود تبويبات الاقسام اخي كونان ؟
لتكون الاقسام شبيهة بهذا المنتدى مثلاً هنآ

اهلا
هذا التصميم موجود عند الاخ Mahmoud Gilany
يمكنك مراسلته
وهو يدليك على مصدر الاكود الخاص بالفئات
+
كان قصدي انه غير ملامئم بسبب انه فوضوي بعض الشيء  

ولهذا لم انصحك بتركيب كود قسمي المفضل عليه

هل يمكنك التعديل عليه اخوي كونان وترتيبه ليصبح بشكل افضل واكثر ملائمة للكودين ؟

المبدع الخبير كتب:
هل يمكنك التعديل عليه اخوي كونان وترتيبه ليصبح بشكل افضل واكثر ملائمة للكودين ؟

نعم ممكن ان شاء الله
لكن بالاول عليك ان تضع تصميم فئات لمنتداك وتستقر عليه وليس قالب قيد التطوير

ثم ضع قالب الفئات هنا للتعديل عليه

كونان2000 كتب:

المبدع الخبير كتب:
هل يمكنك التعديل عليه اخوي كونان وترتيبه ليصبح بشكل افضل واكثر ملائمة للكودين ؟

نعم ممكن ان شاء الله
لكن بالاول عليك ان تضع تصميم فئات لمنتداك وتستقر عليه وليس قالب قيد التطوير

ثم ضع قالب الفئات هنا للتعديل عليه

نعم هذا مستقر لكن اريد اضافة اسم الفئات فوق كل فئة لانها لاتظهر وايضا صورة العضو صاحب اخر مساهمة مع اسمه ممكن تضيفهم اخي كونان ؟ وتجعله ملائم للجوال ايضا ^_^
هذا هو القالب

الكود:

<div class="forumsContainer">
    <!-- BEGIN catrow -->
    <!-- BEGIN tablehead -->
    <div class="forumRowContainer">
        <!-- END tablehead -->
        <!-- BEGIN forumrow -->
        <div class="forumRow {catrow.forumrow.FOLDER_CLASSNAME} {catrow.forumrow.TYPE_SECTION}">

          <div class="forumRowImage"><a class="forumImg" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_DESC}</a></div>

            <div class="forumRowTitle">
              <a href="{catrow.forumrow.U_VIEWFORUM}" title="{catrow.forumrow.FORUM_NAME}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                <div class="forumRowSubForums"><i class="fas fa-comments"></i></div>
              <div class="sub_forums">{catrow.forumrow.LINKS}</div>
            </div>

            <div class="forumRowLastTopic">
              <!-- BEGIN switch_topic_title -->
                 <a href="{catrow.forumrow.U_LATEST_TOPIC}" class="forumLastTopic" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
              <!-- END switch_topic_title -->
          </div>

        </div>
        <!-- END forumrow -->
        <!-- BEGIN tablefoot -->
    </div>
    <!-- END tablefoot -->
    <!-- END catrow -->
</div>
<script type="text/javascript">
    //<![CDATA[

  $(function() { 
  var sep = '', max_by_line = 2;
  $('.s_forums').each(function() { 
    var nth = 0; 
    $('a.gensmall', this).each(function(){ 
      var next = this.nextSibling;
      if (next && next.nodeType == 3 && next.nodeValue == ", ") { 
        if (++nth % max_by_line) $(next).replaceWith(sep);
        else $(next).replaceWith('<br>');
      } 
    }); 
  }); 
});
 
$(".sub_forums").each(function() {
    var sub = $(this);
    if (!sub.is(":empty")) {
        sub.contents().filter(function() {
            return this.nodeType === 3;
        }).remove().end().filter("a").wrap("<li></li>");
  sub.wrapInner('<ul class="subLink"></ul>').prepend("");
    }
});
$(".forumRowSubForums").each(function() {
    $(this).click(function() {
        $(this).parent().toggleClass('show');
    })
});
 
$(function() {
    $(".forumRowSubForums").each(function() {
        if ( $(this).parent().find('.sub_forums').html() == "") {
            $(this).remove();
        }
    })
}); 
 
  $('.forumRowLastTopic').each(function() {
        if ($(this).find('.forumLastTopic').last().is(':empty')) {
  $(this).html('<span class="noLastTopic">لا يوجد مواضيع</span>')
        }
    });
 
    //]]>
</script>

وهذا css

الكود:

.forumRowContainer { display: flex; flex-flow: row wrap; justify-content: center; }
.forumRowImage { font-size: 0; max-width: 100%; max-height: 100px; }
.forumRowImage .forumImg img { display: block; width: 100%; max-width: 100%; float: none !important; }
.forumRowImage .forumImg img { width: 100%; height: 100px; }
.forumRowTitle { font-size: 16px; background-color: rgb(245, 245, 245); color: rgb(102, 102, 102); border-bottom: 1px solid rgb(236, 236, 236); font-weight: 500; line-height: 50px; position: relative; display: block; box-sizing: border-box; height: 50px; }
.forumRowTitle > a {text-decoration: none !important; overflow: hidden; display: block; width: 100%; text-overflow: ellipsis; white-space: nowrap; color: rgb(153, 153, 153); padding-right: 20px; display: inline-block; top: 5px; position: absolute; max-width: 80%;}
.forumLastTopic {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 80%; padding: 0;}
.forumRowSubForums { text-align: center; position: absolute; left: 20px; top: -25px; height: 50px; width: 50px; margin-right: 0; border-radius: 100%; overflow: hidden; background-color: rgb(255, 255, 255); box-shadow: 0 2px 5px rgba(0,0,0,0.25); }
.forumRowSubForums i { line-height: 50px; }
.forumRowLastTopic { background: rgb(255, 255, 255); padding: 0; border-bottom: 1px solid rgb(236, 236, 236); font-size: 13px; color: rgb(102, 102, 102); padding-right: 20px; padding-left: 20px; line-height: 50px; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; height: 50px; }
.s_forums { width: 320px; }
.s_forums a { display: inline-block; width: 260px; font-size: 13px; }
.s_forums a:before, .subLink li a:before { background: #0C82C7; border-radius: 50px; color: #FFF; content: "\f086"; display: inline-block; font-family: "Font Awesome 5 Free"; height: 20px; line-height: 20px; font-size: smaller; margin-left: 3px; text-align: center; vertical-align: middle; width: 20px; }
.forumRowTitle { cursor: pointer; }
.forumRowTitle .subLink { background-color: #FFF; border-radius: 3px; width: 230px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.22), 0 3px 1px -2px rgba(0,0,0,0.44), 0 1px 5px 0 rgba(0,0,0,0.22); color: #263238; list-style: none; opacity: 0; left: 10px; top: 35px; position: absolute; overflow: auto; transform: translate3d(0px,45px,0); visibility: hidden; z-index: 700; max-height: 270px; }
.forumRowTitle.show .subLink { opacity: 1; transform: translate3d(0px,0,0); visibility: visible; }
.subLink li a { padding: 5px; line-height: normal; display: block;font-size: smaller;}
.subLink li a:hover { background: #EEE; }
.forumRow { width: 50%; padding: 10px; }
.cat_new a.forumtitle:before, .forum_new a.forumtitle:before { content: 'جديد'; background-color: #00e702; color: #fff; padding: 3px; vertical-align: middle; border-radius: 3px; margin-left: 3px; animation: newNotif linear 500ms infinite alternate; }
.topicRow.folder_global_new, .topicRow.folder_announce_new, .topicRow.folder_sticky_new, .topicRow.folder_locked_new, .topicRow.folder_new { border-right: 5px solid #00e702; animation: newTopic linear 500ms infinite alternate; }
.topicRow.folder_locked_new {border-right: 5px solid #333;}
/* Responsive breakpoints */
@media (min-width: 1200px) {
.container { max-width: 1200px; }
}
/* Extra large devices (large desktops, 1200px and up)  */
@media (max-width: 1200px) {
  #content-container #right { display: block; }
}

/* Large devices (desktops, 992px and up)  */
@media (max-width: 992px) {

}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 800px) {
  .mobMenu { display: block; }
  #headerbar-top .wrap { align-items: flex-start; }
  .headerTop, .navbar.navmobi { display: none; }
  .navbar.navmobi.mobiMenuActive { display: flex; flex-flow: column; }
  .navbar.navmobi.mobiMenuActive li { padding: 0; margin: 0; } 
  #content-container #right { display: block; float: none; width: 100%; margin-right: 0;}
  .forumRow { width: auto;}
  #content-container #container { width: calc(100%); }
  #fa_ticker_block .module {margin: 10px;}
  .sub-header-info { margin-right: 0; }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 610px) {
dd.views, dd.lastpost { display: none !important; }
ul.topiclist dd.dterm, ul.topiclist dt, li.header dt, li.header dd.dterm { width: 90% !important; }
}
@media (max-width: 480px) {
ul.topiclist dd.dterm, ul.topiclist dt, li.header dt, li.header dd.dterm { width: 100% !important; }
  dd.posts { display: none !important; }
  .lastpost_avatar img { width: 30px; height: 30px; }
  .lastpost_avatar {width: 30px; height: 30px; }
  .topicType { font-size: 13px; position: absolute; left: 0; top: 6px; }
}


.sceditor-dropdown.sceditor-messages {
  height:200px;
  overflow-y:auto;
}
.sceditor-button-messages div {
  background-image:url('https://i.servimg.com/u/f21/18/42/96/80/edit_p10.gif') !important;
}

اعتذر تاخرت بالرد انشغلت

قبل التعديل
الفئات عندك صفين يمين ويسار
اذا تحب تكون شكل واحد ومناسب للجوال
فالافضل نخليها صف واحد

مارئيك؟

كونان2000 كتب:اعتذر تاخرت بالرد انشغلت

قبل التعديل
الفئات عندك صفين يمين ويسار
اذا تحب تكون شكل واحد ومناسب للجوال
فالافضل نخليها صف واحد

مارئيك؟

انا جربت افتح الستايل من الجوال وهو بيظهر بصف واحد فعلا على الجوال لكن على الكمبيوتر صفين وهذه اكثر ميزة عاجبتني في الكود لهذا اريد ابقاءه كما هو ^_^

هذه صورة الكود على جوالي

المبدع الخبير كتب:

كونان2000 كتب:اعتذر تاخرت بالرد انشغلت

قبل التعديل
الفئات عندك صفين يمين ويسار
اذا تحب تكون شكل واحد ومناسب للجوال
فالافضل نخليها صف واحد

مارئيك؟

انا جربت افتح الستايل من الجوال وهو بيظهر بصف واحد فعلا على الجوال لكن على الكمبيوتر صفين وهذه اكثر ميزة عاجبتني في الكود لهذا اريد ابقاءه كما هو ^_^

حتى في بعض اجهزة اللابتوب يظهر صف واحد

يعني غير ثابت
انا اقترح اننا نخليه صف واحد مثل الجوال حتتى في الكمبيوتر لانه راح يكون اسهل

كونان2000 كتب:

المبدع الخبير كتب:

كونان2000 كتب:اعتذر تاخرت بالرد انشغلت

قبل التعديل
الفئات عندك صفين يمين ويسار
اذا تحب تكون شكل واحد ومناسب للجوال
فالافضل نخليها صف واحد

مارئيك؟

انا جربت افتح الستايل من الجوال وهو بيظهر بصف واحد فعلا على الجوال لكن على الكمبيوتر صفين وهذه اكثر ميزة عاجبتني في الكود لهذا اريد ابقاءه كما هو ^_^

حتى في بعض اجهزة اللابتوب يظهر صف واحد

يعني غير ثابت
انا اقترح اننا نخليه صف واحد مثل الجوال حتتى في الكمبيوتر لانه راح يكون اسهل

امم ماشي اخوي كونان

بس في اشياء ناقصة في الكود مثلا مين قام باخر مساهمة وصورة العضو في اخر مساهمة وايضا اسم الفئة في الاعلى ياريت تضيفهم اخوي كونان ^_^

المبدع الخبير كتب:بس في اشياء ناقصة في الكود مثلا مين قام باخر مساهمة وصورة العضو في اخر مساهمة وايضا اسم الفئة في الاعلى ياريت تضيفهم اخوي كونان ^_^

حاضر ان شاء الله
وبصراح انا ماحبيت كود الصفين لانه يسبب تعارض مع كود قسمي المفضل وبعض اكود الجافا

كونان2000 كتب:

المبدع الخبير كتب:بس في اشياء ناقصة في الكود مثلا مين قام باخر مساهمة وصورة العضو في اخر مساهمة وايضا اسم الفئة في الاعلى ياريت تضيفهم اخوي كونان ^_^

حاضر ان شاء الله
وبصراح انا ماحبيت كود الصفين لانه يسبب تعارض مع كود قسمي المفضل وبعض اكود الجافا

تمام اخوي كونان انت ادرى بالاكواد ^_^

السلام عليكم اخي المبدع

هذا جافا قسمي المفضل المعدل

Spoiler:

وهذا جافا علامات التبويب للفئات المعدل

Spoiler:

وهذا قالب الفئات المعدل index_box

Spoiler:

كونان2000 كتب:السلام عليكم اخي المبدع

هذا جافا قسمي المفضل المعدل

Spoiler:

وهذا جافا علامات التبويب للفئات المعدل

Spoiler:

وهذا قالب الفئات المعدل index_box

Spoiler:

تسلم اخوي كونان على الكود الرائع
قمت بتركيب الكود فعلا هنآ لاحظت التالي :
1- عند الضغط على السهم اليمين واليسار للتنقل بين تبويبات الاقسام لاتتحرك اسماء باقي الاقسام لاراها ..
2- شكل بيانات اخر مساهمة غير متناسق

3- ممكن نخلي صورة العضو في اخر مساهمة على اليسار وتكون اكبر ؟
صورة للتوضيح

4- ممكن خلفية الفئة تتلون بألوان عشوائية او بلون العضو في اخر المساهمة ؟

اشكرك مجددا اخي كونان واعتذر على الازعاج

الايطار في نسخة الجوال مقصوص من تحت بشكل غريب ممكن تخليه اخوي كونان يظهر غير مقصوص نفس طريقة الكمبيوتر ؟

المبدع الخبير كتب:
هذه صورة الكود على جوالي

اخي كونان ممكن ترجع الاقسام الفرعية لشكلها القديم اشوف انه كان افضل؟