المثال مسج واجهة المستخدم - تكبير (يمكن تغيير حجم)
استخدام الماوس لتغيير حجم عنصر.
لمزيد من التفاصيل حول التفاعل يمكن تغيير حجم، راجع وثائق API الحاجيات يمكن تغيير حجم (ويمكن تغيير حجم والقطعة) .
وظيفة الافتراضي
تمكين وظيفة يمكن تغيير حجم على أي عنصر DOM. اسحب الماوس إلى اليمين أو الحد السفلي إلى العرض المطلوب أو الارتفاع.
<! 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">
<نمط>
#resizable {العرض: 150px؛ الطول: 150px؛ الحشو: 0.5em؛}
H3 #resizable {مواءمة النصوص: المركز؛ هامش: 0؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#resizable") .resizable ()؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "يمكن تغيير حجم" الطبقة = "واجهة المستخدم القطعة المحتوى">
<H3 الطبقة = "واجهة المستخدم القطعة-رأس"> تكبير (يمكن تغيير حجم) </ H3>
</ div>
</ الجسم>
</ HTML>
حيوية
استخدام animate الخيار (منطقية) يمكن توسيع نطاق السلوك للرسوم المتحركة. عندما يتم تعيين هذا الخيار إلى 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">
<نمط>
#resizable {العرض: 150px؛ الطول: 150px؛ الحشو: 0.5em؛}
H3 #resizable {مواءمة النصوص: المركز؛ هامش: 0؛}
.ui يمكن تغيير حجم المساعد {الحدود: 1PX رمادي منقط؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#resizable") .resizable ({
تحريك: صحيح
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "يمكن تغيير حجم" الطبقة = "واجهة المستخدم القطعة المحتوى">
<H3 الطبقة = "واجهة المستخدم القطعة-رأس"> الرسوم المتحركة </ H3>
</ div>
</ الجسم>
</ HTML>
لحد من منطقة التكبير
حدود التحجيم محددة. استخدام containment الخيار لتحديد أحد الوالدين عنصر DOM أو محدد مسج، مثل "وثيقة '.
<! 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">
<نمط>
#container {العرض: 300px؛ الطول: 300px؛}
#container H3 {مواءمة النصوص: المركز؛ هامش: 0؛ هامش القاع: 10px؛}
#resizable {خلفية موقف: أعلى يقم؛ العرض: 150px؛ الطول: 150px؛}
#resizable، #container {الحشو: 0.5em؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#resizable") .resizable ({
الاحتواء: "#container"
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "حاوية" الطبقة = "واجهة المستخدم القطعة المحتوى">
<H3 الطبقة = "واجهة المستخدم القطعة-رأس"> حد </ H3>
<شعبة معرف = "يمكن تغيير حجم" الطبقة = "واجهة المستخدم للدولة نشطة">
<H3 الطبقة = "واجهة المستخدم القطعة-رأس"> تكبير (يمكن تغيير حجم) </ H3>
</ div>
</ div>
</ الجسم>
</ HTML>
البداية المتأخرة
بواسطة delay تبدأ ميلي ثانية تأخير خيار التحجيم. من خلال distance خيار الضغط واسحب المؤشر إلى بكسل المحدد قبل السماح التحجيم.
<! 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">
<نمط>
#resizable، # resizable2 {العرض: 150px؛ الطول: 150px؛ الحشو: 0.5em؛}
H3 #resizable، # resizable2 H3 {مواءمة النصوص: المركز؛ هامش: 0؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#resizable") .resizable ({
تأخير: 1000
})؛
$ ( "# Resizable2") .resizable ({
المسافة: 40
})؛
})؛
</ script>
</ رئيس>
<body>
<H3 الطبقة = "مستندات"> تأخير الوقت (مللي ثانية): </ H3>
<شعبة معرف = "يمكن تغيير حجم" الطبقة = "واجهة المستخدم القطعة المحتوى">
<H3 الطبقة = "واجهة المستخدم القطعة-رأس"> الوقت </ H3>
</ div>
<H3 الطبقة = "مستندات"> تأخير المسافة (بكسل): </ H3>
<شعبة معرف = "resizable2" الطبقة = "واجهة المستخدم القطعة المحتوى">
<H3 الطبقة = "واجهة المستخدم القطعة-رأس"> بعد </ H3>
</ div>
</ الجسم>
</ HTML>
المساعد
عن طريق تعيين helper الخيار لفئة CSS، عند التكبير لعرض فقط العناصر كفاف.
<! 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">
<نمط>
#resizable {العرض: 150px؛ الطول: 150px؛ الحشو: 0.5em؛}
H3 #resizable {مواءمة النصوص: المركز؛ هامش: 0؛}
.ui يمكن تغيير حجم المساعد {الحدود: 2px منقط # 00F؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#resizable") .resizable ({
المساعد: "واجهة المستخدم يمكن تغيير حجم المساعد"
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "يمكن تغيير حجم" الطبقة = "واجهة المستخدم القطعة المحتوى">
<H3 الطبقة = "واجهة المستخدم القطعة-رأس"> مساعد </ H3>
</ div>
</ الجسم>
</ HTML>
الحد الأقصى / الحد الأدنى من حجم
استخدام maxHeight ، maxWidth ، minHeight و minWidth يحد خيار الحد الأقصى أو الحد الأدنى للعنصر الارتفاع يمكن تغيير حجم أو العرض.
<! 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">
<نمط>
#resizable {العرض: 200px؛ الطول: 150px؛ الحشو: 5px؛}
H3 #resizable {مواءمة النصوص: المركز؛ هامش: 0؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#resizable") .resizable ({
maxHeight: 250،
maxWidth: 350،
minHeight: 150،
minWidth: 200
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "يمكن تغيير حجم" الطبقة = "واجهة المستخدم القطعة المحتوى">
<H3 الطبقة = "واجهة المستخدم القطعة-رأس"> تكبير / تصغير </ H3>
</ div>
</ الجسم>
</ HTML>
الحفاظ على نسبة الارتفاع
الحفاظ على نسبة العرض إلى الارتفاع الحالية أو وضع حد جديد لتحجيم نسبة الارتفاع. وضع aspectRatio خيار صحيح، واختياريا تقديم سعر صرف جديد (على سبيل المثال، 4/3).
<! 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">
<نمط>
#resizable {العرض: 160px؛ الطول: 90px؛ الحشو: 0.5em؛}
H3 #resizable {مواءمة النصوص: المركز؛ هامش: 0؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#resizable") .resizable ({
aspectRatio: 16/9
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "يمكن تغيير حجم" الطبقة = "واجهة المستخدم القطعة المحتوى">
<H3 الطبقة = "واجهة المستخدم القطعة-رأس"> الحفاظ على نسبة الارتفاع </ H3>
</ div>
</ الجسم>
</ HTML>
المفاجئة إلى الشبكة
محاذاة العناصر يمكن تغيير حجم إلى الشبكة. بواسطة grid خيار حجم لضبط خلايا الشبكة (بكسل الطول والعرض).
<! 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">
<نمط>
#resizable {العرض: 150px؛ الطول: 150px؛ الحشو: 0.5em؛}
H3 #resizable {مواءمة النصوص: المركز؛ هامش: 0؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#resizable") .resizable ({
الشبكة: 50
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "يمكن تغيير حجم" الطبقة = "واجهة المستخدم القطعة المحتوى">
<H3 الطبقة = "واجهة المستخدم القطعة-رأس"> الشبكة </ H3>
</ div>
</ الجسم>
</ HTML>
متزامن تكبير
عن طريق النقر والسحب عنصرا من حافة لتغيير حجم عناصر متعددة في وقت واحد. ل alsoResize مرت خيارات محدد المشتركة.
<! 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">
<نمط>
#resizable {خلفية موقف: أعلى يقم؛}
#resizable، #also {العرض: 150px؛ الطول: 120px؛ الحشو: 0.5em؛}
H3 #resizable، #also H3 {مواءمة النصوص: المركز؛ هامش: 0؛}
#also {هامش قمة: 1em؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#resizable") .resizable ({
alsoResize: "#also"
})؛
$ ( "#also") .resizable ()؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "يمكن تغيير حجم" الطبقة = "واجهة المستخدم القطعة-رأس">
<H3 الطبقة = "واجهة المستخدم للدولة نشط"> تكبير </ H3>
</ div>
<شعبة معرف = "أيضا" الطبقة = "واجهة المستخدم القطعة-المحتوى">
<H3 الطبقة = "واجهة المستخدم القطعة-رأس"> تكبير متزامنة </ H3>
</ 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">
<نمط>
.ui يمكن تغيير حجم سي {
أسفل: 17px؛
}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#resizable") .resizable ({
يعالج: "ذاته"
})؛
})؛
</ script>
</ رئيس>
<body>
<ناحية النص معرف = صفوف "يمكن تغيير حجم" = "5" من الأعمدة = "20"> </ textarea> من
</ الجسم>
</ HTML>
ردود الفعل البصري
من خلال تحديد ghost خيار صحيح، يمكن عرض عنصر في شفافة أثناء التكبير، بدلا من عرض عنصر الفعلي.
<! 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">
<نمط>
#resizable {العرض: 150px؛ الطول: 150px؛ الحشو: 0.5em؛}
H3 #resizable {مواءمة النصوص: المركز؛ هامش: 0؛}
.ui يمكن تغيير حجم شبح {الحدود: 1PX رمادي منقط؛}
</ النمط>
<script>
$ (وظيفة () {
$ ( "#resizable") .resizable ({
شبح: صحيح
})؛
})؛
</ script>
</ رئيس>
<body>
<شعبة معرف = "يمكن تغيير حجم" الطبقة = "واجهة المستخدم القطعة المحتوى">
<H3 الطبقة = "واجهة المستخدم القطعة-رأس"> الشبح </ H3>
</ div>
</ الجسم>
</ HTML>