os gui
v0.7.3 Taskbarless Minimization
مكتبة لتقليد واجهات المستخدم الرسومية لنظام التشغيل على الويب
على وجه التحديد ، Windows 98 - في الوقت الحالي على الأقل ؛ يمكن توسيعها في المستقبل.
تعمل هذه المكتبة على 98.js.org ، وهي نسخة قائمة على الويب من Windows 98 ، بما في ذلك الطلاء ، المفكرة ، مسجل الصوت ، وأكثر من ذلك.
انظر الصفحة الرئيسية لمزيد من المعلومات.
أشرطة القائمة ، بدعم من مربعات الاختيار وعناصر الراديو ، والحالات المعطلة ، والبنات الفرعية ، واختصارات لوحة المفاتيح ، والمزيد
يعمل تطبيقات التطبيق التي يمكنك سحبها ، وزيادةها ، وتقليلها ، وإغلاقها ، وتغيير حجمها
حوار ومتغيرات نافذة الأداة
الرسوم المتحركة لقب Titlebar التي توجه عينيك أثناء زيادة/تقليل/استعادة إلى الحد الأدنى
التركيز على احتواء: إذا قمت بعلامة التبويب أو التبويب "نقل+" داخل نافذة ، فإنها تلتف حول عنصر التحكم الأول/الأخير.
أنماط الأزرار ، بما في ذلك أزرار خفيفة الوزن ، وأزرار تعطيل ، وأزرار الإجراء الافتراضية
أنماط شريط التمرير ، خاصة بـ WebKit (في المستقبل ، يمكن أن يكون هناك شريط تمرير مخصص يعتمد على مكتبة لقب التمرير غير التدفئة ، أو أنماط تدعم المكتبة ، حيث من المتوقع أن تستخدم المكتبة مباشرة)
موضوع مع Windows .theme & .themepack ملفات في وقت التشغيل !
انظر العروض التوضيحية على الإنترنت هنا
تتطلب هذه المكتبة حاليًا jQuery لتنفيذ Windowing. قضبان القائمة لا تتطلب jQuery.
(في النهاية أريد عدم وجود تبعيات. حتى الآن قمت بإزالة jQuery من رمز القائمة ...)
المكتبة ليست (حتى الآن) مقدمة كملف واحد مناسب.
يمكنك إما 1. قم بتنزيل المستودع كملف مضغوط أو 2. استنساخ المستودع أو 3. قم بتثبيت المكتبة كحزمة NPM.
يجب عليك تضمين البرامج النصية للمكونات التي ترغب في استخدامها ( MenuBar.js أو $Window.js ) ، إلى جانب أوراق الأنماط للتخطيط والموضوع ونظام الألوان.
تأكد من استخدام ملفات CSS المترجمة ، وليس الملفات المصدر.
في <head> :
< link href =" os-gui/layout.css " rel =" stylesheet " type =" text/css " >
< link href =" os-gui/windows-98.css " rel =" stylesheet " type =" text/css " >
< link href =" os-gui/windows-default.css " rel =" stylesheet " type =" text/css " > في <head> أو <body> :
< script src =" os-gui/MenuBar.js " > </ script >
< script src =" lib/jquery.js " > </ script > <!-- required by $Window.js -->
< script src =" os-gui/$Window.js " > </ script > ملاحظة : من المحتمل أن تتغير API كثيرًا ، لكنني أحافظ على Changelog.
.inset-deep يخلق حدود أقحم 2 بكسل.outset-deep ينشئ حدود أقحم 2 بكسل (مثل زر أو نافذة أو منبثقة القائمة).inset-shallow.outset-shallow يخلق حدود 1 بكسل 1 يتم تطبيق أنماط الأزرار على عناصر button على مستوى العالم. (وإذا كنت ترغب في إعادة ضبطه ، لاحظ أنه يجب عليك التخلص من العنصر الزائف ::after أيضًا. todo: Scope CSS)
لعمل زر تبديل ، أضف فئة .toggle إلى الزر. اجعله يظهر كما هو مضغوط مع فئة .selected . (todo: إعادة تسمية هذا .pressed
يجب عليك استخدام الأنماط جنبًا إلى جنب مع سمات aria-pressed ، aria-haspopup ، و/أو سمات aria-expanded حسب الاقتضاء.
يمكنك عرض الزر هو الإجراء الافتراضي عن طريق إضافة .default إلى الزر. لاحظ أنه في Windows 98 ، ينتقل هذا النمط من زر إلى زر اعتمادًا على التركيز. قاعدة التجربة هي أنه يجب أن يكون على الزر الذي سيؤدي إلى إدخال.
يمكنك عمل زر خفيف الوزن عن طريق إضافة .lightweight إلى الزر. أزرار خفيفة الوزن خفية وليس لها حدود حتى تحوم.
يمكنك تعطيل زر عن طريق إضافة سمة disabled قياسية إلى الزر.
يمكنك عرض زر على أنه يتم الضغط عليه عن طريق إضافة فئة .pressing إلى الزر.
هذا مفيد للأزرار التي يتم تشغيلها بواسطة ضغط مفتاح.
يتم تطبيق أنماط Scrollbar على مستوى العالم ، لكن لديها بادئة -webkit- ، لذلك ستعمل فقط في متصفحات "WebKit" ، بشكل عام ، مثل Chrome و Safari و Opera.
(يمكن تجاوزها مع ::-webkit-scrollbar والمحددات ذات الصلة (ولكن ليس من السهل إعادة تعيينها إلى المتصفح الافتراضي ، ما لم تكن -webkit-appearance: scrollbar يعمل ... todo: SCOPE CSS)
يتم تطبيق أنماط الاختيار على مستوى العالم.
(يمكن تجاوزه مع ::selection (ولكن لا يمكن إعادة تعيينه بسهولة إلى المتصفح الافتراضي ... ما لم يكن مع unset ؟ todo: SCOPE CSS)
MenuBar(menus)ينشئ مكون شريط القائمة.
يجب أن تكون menus كائنًا يحمل صفائف من مواصفات عنصر القائمة ، والتي تم تحديدها بواسطة اسم زر القائمة.
إرجاع كائن مع element خاصية ، والذي يجب عليك بعد ذلك إلحاقها إلى DOM حيث تريده.
انظر الأمثلة في الرمز التجريبي.
elementعنصر DOM الذي يمثل شريط القائمة.
closeMenus()يغلق أي قوائم مفتوحة.
setKeyboardScope(...eventTargets)سيتم التعامل مع المفاتيح الساخنة مثل ALT على مستوى العنصر (العناصر) المعطاة أو هدف (أدوات) الحدث.
بشكل افتراضي ، يكون النطاق هو window (Global) ، لحالة تطبيق صفحة واحدة حيث يكون شريط القائمة في الأعلى. إذا كنت تضع شريط القائمة في نافذة ، فيجب عليك الاتصال بهذا مع عنصر النافذة:
menu_bar . setKeyboardScope ( $window . element ) ;أو الأفضل من ذلك ،
$window . setMenuBar ( menu_bar ) ;الذي يعتني بنطاق لوحة المفاتيح بالنسبة لك ، أثناء إرفاق شريط القائمة بالنافذة.
لاحظ أن بعض سلوك لوحة المفاتيح يتم معالجته دائمًا إذا كان شريط القائمة يحتوي على التركيز.
لاحظ أيضًا بالنسبة للإعدادات المعلقة ، قد تحتاج إلى استدعاء هذا باستخدام $window[0], iframe.contentWindow حاليًا ، ولكن يجب تغيير هذا في المستقبل (يجب أن تكون أحداث لوحة المفاتيح).
info يمكن استخدامها لتنفيذ شريط الحالة. يتم توفير وصف event.detail.description description على سبيل المثال:
menubar . element . addEventListener ( "info" , ( event ) => {
statusBar . textContent = event . detail ?. description || "" ;
} ) ; default-infoتشير إلى أنه ينبغي إعادة تعيين شريط الحالة إلى فارغة أو رسالة افتراضية.
menubar . element . addEventListener ( "default-info" , ( event ) => {
statusBar . textContent = "" ;
// or:
statusBar . textContent = "For Help, click Help Topics on the Help Menu." ;
// like in MS Paint (and JS Paint)
// or:
statusBar . textContent = "For Help, press F1." ;
// like WordPad
// or perhaps even:
statusBar . innerHTML = "For Help, <a href='docs'>click here</a>" ;
// Note that a link is not a common pattern, and it could only work for the default text;
// for menu item descriptions the message in the status bar is transient, so
// you wouldn't be able to reach it to click on it.
} ) ; مواصفات عنصر القائمة هي إما MENU_DIVIDER (ثابت يشير إلى قاعدة أفقية) ، أو مواصفات مجموعة الراديو ، أو كائن مع الخصائص التالية:
label : تسمية للعنصر ؛ تحدد ampersands مفاتيح الوصول (لاستخدام ampersand الحرفي ، والاستخدام && )shortcutLabel (اختياري): اختصار لوحة المفاتيح لإظهار العنصر ، مثل "Ctrl+A" (ملاحظة: تحتاج إلى الاستماع إلى الاختصار بنفسك ، على عكس مفاتيح الوصول)ariaKeyShortcuts (اختياري): aria-keyshortcuts للعنصر ، مثل "Control+A Meta+A" ، لقراء الشاشة. "Ctrl" غير صالح (يجب أن تتهجى ذلك) ، ومن الأفضل توفير بديل لـ MacOS ، عادةً مع مفتاح الأوامر المكافئ ، باستخدام "Meta" (و event.metaKey ).action (اختياري): وظيفة للتنفيذ عند النقر فوق العنصر (يمكن فقط تحديد إما action أو checkbox )checkbox (اختياري): كائن يحدد أن هذا العنصر يجب أن يتصرف كعلب اختيار.check من هذا الكائن وظيفة تتحقق مما إذا كان يجب التحقق من العنصر أم لا ، والعودة true للتحقق false من أجل عدم التحقق منه. يا له من اسم مقطوع.toggle العقار وظيفة تبديل حالة الخيار ، ومع ذلك تخزينها ؛ استدعاء عند النقر.enabled (اختياري): يمكن أن يكون false لتعطيل العنصر دون قيد أو شرط ، أو وظيفة تحدد ما إذا كان ينبغي تمكين العنصر ، مع إرجاع true لتمكين العنصر ، false في تعطيله.submenu (اختيارية): مجموعة من مواصفات عنصر القائمة لإنشاء قائمة فرعيةdescription (اختياري): لتنفيذ شريط الحالة ؛ ينبعث حدث info عند التدحرج على العنصر بهذا الوصفvalue (اختياري): بالنسبة لعناصر الراديو ، قيمة العنصر ؛ يمكن أن يكون أي نوع ، ولكن يتم استخدام === لتحديد ما إذا كان يتم فحص العنصر.مواصفات مجموعة الراديو هي كائن له الخصائص التالية:
radioItems : مجموعة من مواصفات عنصر القائمة لإنشاء مجموعة زر الراديو. على عكس submenu ، يتم تضمين العناصر مباشرة في هذه القائمة. يوصى بفصل مجموعة الراديو عن عناصر القائمة الأخرى باستخدام MENU_DIVIDER .getValue : وظيفة يجب أن تُرجع قيمة عنصر الراديو المحدد.setValue : وظيفة يجب أن تغير الحالة إلى القيمة المحددة ، بطريقة خاصة بالتطبيق.ariaLabel (اختياري): سلسلة لاستخدامها كـ aria-label لمجموعة الراديو (للوصول إلى قارئ الشاشة)يمكن التنقل في القوائم مع مفاتيح الساخنة السياقية المعروفة باسم مفاتيح الوصول .
ضع ampersand قبل حرف في زر القائمة أو تسمية عنصر القائمة لجعله مفتاح الوصول. لدى Microsoft وثائق حول مفاتيح الوصول ، بما في ذلك إرشادات لاختيار مفاتيح الوصول. عموما الحرف الأول هو خيار جيد.
إذا لم يحدد عنصر القائمة مفتاح الوصول ، فيمكن استخدام الحرف الأول من الملصق للوصول إليه.
بالنسبة لأزرار القائمة ، تحتاج إلى الضغط على ALT عند الضغط على مفتاح الوصول إلى الزر ، ولكن بالنسبة لعناصر القائمة في المنبثقة القائمة ، يجب عليك الضغط على المفتاح مباشرة ، حيث ستغلق ALT القوائم.
إذا كان هناك العديد من عناصر القائمة مع مفتاح الوصول نفسه ، فسيتم تدويرها بينها دون تفعيلها. يجب أن تحاول جعل مفاتيح الوصول فريدة من نوعها ، بما في ذلك بين مفاتيح الوصول المحددة والأحرف الأولى لعناصر القائمة دون تحديد مفاتيح الوصول. (لوحظ هذا السلوك في Windows 98 ، في قائمة Explorer المفضلة ، حيث يمكنك إنشاء مرجعية مع الحرف الأول الذي يطابق مفاتيح الوصول لعناصر القائمة الأخرى.)
يوجد كائن AccessKeys الذي تم تصديره بواسطة MenuBar.js ، مع وظائف للتعامل مع مفاتيح الوصول:
AccessKeys.escape(label)يهرب ampersands في الملصق المحدد ، بحيث لا يتم تفسيرها على أنها مفاتيح الوصول.
هذا مفيد للقوائم الديناميكية ، مثل قائمة التاريخ التي تستخدم عناوين الصفحات كعلامات. أنت لا تريد أن تفسر ampersands بشكل زائف على أنها مفاتيح الوصول ، أو أن يتم تفسير ampersands المزدوجة على أنها ampersand واحدة.
AccessKeys.unescape(label)un-escapes جميع ampersands مزدوجة في الملصق.
لتقديم ، استخدم toHTML أو toFragment بدلاً من ذلك.
AccessKeys.has(label)إرجاع صحيح إذا كان الملصق لديه مفتاح الوصول.
AccessKeys.get(label)إرجاع مفتاح الوصول للتسمية المحددة ، أو NULL إذا لم يكن هناك.
MenuBar يتعامل مع مفاتيح الوصول تلقائيًا ، ولكن إذا كنت تضمن مفاتيح الوصول لعناصر واجهة المستخدم الأخرى ، فأنت بحاجة إلى التعامل معها بنفسك ، ويمكنك استخدام ذلك بدلاً من ترميز مفتاح الوصول ، لذلك لا يلزم تغييره في مكانين.
AccessKeys.remove(label) يزيل مؤشر مفتاح الوصول ( & ) من الملصق ، و un-escapes أي ampersands مزدوجة. يزيل أيضًا مؤشر مفتاح الوصول الأبوي ، مثل "(& n)" ، كحالة خاصة.
AccessKeys.toText(label) يزيل مؤشر مفتاح الوصول ( & ) من الملصق ، و un-escapes أي ampersands مزدوجة. هذا يشبه toHTML ولكن للنص العادي.
ملاحظة : على الرغم من أن مفاتيح الوصول غالبًا ما تكون جزءًا من كلمة ، مثل "& new" ، في الترجمات ، غالبًا ما يتم الإشارة إليها بشكل منفصل ، مثل "새로 만들기 (& n)" ، لأن مفتاح الوصول يبقى كما هو ، لكن الرسالة لم تعد جزءًا من الكلمة (أو حتى الأبجدية). لا تزيل هذه الوظيفة سلاسل مثل "(& n)" ، وسوف تزيل فقط "&" وترك "새로 만들기 (n)". إذا كنت تريد هذا السلوك ، فاستخدم AccessKeys.remove(label) .
AccessKeys.toHTML(label) إرجاع HTML (مع الهروب المناسب) مع مفتاح الوصول كعنصر <span class='menu-hotkey'> .
ملاحظة الأمان : من الآمن استخدام نتيجة هذه الوظيفة في محتوى عنصر HTML ، حيث يهرب من الملصق. ليس من الآمن استخدام قيمة السمة ، ولكن هذا ليس الاستخدام المقصود.
ملاحظة التخطيط : قد ترغب في إحياء النتيجة بـ <span style="white-space: pre"> لمنع المساحة البيضاء من الانهيار إذا كان مفتاح الوصول بجوار المساحة.
AccessKeys.toFragment(label) إرجاع DocumentFragment مع مفتاح الوصول كعنصر <span class='menu-hotkey'> .
ملاحظة التخطيط : قد ترغب في إحياء النتيجة بـ <span style="white-space: pre"> لمنع المساحة البيضاء من الانهيار إذا كان مفتاح الوصول بجوار المساحة.
$Window(options)ينشئ مكون نافذة يمكن سحبه حوله ، ويحضر إلى الأمام عند النقر عليه وإغلاقه. يمكن إنشاء أنواع مختلفة من النوافذ بخيارات مختلفة. لاحظ أن التركيز يلف ضمن محتوى النافذة.
إرجاع كائن jQuery مع طرق وخصائص إضافية (انظر أدناه ، بعد الخيارات).
يمكن الوصول إلى عقدة DOM باستخدام $window.element ، ويمكن الوصول إلى كائن $Window من عقدة DOM مع element.$window .
|
إرجاع كائن jQuery بطرق وخصائص إضافية:
title(text) يعين العنوان ، أو إذا لم يتم تمرير text ، بإرجاع العنوان الحالي للنافذة.
close(force=false)يغلق النافذة.
إذا كانت force true ، فلن ينبعث حدث "إغلاق" ، وسيتم إغلاق النافذة على الفور.
focus()يحاول تركيز شيء ما داخل النافذة ، في ترتيب الأولوية هذا:
class="default"$window.$content ) blur()يزيل التركيز من النافذة. إذا كان التركيز خارج النافذة ، فسيتم تركه دون تغيير.
minimize() يقلل النافذة. إذا تم تعريف $window.task.$task ، فستستخدم ذلك كهدف لتقليل إلى الحد الأدنى ، وإلا فإن النافذة ستقلل إلى أسفل الشاشة.
السلوك الحالي هو أنه يبطح التقليل. هذا قد يتغير في المستقبل.
maximize() يزيد النافذة. أثناء تعظيمه ، ستستخدم النافذة position: fixed ، لذلك لن يتم التمرير مع الصفحة.
السلوك الحالي هو أنه يبطح تعظيم. هذا قد يتغير في المستقبل. أيضًا ، إذا تم تقليله ، فسيتم استعادته بدلاً من تعظيمه. في الأساس ، يفعل ما يفعله زر زيادة القصوى ، بدلاً من مجرد ما يقترحه اسم الطريقة.
unminimize() خاص: لا تستخدم هذا. استخدم restore() بدلاً من ذلك.
يستعيد النافذة من الحالة المصورة.
restore()يعيد النافذة من الحالة الصحيح أو المكررة إلى الحد الأقصى. إذا لم يتم تقليل النافذة أو تعظيمها ، فإن هذه الطريقة لا تفعل شيئًا.
center()تركز النافذة في الصفحة. يجب عليك استدعاء هذا بعد تقديم محتويات النافذة بالكامل ، أو قمت بتعيين حجم ثابت للنافذة.
إذا كان لديك صور في النافذة ، فانتظر حتى يتم تحميلها قبل إظهار النافذة وتوسيطها ، أو تحديد حجم ثابت للصور.
applyBounds()يناسب النافذة داخل الصفحة إذا كانت خارج الشاشة جزئيًا. (لا تقل حجم النافذة إذا كانت كبيرة جدًا ؛ فسوف تنطلق من اليمين والسفلي من الشاشة.)
bringTitleBarInBounds()تعيد المواطن إلى النافذة بحيث يكون شريط العنوان ضمن حدود الصفحة ، بحيث يمكن سحبه.
bringToFront() يجلب النافذة إلى الأمام عن طريق ضبط z-index على أكبر من أي z-index الذي يستخدمه نظام الريح.
setDimensions({ innerWidth, innerHeight, outerWidth, outerHeight }) يحدد حجم النافذة. تمرير { innerWidth, innerHeight } لتحديد الحجم من حيث محتوى النافذة ، أو { outerWidth, outerHeight } لتحديد الحجم بما في ذلك إطار النافذة.
(قد يتم توسيع هذا في المستقبل للسماح بوضع الموضع أيضًا ...)
setIcons(icons) يغير أيقونة (ق) من النافذة. icons هي بنفس تنسيق options.icons .
setTitlebarIconSize(size)يحدد حجم أيقونة شريط عنوان النافذة ، واختيار أقرب حجم متاح.
getTitlebarIconSize()إرجاع حجم أيقونة شريط عنوان النافذة.
getIconAtSize(size) يختار أقرب حجم أيقونة متاح ، ويعيد عقدة DOM فريدة من نوعها (أي استنساخ) ، أو null إذا لم يتم تعريف أيقونات.
يمكن استخدام هذا لتمثيل النافذة في شريط المهام.
setMenuBar(menuBar)قم بإلحاق شريط القائمة إلى النافذة ، ويقوم بتعيين نطاق لوحة المفاتيح لمفاتيح شريط القائمة إلى النافذة.
يمكن استدعاؤها مع null لإزالة شريط القائمة.
setMinimizeTarget(minimizeTargetElement) يمثل الهدف التقليل (زر شريط المهام) النافذة عند التقليل منها ، ويتم استخدامها في التقليل إلى الحد الأدنى والاستعادة. إذا كان minimizeTargetElement null ، فسيتم تقليل النافذة إلى أسفل الشاشة (الافتراضي).
$Button(text, action)ينشئ زر في منطقة محتوى النافذة. إنه يغلق النافذة تلقائيًا عند النقر عليه. لا توجد طريقة (جيدة) لمنع ذلك ، لأنها مخصصة فقط لحوار الحوار.
إذا كنت بحاجة إلى أي سلوك آخر ، فما عليك سوى إنشاء <button> وأضفه إلى منطقة محتوى النافذة.
إرجاع كائن jQuery.
addChildWindow($window)خاص: لا تستخدم هذا.
يحدد نافذة كطفل. بالنسبة لنظام التشغيل Windows للأدوات ، ستتم مشاركة حالة التركيز مع النافذة الأصل.
يتم استخدام هذا داخليًا عند تعيين options.parentWindow عند إنشاء نافذة.
onFocus(listener)يدعو المستمع عندما تركز النافذة (بصريًا؟).
إرجاع وظيفة لإزالة المستمع.
onBlur(listener)يدعو المستمع عندما تفقد النافذة (بصريًا؟) التركيز.
إرجاع وظيفة لإزالة المستمع.
onClosed(listener)يدعو المستمع عند إغلاق النافذة (بعد انبعاث الحدث القريب ، وإذا لم يتم منعه).
إرجاع وظيفة لإزالة المستمع.
onBeforeClose(listener) يدعو المستمع قبل إغلاق النافذة. إذا استدعى المستمع event.preventDefault() ، فلن يتم إغلاق النافذة.
إرجاع وظيفة لإزالة المستمع.
هذا الحدث مفيد للتأكيد مع المستخدم قبل إغلاق نافذة ، على سبيل المثال.
$window.close(true) يمكن استخدامها لتجاوز هذا الحدث (والتأكيد) عندما يجب إغلاق النافذة حقًا.
إذا كنت لن تمنع إغلاق النافذة ، فيجب عليك على الأرجح استخدام الحدث closed بدلاً من ذلك ، لأنه ، من الناحية الافتراضية ، يمكن أن يمنع مستمع آخر الإغلاق بعد المستمع ، مما يؤدي إلى التنظيف المبكر.
onBeforeDrag(listener) يدعو المستمع قبل سحب النافذة بواسطة شريط العنوان. إذا استدعى المستمع event.preventDefault() ، فسيتم منع السحب.
إرجاع وظيفة لإزالة المستمع.
يتيح هذا الحدث تجاوز سلوك السحب للألوان والأدوات Windows في JS Paint.
onTitleChange(listener)يستدعي المستمع عندما يتغير عنوان النافذة.
إرجاع وظيفة لإزالة المستمع.
يمكن استخدام هذا الحدث لتحديث تسمية زر شريط المهام.
onIconChange(listener)يستدعي المستمع عندما يتغير أيقونة النافذة.
إرجاع وظيفة لإزالة المستمع.
يمكن استخدام هذا الحدث لتحديث أيقونة زر شريط المهام. استخدم $window.getIconAtSize(size) للحصول على أيقونة مناسبة.
closedما إذا كانت النافذة مغلقة.
icons أيقونات النافذة بأحجام مختلفة ، كما تم تعيينها بواسطة options.icons أو setIcons() .
elementsكائن يحتوي على إشارات إلى عناصر النافذة.
content (htmlelement)منطقة محتوى النافذة.
titlebar (htmlelement)شريط العنوان للنافذة ، بما في ذلك العنوان ، وأزرار النوافذ ، وربما رمز.
_title_area (htmlelement)عنصر غلاف حول العنوان.
خاص: لا تستخدم هذا. استخدم elements.titlebar أو elements.title بدلاً من ذلك ، إن أمكن.
title (htmlelement)عنوان النافذة.
closeButton (Htmlbuttonelement)زر إغلاق النافذة.
minimizeButton (HTMLBUTTONELEMENT)زر تقليل النافذة.
maximizeButton (HTMLBUTTONELEMENT)زر زيادة النافذة.
$content كائن jQuery.
حيث يمكنك إلحاق المحتويات على النافذة.
$titlebar كائن jQuery.
شريط العنوان للنافذة ، بما في ذلك العنوان ، وأزرار النوافذ ، وربما أيقونة.
$title_area خاص: لا تستخدم هذا. استخدم $title أو $titlebar بدلاً من ذلك ، إن أمكن.
كائن jQuery.
غلاف حول العنوان.
$title كائن jQuery.
الجزء العنوان من شريط العنوان.
$x كائن jQuery.
زر الإغلاق.
$minimize كائن jQuery.
زر الحد الأدنى.
$maximize كائن jQuery.
زر تعظيم.
$iconخاص: لا تستخدم هذا.
كائن jQuery.
أيقونة شريط العنوان.
elementعنصر DOM الذي يمثل النافذة.
close تم إهمالها: استخدم طريقة onBeforeClose بدلاً من ذلك.
يمكن استخدامها لمنع إغلاق نافذة ، مع event.preventDefault() . نظرًا لوجود العديد من المستمعين ، ويمكن أن يمنع مستمع آخر الإغلاق ، إذا كنت ترغب في اكتشاف متى يتم إغلاق النافذة فعليًا ، استخدم الحدث closed .
closed تم إهماله: استخدم الطريقة onClosed بدلاً من ذلك.
ينبعث هذا الحدث عند إغلاق النافذة. لا يمكن منعه.
window-drag-start تم إهمالها: استخدم طريقة onBeforeDrag بدلاً من ذلك.
يمكن استخدامها لمنع سحب نافذة ، مع event.preventDefault() .
title-change تم إهمالها: استخدم طريقة onTitleChange بدلاً من ذلك.
يمكن استخدامها لتحديث تسمية زر شريط المهام.
icon-change تم إهمالها: استخدم طريقة onIconChange بدلاً من ذلك.
يمكن استخدامها لتحديث أيقونة زر شريط المهام. استخدم $window.getIconAtSize(size) للحصول على أيقونة مناسبة.
بخلاف center() ، لا يوجد واجهة برمجة تطبيقات على وجه التحديد لتحديد المواقع.
يمكنك استخدام $($window.element).css({ top: "500px", left: "500px" }) لتعيين موضع النافذة باستخدام طريقة css() jQuery ، أو استخدام آخر:
$window . element . style . top = "500px" ;
$window . element . style . left = "500px" ; يمكنك أيضًا تعيين position على fixed أو absolute لوضع النافذة بالنسبة إلى منفذ العرض أو أقرب سلف موضعي ، على التوالي.
إذا كنت ترغب في وضع نافذة نسبة إلى نافذة أخرى ، فيمكنك استخدام $otherWindow.element.getBoundingClientRect() للحصول على المستطيل المحيط بالنافذة الأخرى ، ثم استخدام ذلك لوضع النافذة. هذا هو API DOM مدمج. على سبيل المثال:
const otherRect = $otherWindow . element . getBoundingClientRect ( ) ;
$window . element . top = ` ${ otherRect . top } px` ;
$window . element . left = ` ${ otherRect . right + 10 } px` ; !important ) لوضع النافذة ، لأن المكتبة تستخدم أنماطًا مضمنة لوضع النافذة ، والتي لها الأسبقية.setDimensions() في المستقبل للسماح بوضع النافذة بالإضافة إلى تغيير حجمها ، أو إضافة طريقة setPosition() .options.constrainRect . يحتوي parse-theme.js على وظائف لتحليل الموضوعات وتطبيقها.
parseThemeFileString(themeString)توصيف سلسلة ملف INI في خصائص CSS.
يقوم تلقائيًا بإعداد رسومات السمة الديناميكية ، ويتضمنها في خصائص CSS.
applyCSSProperties(cssProperties, {element=document.documentElement, recurseIntoIframes=false}) cssProperties هو كائن له خصائص وقيم CSS. يمكن أن يكون أيضا كائن CSSStyleDeclaration .
element هو العنصر لتطبيق الخصائص على.
إذا كانت recurseIntoIframes صحيحة ، فسيتم تطبيق الخصائص على جميع عناصر <iframe> داخل العنصر أيضًا. هذا يعمل فقط مع IFRAMES الأصل من نفس.
renderThemeGraphics(cssProperties)يمكن استخدامها لتحديث رسومات السمة (أيقونات شريط التمرير ، وما إلى ذلك) لقسم معين من الصفحة. يستخدم من قبل العرض التوضيحي لإظهار الاختلافات.
إرجاع خصائص CSS التي تمثل رسومات السمة المقدمة.
element . style . setProperty ( '--scrollbar-size' , '30px' ) ;
applyCSSProperties ( renderThemeGraphics ( getComputedStyle ( element ) ) , { element } ) ; makeThemeCSSFile(cssProperties)تصدير ملف CSS لموضوع. يفترض أن رسومات السمة قد تم تقديمها بالفعل. يتضمن تعليق "ملف تم إنشاؤه".
makeBlackToInsetFilter()تهيئة مرشح SVG الذي يمكن استخدامه لجعل الرموز تظهر معطلًا. قد لا يعمل مع جميع الرموز ، لأنه يستخدم الأجزاء السوداء من الصورة لتشكيل شكل.
الاستخدام من CSS:
button : disabled . icon {
filter : saturate ( 0 % ) opacity ( 50 % ); /* fallback until SVG filter is initialized */
filter : url ( "#os-gui-black-to-inset-filter" );
}مرخصة بموجب ترخيص معهد ماساتشوستس للتكنولوجيا ، راجع الترخيص للحصول على التفاصيل.
قم بتثبيت node.js إذا لم يكن لديك بالفعل.
استنساخ المستودع ، ثم في دليل المشروع تشغيل npm i لتثبيت التبعيات. قم أيضًا بتشغيل npm i عند سحب التغييرات من المستودع ، في حالة وجود تغييرات على التبعيات.
تشغيل npm start في فتح خادم تطوير. سيفتح صفحة تجريبية في متصفحك الافتراضي. سيتم إعادة ترجمة التغييرات على المكتبة تلقائيًا ، وسيتم إعادة تحميل الصفحة تلقائيًا.
قم بتشغيل npm run lint لتشغيل الفحص والتحقق الإملائي (وأي مهام ربط أخرى).
تشغيل npm test لتشغيل الاختبارات. يحفظ هذا أيضًا تقارير التغطية إلى دليل coverage ، ولكن لاحظ أنه يسجل فقط رمز اختبارات الوحدة ، أي رمز تم استيراده مباشرةً في الاختبارات ، وليس التعليمات البرمجية المحملة في سياق الصفحة ، لأن هذا يتطلب المزيد من الإعداد للأجهزة.
من الجيد إغلاق الخادم عند تحديث أو تثبيت التبعيات ؛ وإلا فقد تصطدم بقضايا EPERM.
تتم كتابة الأنماط مع postcss ، ل mixins وغيرها من التحويلات.
الموصى به: قم بتثبيت مكون إضافي لغة postcss للمحرر الخاص بك ، مثل دعم لغة postcss لـ VS Code.
يوجد حاليًا بعض CSS التي يجب تجديدها يدويًا في المتصفح ونسخها في ملفات CSS الخاصة بالموضوع.
في المستقبل ، يمكن القيام بذلك باستخدام محلل بناء جملة PostCSS مخصص لملفات. theme/.themepack ، وربما SVG بدلاً من أي رسومات نقطية لتجنب الحاجة إلى node-canvas (التبعيات الأصلية هي ألم). أو ربما upng.js ومعالجة البكسل العادي.
