Latest web development tutorials

مسج واجهة المستخدم سبيل المثال - القائمة (القائمة)

التفاعل مع الماوس ولوحة المفاتيح يمكن استخدامها للتنقل في سمات القائمة.

لمزيد من التفاصيل حول مكونات القائمة، راجع وثائق API مكونات القائمة (قائمة القطعة) .

وظيفة الافتراضي

مع تكوين افتراضي، تعطيل إدخالات القائمة والقائمة متداخلة. وهو يتألف من قائمة من الموضوعات المحولة وأضاف ويدعم الماوس ولوحة المفاتيح التفاعل. حاول استخدام مفاتيح المؤشر للتنقل في القائمة. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة القائمة (القائمة) - وظيفة الافتراضي </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#menu") .menu ()؛
  })؛
  </ script>
  <نمط>
  .ui-القائمة {العرض: 150px؛}
  </ النمط>
</ رئيس>
<body>
 
<UL معرف = "القائمة">
  <الدرجة لي = "واجهة المستخدم للدولة المعوقين"> <a href="#"> أبردين </A> </ لى>
  <لي> <a href="#"> ادا </A> </ لى>
  <لي> <a href="#"> آدامزفيل </A> </ لى>
  <لي> <a href="#"> أديستون </A> </ لى>
  <لي>
    <a href="#"> دلفي </A>
    <UL>
      <الدرجة لي = "واجهة المستخدم للدولة المعوقين"> <a href="#"> ادا </A> </ لى>
      <لي> <a href="#"> سارلاند </A> </ لى>
      <لي> <a href="#"> سالزبورغ </A> </ لى>
    </ UL>
  </ لى>
  <لي> <a href="#"> سارلاند </A> </ لى>
  <لي>
    <a href="#"> سالزبورغ </A>
    <UL>
      <لي>
        <a href="#"> دلفي </A>
        <UL>
          <لي> <a href="#"> ادا </A> </ لى>
          <لي> <a href="#"> سارلاند </A> </ لى>
          <لي> <a href="#"> سالزبورغ </A> </ لى>
        </ UL>
      </ لى>
      <لي>
        <a href="#"> دلفي </A>
        <UL>
          <لي> <a href="#"> ادا </A> </ لى>
          <لي> <a href="#"> سارلاند </A> </ لى>
          <لي> <a href="#"> سالزبورغ </A> </ لى>
        </ UL>
      </ لى>
      <لي> <a href="#"> جثم </A> </ لى>
    </ UL>
  </ لى>
  <الدرجة لي = "واجهة المستخدم للدولة المعوقين"> <a href="#"> أميسفيل </A> </ لى>
</ UL>
 
 
</ الجسم>
</ HTML>

رمز

القائمة مع تكوين افتراضي يوضح كيفية استخدام القوائم مع الرموز. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> القائمة مسج واجهة المستخدم (القائمة) - رمز </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#menu") .menu ()؛
  })؛
  </ script>
  <نمط>
  .ui-القائمة {العرض: 150px؛}
  </ النمط>
</ رئيس>
<body>
 
<UL معرف = "القائمة">
  <لي> <a href="#"> <تمتد الطبقة = "واجهة المستخدم، واجهة المستخدم رمز أيقونة القرص"> </ SPAN> حفظ </A> </ لى>
  <لي> <a href="#"> <تمتد الطبقة = "واجهة المستخدم، واجهة المستخدم رمز-رمز-zoomin"> </ SPAN> تكبير </A> </ لى>
  <لي> <a href="#"> <تمتد الطبقة = "واجهة المستخدم، واجهة المستخدم رمز-رمز-تم التصغير"> </ SPAN> صقل </A> </ لى>
  <الدرجة لي = "واجهة المستخدم للدولة المعوقين"> <a href="#"> <تمتد الطبقة = "واجهة المستخدم، واجهة المستخدم رمز أيقونة الطباعة"> </ SPAN> طباعة ... </A> </ لى >
  <لي>
    <a href="#"> لعب </A>
    <UL>
      <لي> <a href="#"> <تمتد الطبقة = "واجهة المستخدم، واجهة المستخدم رمز أيقونة الفأر بدء"> </ SPAN> على </A> </ لى>
      <لي> <a href="#"> <تمتد الطبقة = "واجهة المستخدم، واجهة المستخدم رمز أيقونة توقف"> </ SPAN> كفوا عن </A> </ لى>
      <لي> <a href="#"> <تمتد الطبقة = "واجهة المستخدم، واجهة المستخدم رمز-رمز-مسرحية"> </ SPAN> اللعب </A> </ لى>
      <لي> <a href="#"> <تمتد الطبقة = "واجهة المستخدم، واجهة المستخدم رمز أيقونة الفأر نهاية"> </ SPAN> </A> المقبل </ لى>
    </ UL>
  </ لى>
</ UL>
 
 
</ الجسم>
</ HTML>