مسج واجهة المستخدم سبيل المثال - للطي لوحة (الأكورديون)

السابق: مسج واجهة المستخدم سبيل المثال - الفرز (قابل للفرز)

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

ضمن عرض مساحة محدودة لتقديم محتوى المعلومات وحة قابلة للطي.

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

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

انقر على رأسه لتوسيع / ينقسم محتوى انهيار في أجزاء مختلفة من المنطق، مثل علامات التبويب (علامات) نفسه. يمكنك بشكل اختياري إعداد عند مرور الماوس سواء للتبديل إلى فتح أجزاء مختلفة من / إيقاف حالة جرا.

علامات HTML الأساسية هي سلسلة من عنوان (العلامات H3) و div المحتوى، لذلك يمكن استخدام المحتوى دون المرور من خلال جافا سكريبت.

<! 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>
  $ (وظيفة () {
    $ ( "#accordion") .accordion ()؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "الأكورديون">
  <H3> الجزء 1 </ H3>
  <div>
    <P>
    Mauris mauris ما كان عليه سابقا، blandit وآخرون، ultrices لذلك، suscipit eget، كيف. صحيح
    التحرير neque. Vivamus احترازيا metus، molestie فيل، حامل؛ حبلى في، condimentum الجلوس
    امات، نونك. نام nibh. Donec suscipit إيروس. نام ميل. Proin viverra ليو التحرير
    أوديو. Curabitur malesuada. دهليز على velit الاتحاد الأوروبي ما كان عليه سابقا scelerisque vulputate.
    </ P>
  </ div>
  <H3> الجزء 2 </ H3>
  <div>
    <P>
    غير URNA الحوار الاقتصادي الاستراتيجي. Donec آخرون ما كان عليه سابقا. Phasellus الاتحاد الأوروبي ligula. دهليز الجلوس امات
    بوروس. Vivamus hendrerit، دولور في laoreet aliquet، mauris turpis porttitor
    velit، faucibus interdum تيلوس يبيرو ميلان خوستو. Vivamus غير quam. وفي
    suscipit faucibus URNA.
    </ P>
  </ div>
  <H3> قسم 3 </ H3>
  <div>
    <P>
    نام ENIM تكشيرة، molestie وآخرون، ميلان بورتا، ميلان aliquam، تكشيرة. Quisque lobortis.
    Phasellus pellentesque بوروس في ماسا. Aenean في الر. Phasellus ميلان يبيرو
    ميلان تيلوس pellentesque سمبر. سد ميلان الهرية. سد commodo، ماجنا quis
    خمل ornare، كيف ما كان عليه سابقا aliquam احترازيا، الاتحاد الأوروبي iaculis بوروس ليو venenatis وثيقة الهوية الوحيدة.
    </ P>
    <UL>
      <لي> قائمة عنصر واحد </ لى>
      <لي> البند قائمة اثنين </ لى>
      <لي> قائمة البند الثالث </ لى>
    </ UL>
  </ div>
  <H3> الجزء 4 </ H3>
  <div>
    <P>
    وكالات التصنيف الائتماني القول المأثور. Pellentesque مقيم مرضي tristique senectus آخرون netus
    وآخرون جوع malesuada ميلان egestas turpis. دهليز ما قبل هوز بريمس في
    faucibus أورسي luctus آخرون ultrices الاستفسار cubilia Curae، Aenean خمل
    mauris فيل بتوقيت شرق الولايات المتحدة.
    </ P>
    <P>
    Suspendisse الاتحاد الأوروبي nisl. Nullam التحرير يبيرو. صحيح dignissim consequat LECTUS.
    الطبقة aptent taciti sociosqu إعلان litora torquent في conubia نوسترا، في
    inceptos himenaeos.
    </ P>
  </ div>
</ div>
 
 
</ الجسم>
</ HTML>

محتوى قابل للطي

افتراضيا، لا تزال لوحات انهيار دائما جزءا مفتوح. لإعطاء يتم طي جميع أجزاء، ويمكن وضعها collapsible الخيار إلى true. انقر على الباب مفتوح حاليا للانهيار جزء محتواه.

<! 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>
  $ (وظيفة () {
    $ ( "#accordion") .accordion ({
      للطي: صحيح
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "الأكورديون">
  <H3> الجزء 1 </ H3>
  <div>
    <P> Mauris mauris ما كان عليه سابقا، blandit وآخرون، ultrices لذلك، suscipit eget، كيف. صحيح التحرير neque. Vivamus احترازيا metus، molestie فيل، حامل؛ حبلى في، condimentum الجلوس امات، نونك. نام nibh. Donec suscipit إيروس. نام ميل. Proin viverra ليو التحرير أوديو. Curabitur malesuada. دهليز على velit الاتحاد الأوروبي ما كان عليه سابقا scelerisque vulputate. </ P>
  </ div>
  <H3> الجزء 2 </ H3>
  <div>
    <P> سد غير URNA. Donec آخرون ما كان عليه سابقا. Phasellus الاتحاد الأوروبي ligula. دهليز الجلوس امات بوروس. Vivamus hendrerit، دولور في laoreet aliquet، mauris turpis porttitor velit، faucibus interdum تيلوس يبيرو ميلان خوستو. Vivamus غير quam. وفي suscipit faucibus URNA. < / P>
  </ div>
  <H3> قسم 3 </ H3>
  <div>
    <P> نام ENIM تكشيرة، molestie وآخرون، ميلان بورتا، aliquam ميلان، تكشيرة. Quisque lobortis. Phasellus pellentesque بوروس في ماسا. Aenean في الر. Phasellus ميلان يبيرو ميلان تيلوس pellentesque سمبر. سد ميلان الهرية. commodo سد، ماجنا quis خمل ornare ، كيف ما كان عليه سابقا aliquam احترازيا، الاتحاد الأوروبي iaculis بوروس ليو venenatis وثيقة الهوية الوحيدة. </ P>
    <UL>
      <لي> قائمة عنصر واحد </ لى>
      <لي> البند قائمة اثنين </ لى>
      <لي> قائمة البند الثالث </ لى>
    </ UL>
  </ div>
  <H3> الجزء 4 </ H3>
  <div>
    <P> وكالات التصنيف الائتماني القول المأثور Pellentesque مقيم مرضي tristique senectus آخرون netus آخرون malesuada جوع ميلان egestas turpis دهليز ما قبل هوز بريمس في faucibus أورسي luctus آخرون ultrices الاستفسار cubilia Curae؛ .. Aenean خمل mauris فيل بتوقيت شرق الولايات المتحدة </ P> <P> Suspendisse الاتحاد الأوروبي nisl. . Nullam التحرير يبيرو. صحيح dignissim consequat LECTUS. الفئة aptent taciti sociosqu إعلان litora torquent في conubia نوسترا، في inceptos himenaeos. </ P>
  </ div>
</ div>
 
 
</ الجسم>
</ HTML>

الرموز المخصصة

من خلال icons خيارات لتخصيص رمز العنوان، icons الخيار لقبول العنوان الافتراضي وتفعيل (فتح) مستوى الدولة. استخدام إطار واجهة المستخدم المغلق من أي فئة، أو إنشاء فئة مخصصة لاستخدام صورة الخلفية.

<! 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>
  $ (وظيفة () {
    الرموز فار = {
      رأس: "واجهة المستخدم رمز الدائرة السهم الإلكترونية"،
      activeHeader: "الدائرة واجهة المستخدم رمز السهم ليالي"
    }؛
    $ ( "#accordion") .accordion ({
      الرموز: الرموز
    })؛
    $ ( "#toggle") .button (). انقر (وظيفة () {
      إذا ($ ( "#accordion") .accordion ( "خيار"، "الرموز")) {
        $ ( "#accordion") .accordion ( "الخيار"، "الرموز"، لاغية)؛
      } {شيء آخر
        $ ( "#accordion") .accordion ( "الخيار"، "الرموز"، والرموز)؛
      }
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "الأكورديون">
  <H3> الجزء 1 </ H3>
  <div>
    <P> Mauris mauris ما كان عليه سابقا، blandit وآخرون، ultrices لذلك، suscipit eget، كيف. صحيح التحرير neque. Vivamus احترازيا metus، molestie فيل، حامل؛ حبلى في، condimentum الجلوس امات، نونك. نام nibh. Donec suscipit إيروس. نام ميل. Proin viverra ليو التحرير أوديو. Curabitur malesuada. دهليز على velit الاتحاد الأوروبي ما كان عليه سابقا scelerisque vulputate. </ P>
  </ div>
  <H3> الجزء 2 </ H3>
  <div>
    <P> سد غير URNA. Donec آخرون ما كان عليه سابقا. Phasellus الاتحاد الأوروبي ligula. دهليز الجلوس امات بوروس. Vivamus hendrerit، دولور في laoreet aliquet، mauris turpis porttitor velit، faucibus interdum تيلوس يبيرو ميلان خوستو. Vivamus غير quam. وفي suscipit faucibus URNA. < / P>
  </ div>
  <H3> قسم 3 </ H3>
  <div>
    <P> نام ENIM تكشيرة، molestie وآخرون، ميلان بورتا، aliquam ميلان، تكشيرة. Quisque lobortis. Phasellus pellentesque بوروس في ماسا. Aenean في الر. Phasellus ميلان يبيرو ميلان تيلوس pellentesque سمبر. سد ميلان الهرية. commodo سد، ماجنا quis خمل ornare ، كيف ما كان عليه سابقا aliquam احترازيا، الاتحاد الأوروبي iaculis بوروس ليو venenatis وثيقة الهوية الوحيدة. </ P>
    <UL>
      <لي> قائمة عنصر واحد </ لى>
      <لي> البند قائمة اثنين </ لى>
      <لي> قائمة البند الثالث </ لى>
    </ UL>
  </ div>
  <H3> الجزء 4 </ H3>
  <div>
    <P> وكالات التصنيف الائتماني القول المأثور Pellentesque مقيم مرضي tristique senectus آخرون netus آخرون malesuada جوع ميلان egestas turpis دهليز ما قبل هوز بريمس في faucibus أورسي luctus آخرون ultrices الاستفسار cubilia Curae؛ .. Aenean خمل mauris فيل بتوقيت شرق الولايات المتحدة </ P> <P> Suspendisse الاتحاد الأوروبي nisl. . Nullam التحرير يبيرو. صحيح dignissim consequat LECTUS. الفئة aptent taciti sociosqu إعلان litora torquent في conubia نوسترا، في inceptos himenaeos. </ P>
  </ div>
</ div>
 
<زر معرف = "تبديل"> رمز تبديل </ زر>
 
 
</ الجسم>
</ HTML>

الفضاء ملء

منذ تتكون لوحة قابلة للطي من العناصر على مستوى الكتلة، وافتراضيا عرضه يملأ الفضاء الأفقية المتوفرة. لملء المساحة العمودية التي خصصتها الحاويات، تعيين heightStyle الخيار "fill" ، فإن السيناريو تلقائيا تعيين ارتفاع حجم لوحة قابلة للطي من الحاوية الأصل.

<! 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">
  <نمط>
  # الأكورديون-رسزر {
    الحشو: 10px؛
    العرض: 350px؛
    الطول: 220px؛
  }
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#accordion") .accordion ({
      heightStyle: "ملء"
    })؛
  })؛
  $ (وظيفة () {
    $ ( "# الأكورديون-رسزر") .resizable ({
      minHeight: 140،
      minWidth: 200،
      تغيير: وظيفة () {
        $ ( "#accordion") .accordion ( "تحديث")؛
      }
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<H3 الطبقة = "مستندات"> إعادة ضبط حاوية الخارجية: </ H3>
 
<شعبة معرف = "الأكورديون-رسزر" الطبقة = "واجهة المستخدم القطعة المحتوى">
  <شعبة معرف = "الأكورديون">
    <H3> الجزء 1 </ H3>
    <div>
      <P> Mauris mauris ما كان عليه سابقا، blandit وآخرون، ultrices لذلك، suscipit eget، كيف. صحيح التحرير neque. Vivamus احترازيا metus، molestie فيل، حامل؛ حبلى في، condimentum الجلوس امات، نونك. نام nibh. Donec suscipit إيروس. نام ميل. Proin viverra ليو التحرير أوديو. Curabitur malesuada. دهليز على velit الاتحاد الأوروبي ما كان عليه سابقا scelerisque vulputate. </ P>
    </ div>
    <H3> الجزء 2 </ H3>
    <div>
      <P> سد غير URNA. Donec آخرون ما كان عليه سابقا. Phasellus الاتحاد الأوروبي ligula. دهليز الجلوس امات بوروس. Vivamus hendrerit، دولور في laoreet aliquet، mauris turpis porttitor velit، faucibus interdum تيلوس يبيرو ميلان خوستو. Vivamus غير quam. وفي suscipit faucibus URNA. < / P>
    </ div>
    <H3> قسم 3 </ H3>
    <div>
      <P> نام ENIM تكشيرة، molestie وآخرون، ميلان بورتا، aliquam ميلان، تكشيرة. Quisque lobortis. Phasellus pellentesque بوروس في ماسا. Aenean في الر. Phasellus ميلان يبيرو ميلان تيلوس pellentesque سمبر. سد ميلان الهرية. commodo سد، ماجنا quis خمل ornare ، كيف ما كان عليه سابقا aliquam احترازيا، الاتحاد الأوروبي iaculis بوروس ليو venenatis وثيقة الهوية الوحيدة. </ P>
      <UL>
        <لي> قائمة عنصر واحد </ لى>
        <لي> البند قائمة اثنين </ لى>
        <لي> قائمة البند الثالث </ لى>
      </ UL>
    </ div>
    <H3> الجزء 4 </ H3>
    <div>
      <P> وكالات التصنيف الائتماني القول المأثور Pellentesque مقيم مرضي tristique senectus آخرون netus آخرون malesuada جوع ميلان egestas turpis دهليز ما قبل هوز بريمس في faucibus أورسي luctus آخرون ultrices الاستفسار cubilia Curae؛ .. Aenean خمل mauris فيل بتوقيت شرق الولايات المتحدة </ P> <P> Suspendisse الاتحاد الأوروبي nisl. . Nullam التحرير يبيرو. صحيح dignissim consequat LECTUS. الفئة aptent taciti sociosqu إعلان litora torquent في conubia نوسترا، في inceptos himenaeos. </ P>
    </ div>
  </ div>
</ div>
 
 
</ الجسم>
</ HTML>

ارتفاع غير التلقائي

وضع heightStyle: "content" ، بحيث لوحات مطوية تحتفظ طولهم الأصلي.

<! 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>
  $ (وظيفة () {
    $ ( "#accordion") .accordion ({
      heightStyle: "محتوى"
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "الأكورديون">
  <H3> الجزء 1 </ H3>
  <div>
    <P> Mauris mauris ما كان عليه سابقا، blandit وآخرون، ultrices لذلك، susceros. نام ميل. Proin viverra ليو التحرير أوديو. Curabitur malesuada. دهليز على velit الاتحاد الأوروبي ما كان عليه سابقا scelerisque vulputate. </ P>
  </ div>
  <H3> الجزء 2 </ H3>
  <div>
    <P> سد غير URNA. Donec آخرون ما كان عليه سابقا. Phasellus الاتحاد الأوروبي ligula. دهليز الجلوس امات بوروس. Vivamus hendrerit، دولور في laoreet aliquet، mauris turpis porttitor velit، faucibus interdum تيلوس يبيرو ميلان خوستو. Vivamus غير quam. وفي suscipit faucibus URNA. < / P>
  </ div>
  <H3> قسم 3 </ H3>
  <div>
    <P> نام ENIM تكشيرة، molestie وآخرون، ميلان بورتا، aliquam ميلان، تكشيرة. Quisque lobortis. Phasellus pellentesque بوروس في ماسا. Aenean في الر. Phasellus ميلان يبيرو ميلان تيلوس pellentesque سمبر. سد ميلان الهرية. commodo سد، ماجنا quis خمل ornare ، كيف ما كان عليه سابقا aliquam احترازيا، الاتحاد الأوروبي iaculis بوروس ليو venenatis وثيقة الهوية الوحيدة. </ P>
    <UL>
      <لي> قائمة البند </ لى>
      <لي> قائمة البند </ لى>
      <لي> قائمة البند </ لى>
      <لي> قائمة البند </ لى>
      <لي> قائمة البند </ لى>
      <لي> قائمة البند </ لى>
      <لي> قائمة البند </ لى>
    </ UL>
  </ div>
</ div>
 
 
</ الجسم>
</ 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>
  $ (وظيفة () {
    $ ( "#accordion") .accordion ({
      الحدث: "انقر hoverintent"
    })؛
  })؛
 
  / *
   * HoverIntent | حقوق الطبع والنشر 2011 بريان Cherne
   * Http://cherne.net/brian/resources/jquery.hoverIntent.html
   * تم التعديل من قبل فريق مسج واجهة المستخدم
   * /
  $ .event.special.hoverintent = {
    إعداد: وظيفة () {
      $ (هذا) .bind ( "مرر الفأرة فوق"، jQuery.event.special.hoverintent.handler)؛
    }،
    teardown: وظيفة () {
      $ (هذا) .unbind ( "مرر الفأرة فوق"، jQuery.event.special.hoverintent.handler)؛
    }،
    معالج: وظيفة (الحدث) {
      فار currentX، كرنتي، مهلة،
        وسائط = الحجج،
        الهدف = $ (event.target)،
        previousX = event.pageX،
        previousY = event.pageY.
 
      المسار ظيفة (الحدث) {
        currentX = event.pageX.
        كرنتي = event.pageY.
      }؛
 
      وظيفة واضحة () {
        الهدف
          .unbind ( "mousemove"، المسار)
          .unbind ( "mouseout"، واضح).
        clearTimeout (المهلة).
      }
 
      معالج وظيفة () {
        دعامة فار،
          الاصليه = الحدث.
 
        إذا ((Math.abs (previousX - currentX) +
            Math.abs (previousY - كرنتي)) <7) {
          واضح ()؛
 
          الحدث = $ .Event ( "hoverintent")؛
          ل(دعم في الرسالة الأصلية) {
            إذا (! (دعم في الحدث)) {
              الحدث [دعم] = الاصليه [دعم].
            }
          }
          // منع الوصول إلى الحدث الأصلي، لأنه سيتم تشغيل الحدث الجديد بشكل غير متزامن، الحدث القديم لم تعد متوفرة (# 6028)
          حذف event.originalEvent.
 
          target.trigger (الحدث)؛
        } {شيء آخر
          previousX = currentX.
          previousY = كرنتي.
          مهلة = setTimeout (معالج، 100)؛
        }
      }
 
      مهلة = setTimeout (معالج، 100)؛
      target.bind ({
        mousemove: المسار،
        mouseout: واضح
      })؛
    }
  }؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "الأكورديون">
  <H3> الجزء 1 </ H3>
  <div>
    <P>
    Mauris mauris ما كان عليه سابقا، blandit وآخرون، ultrices لذلك، suscipit eget، كيف. صحيح
    التحرير neque. Vivamus احترازيا metus، molestie فيل، حامل؛ حبلى في، condimentum الجلوس
    امات، نونك. نام nibh. Donec suscipit إيروس. نام ميل. Proin viverra ليو التحرير
    أوديو. Curabitur malesuada. دهليز على velit الاتحاد الأوروبي ما كان عليه سابقا scelerisque vulputate.
    </ P>
  </ div>
  <H3> الجزء 2 </ H3>
  <div>
    <P>
    غير URNA الحوار الاقتصادي الاستراتيجي. Donec آخرون ما كان عليه سابقا. Phasellus الاتحاد الأوروبي ligula. دهليز الجلوس امات
    بوروس. Vivamus hendrerit، دولور في laoreet aliquet، mauris turpis porttitor
    velit، faucibus interdum تيلوس يبيرو ميلان خوستو. Vivamus غير quam. وفي
    suscipit faucibus URNA.
    </ P>
  </ div>
  <H3> قسم 3 </ H3>
  <div>
    <P>
    نام ENIM تكشيرة، molestie وآخرون، ميلان بورتا، ميلان aliquam، تكشيرة. Quisque lobortis.
    Phasellus pellentesque بوروس في ماسا. Aenean في الر. Phasellus ميلان يبيرو
    ميلان تيلوس pellentesque سمبر. سد ميلان الهرية. سد commodo، ماجنا quis
    خمل ornare، كيف ما كان عليه سابقا aliquam احترازيا، الاتحاد الأوروبي iaculis بوروس ليو venenatis وثيقة الهوية الوحيدة.
    </ P>
    <UL>
      <لي> قائمة عنصر واحد </ لى>
      <لي> البند قائمة اثنين </ لى>
      <لي> قائمة البند الثالث </ لى>
    </ UL>
  </ div>
  <H3> الجزء 4 </ H3>
  <div>
    <P>
    وكالات التصنيف الائتماني القول المأثور. Pellentesque مقيم مرضي tristique senectus آخرون netus
    وآخرون جوع malesuada ميلان egestas turpis. دهليز ما قبل هوز بريمس في
    faucibus أورسي luctus آخرون ultrices الاستفسار cubilia Curae، Aenean خمل
    mauris فيل بتوقيت شرق الولايات المتحدة.
    </ P>
    <P>
    Suspendisse الاتحاد الأوروبي nisl. Nullam التحرير يبيرو. صحيح dignissim consequat LECTUS.
    الطبقة aptent taciti sociosqu إعلان litora torquent في conubia نوسترا، في
    inceptos himenaeos.
    </ P>
  </ div>
</ div>
 
 
</ الجسم>
</ 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">
  <نمط>
  / * عند الطلب، هناك قضايا تخطيط IE (انظر # 5413) * /
  .group {التكبير: 1}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#accordion")
      .accordion ({
        رأس: "> div> H3"
      })
      .sortable ({
        محور: "ذ"،
        التعامل مع: "H3"،
        وقف: وظيفة (الحدث، واجهة المستخدم) {
          // عند فرز، أي لا يمكن أن تكون مسجلة طمس، وبالتالي فإن الزناد focusout معالج لإزالة التركيز .ui للدولة
          ui.item.children ( "H3") .triggerHandler ( "focusout")؛
        }
      })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "الأكورديون">
  <فئة الدرجة = "الجماعة">
    <H3> الجزء 1 </ H3>
    <div>
      <P> Mauris mauris ما كان عليه سابقا، blandit وآخرون، ultrices لذلك، suscipit eget، كيف. صحيح التحرير neque. Vivamus احترازيا metus، molestie فيل، حامل؛ حبلى في، condimentum الجلوس امات، نونك. نام nibh. Donec suscipit إيروس. نام ميل. Proin viverra ليو التحرير أوديو. Curabitur malesuada. دهليز على velit الاتحاد الأوروبي ما كان عليه سابقا scelerisque vulputate. </ P>
    </ div>
  </ div>
  <فئة الدرجة = "الجماعة">
    <H3> الجزء 2 </ H3>
    <div>
      <P> سد غير URNA. Donec آخرون ما كان عليه سابقا. Phasellus الاتحاد الأوروبي ligula. دهليز الجلوس امات بوروس. Vivamus hendrerit، دولور في laoreet aliquet، mauris turpis porttitor velit، faucibus interdum تيلوس يبيرو ميلان خوستو. Vivamus غير quam. وفي suscipit faucibus URNA. < / P>
    </ div>
  </ div>
  <فئة الدرجة = "الجماعة">
    <H3> قسم 3 </ H3>
    <div>
      <P> نام ENIM تكشيرة، molestie وآخرون، ميلان بورتا، aliquam ميلان، تكشيرة. Quisque lobortis. Phasellus pellentesque بوروس في ماسا. Aenean في الر. Phasellus ميلان يبيرو ميلان تيلوس pellentesque سمبر. سد ميلان الهرية. commodo سد، ماجنا quis خمل ornare ، كيف ما كان عليه سابقا aliquam احترازيا، الاتحاد الأوروبي iaculis بوروس ليو venenatis وثيقة الهوية الوحيدة. </ P>
      <UL>
        <لي> قائمة عنصر واحد </ لى>
        <لي> البند قائمة اثنين </ لى>
        <لي> قائمة البند الثالث </ لى>
      </ UL>
    </ div>
  </ div>
  <فئة الدرجة = "الجماعة">
    <H3> الجزء 4 </ H3>
    <div>
      <P> وكالات التصنيف الائتماني القول المأثور Pellentesque مقيم مرضي tristique senectus آخرون netus آخرون malesuada جوع ميلان egestas turpis دهليز ما قبل هوز بريمس في faucibus أورسي luctus آخرون ultrices الاستفسار cubilia Curae؛ .. Aenean خمل mauris فيل بتوقيت شرق الولايات المتحدة </ P> <P> Suspendisse الاتحاد الأوروبي nisl. . Nullam التحرير يبيرو. صحيح dignissim consequat LECTUS. الفئة aptent taciti sociosqu إعلان litora torquent في conubia نوسترا، في inceptos himenaeos. </ P>
    </ div>
  </ div>
</ div>
 
 
</ الجسم>
</ HTML>

السابق: مسج واجهة المستخدم سبيل المثال - الفرز (قابل للفرز)

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

jQuery UI مسار

jQuery UI موضوع

jQuery UI مكتبة عنصر

jQuery UI الدليل المرجعي

jQuery UI أمثلة