Latest web development tutorials

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

النسبي نافذة، والوثائق، والمراسي، المؤشر / الماوس وغيرها من عناصر عنصر تحديد المواقع.

لمزيد من المعلومات حول .position() تفاصيل الأساليب، راجع وثائق API .position () .

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

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

<! 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">
  <نمط>
  #parent {
    العرض: 60٪؛
    الطول: 40px؛
    هامش: 10px السيارات.
    الحشو: 5px؛
    الحدود: 1PX الصلبة # 777؛
    لون الخلفية: # fbca93.
    مواءمة النصوص: المركز؛
  }
  .positionable {
    الموقف: مطلقة؛
    عرض: كتلة.
    الحق: 0؛
    أسفل: 0؛
    لون الخلفية: # bcd5e6.
    مواءمة النصوص: المركز؛
  }
  # Positionable1 {
    العرض: 75px؛
    الطول: 75px؛
  }
  # Positionable2 {
    العرض: 120px؛
    الطول: 40px؛
  }
  حدد، الإدخال {
    هامش اليسار: 15px؛
  }
  </ النمط>
  <script>
  $ (وظيفة () {
    موقف وظيفة () {
      $ ( ".positionable") .position ({
        من: $ ( "#parent")،
        بلدي: $ ( "#my_horizontal") .val () + "" + $ ( "#my_vertical") .val ()،
        على العنوان التالي: $ ( "#at_horizontal") .val () + "" + $ ( "#at_vertical") .val ()،
        اصطدام: $ ( "#collision_horizontal") .val () + "" + $ ( "#collision_vertical") .val ()
      })؛
    }
 
    $ ( ".positionable"). المغلق ( "التعتيم"، 0.5)؛
 
    $ ( "تحديد، ومدخلات") .bind ( "انقر keyup التغيير"، موقف)؛
 
    $ ( "#parent") .draggable ({
      السحب: موقف
    })؛
 
    موقف ()؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "الأم">
  <P>
  هذا هو موقع العنصر الأصلي.
  </ P>
</ div>
 
<div الطبقة = "positionable" معرف = "positionable1">
  <P>
  إلى موقف
  </ P>
</ div>
 
<div الطبقة = "positionable" معرف = "positionable2">
  <P>
  لوضع 2
  </ P>
</ div>
 
<أسلوب الدرجة = "الحشو: 20px؛ هامش قمة: 75px؛">
  الموقع ...
  <div النمط = "الحشو القاع: 20px؛">
    <B> لي: </ B>
    <اختر معرف = "my_horizontal">
      <قيمة الخيار = "اليسار"> اليسار </ خيار>
      <قيمة الخيار = "مركز"> مركز </ خيار>
      <قيمة الخيار = "حق"> الحق </ خيار>
    </ تحديد>
    <تحديد هوية = "my_vertical">
      <قيمة الخيار = "القمة"> أعلى </ خيار>
      <قيمة الخيار = "مركز"> مركز </ خيار>
      <الخيار قيمة = "القاع"> أسفل </ خيار>
    </ تحديد>
  </ div>
  <div النمط = "الحشو القاع: 20px؛">
    <B> في: </ B>
    <اختر معرف = "at_horizontal">
      <قيمة الخيار = "اليسار"> اليسار </ خيار>
      <قيمة الخيار = "مركز"> مركز </ خيار>
      <قيمة الخيار = "حق"> الحق </ خيار>
    </ تحديد>
    <تحديد هوية = "at_vertical">
      <قيمة الخيار = "القمة"> أعلى </ خيار>
      <قيمة الخيار = "مركز"> مركز </ خيار>
      <الخيار قيمة = "القاع"> أسفل </ خيار>
    </ تحديد>
  </ div>
  <div النمط = "الحشو القاع: 20px؛">
    <B> التصادم: </ B>
    <اختر معرف = "collision_horizontal">
      <الخيار قيمة = "الوجه"> الوجه </ خيار>
      <قيمة الخيار = "صالح"> صالح </ خيار>
      <الخيار قيمة = "flipfit"> flipfit </ خيار>
      <قيمة الخيار = "لا شيء"> لا </ خيار>
    </ تحديد>
    <تحديد هوية = "collision_vertical">
      <الخيار قيمة = "الوجه"> الوجه </ خيار>
      <قيمة الخيار = "صالح"> صالح </ خيار>
      <الخيار قيمة = "flipfit"> flipfit </ خيار>
      <قيمة الخيار = "لا شيء"> لا </ خيار>
    </ تحديد>
  </ 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">
  <نمط>
  هيئة {
    هامش: 0؛
  }
  #container {
    تجاوز: مخفي.
    موقع: نسبي.
    الطول: 400px؛
  }
 
  IMG {
    الموقف: مطلقة؛
  }
  </ النمط>
  <script>
  $ (وظيفة () {
    // اعادة الاعمار يعني إزالة هذه الأساليب في المكونات $ .fn.left = وظيفة (استخدام) {
      العودة this.position ({
        بلدي: "وسط اليمين"،
        على العنوان التالي: "اليسار + 25 منتصف"،
        من: "#container"
        اصطدام: "لا شيء"،
        استخدام: استخدام
      })؛
    }؛
    $ .fn.right = وظيفة (استخدام) {
      العودة this.position ({
        بلدي: "اليسار الوسط"،
        على العنوان التالي: "بزر الماوس الأيمن 25 منتصف"،
        من: "#container"
        اصطدام: "لا شيء"،
        استخدام: استخدام
      })؛
    }؛
    $ .fn.center = وظيفة (استخدام) {
      العودة this.position ({
        بلدي: "منتصف الوسط"،
        على: "منتصف الوسط"،
        من: "#container"
        استخدام: استخدام
      })؛
    }؛
 
    $ ( "yourcolor.net و: مكافئ (0)") .left ()؛
    $ ( "yourcolor.net و: مكافئ (1)") .center ()؛
    $ ( "yourcolor.net و: مكافئ (2)") .right ()؛
 
    الأرواح وظيفة (إلى) {
      $ (هذا) .stop (صحيح، كاذبة) .animate (إلى)؛
    }
    العمل التالي (الحدث) {
      event.preventDefault ()؛
      $ ( "yourcolor.net و: مكافئ (2)") .center (الأرواح)؛
      $ ( "yourcolor.net و: مكافئ (1)") .left (الأرواح)؛
      . $ ( "yourcolor.net و: مكافئ (0)") .right () appendTo ( "#container")؛
    }
    العمل السابق (الحدث) {
      event.preventDefault ()؛
      $ ( "yourcolor.net و: مكافئ (0)") .center (الأرواح)؛
      $ ( "yourcolor.net و: مكافئ (1)") .right (الأرواح)؛
      . $ ( "yourcolor.net و: مكافئ (2)") .left () prependTo ( "#container")؛
    }
    $ ( "#previous"). انقر (السابق)؛
    $ ( "#next"). انقر (التالي).
 
    $ ( "yourcolor.net و"). انقر (وظيفة (الحدث) {
      $ ( "yourcolor.net و") .index (هذا) === 0 السابق (الحدث): المقبل (الحدث) ؛؟
    })؛
 
    $ (نافذة) .resize (وظيفة () {
      $ ( "yourcolor.net و: مكافئ (0)") .left (الأرواح)؛
      $ ( "yourcolor.net و: مكافئ (1)") .center (الأرواح)؛
      $ ( "yourcolor.net و: مكافئ (2)") .right (الأرواح)؛
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<شعبة معرف = "حاوية">
  على <img SRC = "../ الفسفور الابيض بين المحتوى / الإضافات / 2014/03 / earth.jpg" العرض = "458" ذروة = "308" بديل = "الأرض">
  على <img SRC = "../ الفسفور الابيض بين المحتوى / الإضافات / 2014/03 / flight.jpg" العرض = "512" ذروة = "307" بديل = "رحلة">
  على <img SRC = "../ الفسفور الابيض بين المحتوى / الإضافات / 2014/03 / rocket.jpg" العرض = "300" ذروة = "353" بديل = "صاروخ">
 
  على <a id="previous" href="#"> على </A>
  بواسطة <a id="next" href="#"> على </A>
</ div>
 
 
</ الجسم>
</ HTML>