النتائج 1 إلى 4 من 4

الموضوع: درس دمج قوائم جافا مع php

  1. #1
    عضو نشيط جدا
    تاريخ التسجيل
    Feb 2003
    المشاركات
    572

    درس دمج قوائم جافا مع php



    مرحبا..
    تعرفون طبعا القوائم الي تفتح منها وائم فرعيه بمجرد مرور الماوس عليها صح؟
    شوفوا الصوره بالمرفقات
    اليوم يأقول لكم كيف ندمجها مع ال بي اتش بي
    بمعنى انه لو لديك جدول اقسام وجدول اقسام فرعيه لكل قسم ستستطيع عملها بهذه القائمه
    طبعا فائدتها انها توفر عليك الصفحات والباندويث .. افضل من انك تضغط على القسم وبعدها تذهب لثفحه اخرى فيها الاقسام الفرعيه والخ..
    المهم الان خلوني اعطيكم الكود العادي (بدون بي اتش بي) لهذه القائمه الي بتشوفونها في المرفقات..

    ملاحظه: القائمه معموله على اساس css

    هذا الكود يوضع في الراس بين وسمي ال head

    كود:
    <style type="text/css">
    
    #csstopmenu, #csstopmenu ul{
    padding: 0;
    margin: 0;
    list-style: none;
    }
    
    #csstopmenu li{
    float: left;
    position: relative;
    }
    
    #csstopmenu a{
    text-decoration: none;
    }
    
    .mainitems{
    border: 1px solid black;
    border-left-width: 0;
    background-color: #D8FE89;
    }
    
    .headerlinks a{
    margin: auto 8px;
    font-weight: bold;
    color: black;
    }
    
    .submenus{
    display: none;
    width: 10em;
    position: absolute;
    top: 1.2em;
    left: 0;
    background-color: #EEFFCC;
    border: 1px solid black;
    }
    
    .submenus li{
    width: 100%;
    }
    
    .submenus li a{
    display: block;
    width: 100%;
    text-indent: 3px;
    }
    
    html>body .submenus li a{ /* non IE browsers */
    width: auto;
    }
    
    .submenus li a:hover{
    background-color: yellow;
    color: black;
    }
    
    #csstopmenu li>ul {/* non IE browsers */
    top: auto;
    left: auto;
    }
    
    #csstopmenu li:hover ul, li.over ul {
    display: block;
    }
    
    html>body #clearmenu{ /* non IE browsers */
    height: 3px;
    }
    
    </style>
    
    <script type="text/javascript">
    
    startMenu = function() {
    if (document.all&&document.getElementById) {
    cssmenu = document.getElementById("csstopmenu");
    for (i=0; i<cssmenu.childNodes.length; i++) {
    node = cssmenu.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
    }
    node.onmouseout=function(){                  
    this.className=this.className.replace(" over", "")
    }
    }
    }
    }
    }
    
    if (window.attachEvent)
    window.attachEvent("onload", startMenu)
    else
    window.onload=startMenu;
    
    </script>
    طبعا من خلال ال css تستطيع التحكم بالالوان والخطوط والقائمه والقائمه الفرعيه .. جرب غير الاعدادات خصوصا عرص القائمه الفرعيه ومقدار الازاحه واوصل للسكل الي تريده.

    وهذا كود القائمه:

    كود:
    
    <ul id="csstopmenu">
    
    <li class="mainitems" style="border-left-width: 1px">
    <div class="headerlinks"><a href="http://swalif.net">العنوان الرئيسي الاول</a></div>
    <ul class="submenus">
    <li><a href="رابط">فرعي اول</a></li>
    <li><a href="رابط">فرعييييييي</a></li>
    <li><a href="رابط">فرعي فرعي فرعي</a></li>
    <li><a href="رابط">فرعييي</a></li>
    </ul>
    </li>
    
    <li class="mainitems">
    <div class="headerlinks"><a href="http://swalif.net">الرئيسي الثاني</a></div>
    <ul class="submenus" style="width: 14em">
    <li><a href="رابط">فرعي.</a></li>
    <li><a href="رابط">فرعي</a></li>
    <li><a href="رابط">فرعي</a></li>
    </ul>
    </li>
    
    <li class="mainitems">
    <div class="headerlinks">الرئيسي الثالث</div>
    <ul class="submenus">
    <li><a href="رابط">فرعي</a></li>
    <li><a href="رابط">فرعي</a></li>
    <li><a href="رابط">فرعي</a></li>
    <li><a href="رابط">فرعي</a></li>
    </ul>
    </li>
    
    </ul>
    طبعا القائمه واضحه وسهلة الفهم.. لاحظ ان العنوان الرئيسي الثالث لم اضع له رابط .. اي انه لا يوصلك لشئ اذا ضغطت عليه .. فقط اذا مررت الماوس عليه ستفتح لك القائمه التي تحته.
    في الرد القادم سنستخرج القائمه من قاعدة البيانات
    تحياتي





    الصور المرفقة الصور المرفقة  
    __________________
    لا اله الا انت سبحانك اني كنت من الظالمين


  2. #2
    عضو نشيط جدا
    تاريخ التسجيل
    Feb 2003
    المشاركات
    572


    الان كيف تكون القائمه مستخرجه من قاعدة البيانات
    لن اعود واكتب الكود الذي نضعه في ال head .. لانه عمله واضح ولن يتغير عليه شئ.
    سنعمل على القائمه

    الان لو لاحظتم فأن العنوان الرئيسي يكون ul وتحته نكتب العناوين الفرعيه li li li
    اذا
    سنعمل تكرار يستخرج العاوين الرئيسيه من قاعدة البيانات..
    وبداخل هذا التكرار.. اكرر بداخل هذا التكرار نعمل تكرار يستخرج الفرعيه

    وبذلك نكون مع كل عنوان رئيسي نكتب تحته الفرعيان الخاصه به

    لاحظ الكود: (طبعا بعد الاتصال بقاعدة البيانات وما الى ذلك):

    كود:
    print "<ul id=\"csstopmenu\">";
    $result1=mysql_query("select * from cats order by ord");
    while ($row1=mysql_fetch_assoc($result1)){
     $catname1=$row1['catname'];
     $catid1=$row1['id'];
      print "<li class=\"mainitems\" style=\"border-left-width: 1px\">";
      print "<div class=\"headerlinks\">$catname1</div>";
      
      ///////////////////////////////////////////////////////////////////////
      print "<ul class=\"submenus\">";
           $result2=mysql_query("select * from topics where cat_id=$catid1 order by id");
           while ($row2=mysql_fetch_assoc($result2)){
                  $topictitle1=$row2['title'];
                  print "<li><a href=\"http://yahoo.com/\">$topictitle1</a></li>";
           }
            print "</ul>";
      ///////////////////////////////////////////////////////////////////////
    
      print "</li>";
    
    }
    print "</ul>";
    اوكي..
    قبل كل شئ فتحنا الوسم الرئيسي لل ul وبعدا جاء التكرار الذي يستخرج العناوين الرئيسيه من جدول cats .. وطباعة كل عنوان كما ترون داخل وسم ال li وقبل ان نغلق وسم ال li ونغلق التكرار .. قبل ذلك يجب ان نعمل تكرار اخر لنستخرج العناوين الفرعيه .. اذا نعمل تكرا اخر كما تشاهدون بالكود .. استخراج البيانات من جدول topics التي تتبع للكود الفرعي.. طبعا على فرض ان هذا مفهوم وواضح لانه اصلا مش موضوعنا.
    ونضع الناتج بين وسمي li
    ثم نغلق هذا التكرار لاننا انتهينا منه ونغلق وسم ال ul الذي فتتحناه قبل التكرار ثم نغلق ال li الذي فتحناه في التكرار الاول ثم نغلق التكرار الاول ثم نغلق ال ul الرئيسي الذي فتحناه في البدايه.
    وهذا هو
    والتنسيق باقي عليكم!!





    __________________
    لا اله الا انت سبحانك اني كنت من الظالمين

  3. #3
    عضو فعال
    تاريخ التسجيل
    Aug 2004
    المشاركات
    1,327


    تسلم يا غالى بارك الله فيك





    __________________
    اقم صلاتك قبل مماتك اقم صلاتك تنعم بحياتك
    صلى قبل ان يصلى عليك - لا حول ولا قوه الا بالله
    فزلكة وحداقه | خدمات الشبكات والانترنت | طريق الاستضافه

  4. #4


    الله يعطيك العافية

    درس راااائع وجزاك الله الف خير










ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

أضف موقعك هنا| اخبار السيارات | حراج | شقق للايجار في الكويت | بيوت للبيع في الكويت | دليل الكويت العقاري | مقروء | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض