os gui
v0.7.3 Taskbarless Minimization
ไลบรารีสำหรับการเลียนแบบระบบปฏิบัติการกราฟิกอินเทอร์เฟซผู้ใช้บนเว็บ
โดยเฉพาะ Windows 98 - อย่างน้อยตอนนี้; มันสามารถขยายได้ในอนาคต
ห้องสมุดนี้ให้อำนาจ 98.js.org เวอร์ชันบนเว็บของ Windows 98 รวมถึง Paint, Notepad, เครื่องบันทึกเสียงและอื่น ๆ
ดูหน้าแรกสำหรับข้อมูลเพิ่มเติม
แถบเมนูพร้อมรองรับช่องทำเครื่องหมายและรายการวิทยุรัฐที่ปิดการใช้งานเมนูเมนูย่อยคีย์บอร์ดทางลัดและอื่น ๆ
หน้าต่างแอพที่คุณสามารถลากไปรอบ ๆ ขยายย่อปิดและปรับขนาดได้สูงสุด
ตัวแปรไดอะล็อกและหน้าต่างเครื่องมือ
แอนิเมชั่นแถบชื่อบินที่นำทางดวงตาของคุณในระหว่างการเพิ่ม/ลด/คืนค่าสูงสุด
โฟกัสการกักกัน: หากคุณแท็บหรือเปลี่ยนแท็บ+ภายในหน้าต่างมันจะล้อมรอบไปยังการควบคุมครั้งแรก/ครั้งสุดท้าย
รูปแบบปุ่มรวมถึงปุ่มที่มีน้ำหนักเบาปุ่มปิดใช้งานและปุ่มการกระทำเริ่มต้น
รูปแบบ Scrollbar, เฉพาะ WebKit (ในอนาคตอาจมีแถบเลื่อนแบบกำหนดเองตามห้องสมุด Scrollbar ที่ไม่รบกวนหรือสไตล์ ที่รองรับ ห้องสมุดที่คุณคาดว่าจะใช้ห้องสมุดโดยตรง)
มีธีมกับ Windows .theme & .themepack ไฟล์ ที่รันไทม์ !
ดูการสาธิตออนไลน์ที่นี่
ปัจจุบันห้องสมุดนี้ต้องการ jQuery สำหรับการใช้งาน Windowing แถบเมนู ไม่ จำเป็นต้องใช้ jQuery
(ในที่สุดฉันก็ไม่อยากพึ่งพาจนถึงตอนนี้ฉันได้ลบ jQuery ออกจากรหัสเมนู ... )
ไลบรารียังไม่ได้ (ยัง) เป็นไฟล์ที่สะดวก
คุณสามารถ 1. ดาวน์โหลดที่เก็บเป็นไฟล์ zip, 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 สร้างเส้นขอบ 2px สิ่งที่ใส่เข้าไป.outset-deep สร้างเส้นขอบ 2px inset (เช่นปุ่มหรือหน้าต่างหรือป๊อปอัพเมนู).inset-shallow สร้างเส้นขอบ 1px สิ่งที่ใส่เข้าไป.outset-shallow สร้างเส้นขอบเริ่มต้น 1px รูปแบบปุ่มถูกนำไปใช้กับองค์ประกอบ button ทั่วโลก (และหากคุณต้องการรีเซ็ตใหม่โปรดทราบว่าคุณต้องกำจัดองค์ประกอบหลอก ::after เช่นกัน @Todo: ขอบเขต CSS)
ในการสร้างปุ่มสลับให้เพิ่ม. .toggle class ลงในปุ่ม ทำให้มันแสดงตามที่ถูกกดด้วยคลาส .selected (@Todo: เปลี่ยนชื่อสิ่งนี้ .pressed
คุณควรใช้สไตล์ร่วมกับ aria-pressed , aria-haspopup และ/หรือ aria-expanded คุณลักษณะตามความเหมาะสม
คุณสามารถแสดงปุ่มคือการกระทำเริ่มต้นโดยการเพิ่ม .default ลงในปุ่ม โปรดทราบว่าใน Windows 98 สไตล์นี้จะย้ายจากปุ่มไปยังปุ่มไปยังปุ่มโฟกัส กฎของหัวแม่มือคือควรอยู่ในปุ่มที่จะทริกเกอร์ด้วย Enter
คุณสามารถสร้างปุ่มที่มีน้ำหนักเบาได้โดยการเพิ่ม .lightweight ลงในปุ่ม ปุ่มที่มีน้ำหนักเบานั้นบอบบางและไม่มีเส้นขอบจนกว่าจะโฮเวอร์
คุณสามารถปิดการใช้งานปุ่มโดยเพิ่มแอตทริบิวต์ disabled มาตรฐานลงในปุ่ม
คุณสามารถแสดงปุ่มว่าถูกกดได้โดยเพิ่มคลาส .pressing ลงในปุ่ม
สิ่งนี้มีประโยชน์สำหรับปุ่มที่ถูกกระตุ้นโดยการกดแป้น
สไตล์แถบเลื่อนถูกนำไปใช้ทั่วโลก แต่พวกเขามีคำนำหน้า -webkit- ดังนั้นพวกเขาจะทำงานเฉพาะในเบราว์เซอร์ "WebKit-based" โดยทั่วไปเช่น Chrome, Safari และ Opera
(สามารถแทนที่ด้วย ::-webkit-scrollbar และตัวเลือกที่เกี่ยวข้อง (แต่ไม่ได้รีเซ็ตเป็นค่าเริ่มต้นของเบราว์เซอร์ได้อย่างง่ายดายเว้นแต่ -webkit-appearance: scrollbar ทำงาน ... @todo: ขอบเขต CSS)
รูปแบบการเลือกถูกนำไปใช้ทั่วโลก
(สามารถแทนที่ด้วย ::selection (แต่ไม่รีเซ็ตเป็นค่าเริ่มต้นของเบราว์เซอร์ ... เว้นแต่จะมี unset ? @Todo: ขอบเขต CSS)
MenuBar(menus)สร้างองค์ประกอบแถบเมนู
menus ควรเป็นอาร์เรย์การถืออาร์เรย์ของรายการเมนูโดยระบุชื่อปุ่มเมนู
ส่งคืนวัตถุด้วย element คุณสมบัติซึ่งคุณควรต่อท้าย DOM ที่คุณต้องการ
ดูตัวอย่างในรหัสสาธิต
elementองค์ประกอบ DOM ที่แสดงถึงแถบเมนู
closeMenus()ปิดเมนูใด ๆ ที่เปิด
setKeyboardScope(...eventTargets)Hotkeys เช่น Alt จะได้รับการจัดการที่ระดับขององค์ประกอบที่กำหนดหรือเป้าหมายเหตุการณ์
โดยค่าเริ่มต้นขอบเขตคือ window (ทั่วโลก) สำหรับกรณีของแอปพลิเคชันหน้าเดียวที่แถบเมนูอยู่ด้านบน หากคุณวางแถบเมนูไว้ในหน้าต่างคุณควรเรียกสิ่งนี้ด้วยองค์ประกอบของหน้าต่าง:
menu_bar . setKeyboardScope ( $window . element ) ;หรือดีกว่ายัง
$window . setMenuBar ( menu_bar ) ;ซึ่งดูแลขอบเขตแป้นพิมพ์สำหรับคุณในขณะที่แนบแถบเมนูเข้ากับหน้าต่าง
โปรดทราบว่าพฤติกรรมของแป้นพิมพ์บางอย่างจะได้รับการจัดการเสมอหากแถบเมนูมีโฟกัส
หมายเหตุสำหรับ iframes คุณอาจต้องโทรหาสิ่งนี้ด้วย $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 กำหนดคีย์การเข้าถึง (เพื่อใช้แอมป์และตัวอักษรใช้ && )shortcutLabel (เป็นทางเลือก): แป้นพิมพ์ลัดเพื่อแสดงรายการเช่น "Ctrl+a" (หมายเหตุ: คุณต้องฟังทางลัดด้วยตัวเองซึ่งแตกต่างจากปุ่มเข้าถึง)ariaKeyShortcuts (ไม่บังคับ): aria-keyshortcuts สำหรับรายการเช่น "ควบคุม+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_DIVIDERgetValue : ฟังก์ชั่นที่ควรส่งคืนค่าของรายการวิทยุที่เลือกsetValue : ฟังก์ชั่นที่ควรเปลี่ยนสถานะเป็นค่าที่กำหนดด้วยวิธีเฉพาะแอปพลิเคชันariaLabel (ไม่บังคับ): สตริงที่ใช้เป็น aria-label สำหรับกลุ่มวิทยุ (สำหรับการเข้าถึงตัวอ่านหน้าจอ)เมนูสามารถนำทางด้วยปุ่มลัดตามบริบทที่รู้จักกันในชื่อ คีย์การเข้าถึง
วางแอมป์แซนด์ก่อนจดหมายในปุ่มเมนูหรือฉลากรายการเมนูเพื่อให้เป็นปุ่มเข้าถึง Microsoft มีเอกสารเกี่ยวกับคีย์การเข้าถึงรวมถึงแนวทางในการเลือกคีย์การเข้าถึง โดยทั่วไปจดหมายฉบับแรกเป็นตัวเลือกที่ดี
หากรายการเมนูไม่ได้กำหนดคีย์การเข้าถึงตัวอักษรตัวแรกของฉลากสามารถใช้เพื่อเข้าถึงได้
สำหรับปุ่มเมนูคุณต้องค้าง Alt เมื่อกดปุ่ม Access ของปุ่ม แต่สำหรับรายการเมนูในเมนูป๊อปอัปคุณต้องกดปุ่มโดยตรงเนื่องจาก Alt จะปิดเมนู
หากมีรายการเมนูหลายรายการที่มีคีย์การเข้าถึงเดียวกันมันจะหมุนเวียนระหว่างพวกเขาโดยไม่ต้องเปิดใช้งาน คุณควรพยายามทำให้คีย์การเข้าถึงไม่ซ้ำกันรวมถึงระหว่างคีย์การเข้าถึงที่กำหนดและตัวอักษรตัวแรกของรายการเมนูโดยไม่ต้องใช้คีย์การเข้าถึงที่กำหนดไว้ (พฤติกรรมนี้สังเกตได้ใน Windows 98 ในเมนูรายการโปรดของ Explorer ซึ่งคุณสามารถทำบุ๊กมาร์กด้วยตัวอักษรตัวแรกที่ตรงกับคีย์การเข้าถึงของรายการเมนูอื่น ๆ )
มีวัตถุ AccessKeys ที่ส่งออกโดย MenuBar.js พร้อมฟังก์ชั่นสำหรับการจัดการกับคีย์การเข้าถึง:
AccessKeys.escape(label)หลบหนีแอมป์แซนด์ในฉลากที่กำหนดเพื่อไม่ให้ตีความว่าเป็นปุ่มเข้าถึง
สิ่งนี้มีประโยชน์สำหรับเมนูแบบไดนามิกเช่นเมนูประวัติที่ใช้ชื่อหน้าเป็นป้ายกำกับ คุณไม่ต้องการให้แอมป์แซนด์ตีความอย่างน่าเกรงขามว่าเป็นปุ่มเข้าถึงหรือแอมป์สองตัวที่ตีความว่าเป็นแอมป์เดียว
AccessKeys.unescape(label)un-ecapes แอมป์สองตัวทั้งหมดในฉลาก
สำหรับการแสดงผลให้ใช้ toHTML หรือ toFragment แทน
AccessKeys.has(label)ส่งคืนจริงถ้าฉลากมีคีย์การเข้าถึง
AccessKeys.get(label)ส่งคืนคีย์การเข้าถึงสำหรับฉลากที่กำหนดหรือเป็นโมฆะหากไม่มี
MenuBar จัดการคีย์การเข้าถึงโดยอัตโนมัติ แต่ถ้าคุณรวมปุ่มเข้าถึงสำหรับองค์ประกอบ UI อื่น ๆ คุณต้องจัดการด้วยตัวเองและคุณสามารถใช้สิ่งนี้ได้มากกว่าการเข้ารหัสคีย์การเข้าถึงดังนั้นจึงไม่จำเป็นต้องเปลี่ยนในสองแห่ง
AccessKeys.remove(label) ลบตัวบ่งชี้คีย์การเข้าถึง ( & ) ออกจากฉลากและยกเลิกการหลบหนีแอมป์สองเท่า นอกจากนี้ยังลบตัวบ่งชี้คีย์การเข้าถึงแบบ parenthetical เช่น "(& n)" เป็นกรณีพิเศษ
AccessKeys.toText(label) ลบตัวบ่งชี้คีย์การเข้าถึง ( & ) ออกจากฉลากและยกเลิกการหลบหนีแอมป์สองเท่า นี่เป็นเหมือน toHTML แต่สำหรับข้อความธรรมดา
หมายเหตุ : ในขณะที่คีย์เข้าถึงมักจะเป็นส่วนหนึ่งของคำเช่น "& ใหม่" ในการแปลพวกเขามักจะระบุแยกต่างหากเช่น "새로 (& 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)สร้างส่วนประกอบหน้าต่างที่สามารถลากไปรอบ ๆ และนำมาที่ด้านหน้าเมื่อคลิกและปิด Windows ประเภทต่าง ๆ สามารถสร้างได้ด้วยตัวเลือกที่แตกต่างกัน โปรดทราบว่าโฟกัสจะล้อมรอบเนื้อหาของหน้าต่าง
ส่งคืนวัตถุ 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 ใด ๆ ที่ใช้โดยระบบ windowing
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)ส่วนตัว: อย่าใช้สิ่งนี้
กำหนดหน้าต่างตอนเป็นเด็ก สำหรับหน้าต่างเครื่องมือสถานะโฟกัสจะถูกแชร์กับหน้าต่างหลัก
สิ่งนี้ถูกใช้ภายในเมื่อคุณตั้ง options.parentWindow เมื่อสร้างหน้าต่าง
onFocus(listener)โทรหาผู้ฟังเมื่อหน้าต่าง (มองเห็น?) มุ่งเน้น
ส่งคืนฟังก์ชั่นเพื่อลบผู้ฟัง
onBlur(listener)โทรหาผู้ฟังเมื่อหน้าต่าง (มองเห็น?) สูญเสียโฟกัส
ส่งคืนฟังก์ชั่นเพื่อลบผู้ฟัง
onClosed(listener)โทรหาผู้ฟังเมื่อปิดหน้าต่าง (หลังจากเหตุการณ์ปิดถูกปล่อยออกมาและหากไม่ได้ป้องกัน)
ส่งคืนฟังก์ชั่นเพื่อลบผู้ฟัง
onBeforeClose(listener) เรียกผู้ฟังก่อนปิดหน้าต่าง หากผู้ฟังเรียก event.preventDefault() หน้าต่างจะไม่ถูกปิด
ส่งคืนฟังก์ชั่นเพื่อลบผู้ฟัง
เหตุการณ์นี้มีประโยชน์สำหรับการยืนยันกับผู้ใช้ก่อนปิดหน้าต่างตัวอย่างเช่น
$window.close(true) สามารถใช้เพื่อข้ามเหตุการณ์นี้ (และการยืนยัน) เมื่อหน้าต่างควรปิดจริงๆ
หากคุณจะไม่ป้องกันการปิดหน้าต่างคุณควรใช้เหตุการณ์ closed แทนเนื่องจากสมมุติฐานผู้ฟังรายอื่นสามารถป้องกันการปิด หลังจาก ผู้ฟังของคุณนำไปสู่การทำความสะอาดก่อนวัยอันควร
onBeforeDrag(listener) เรียกผู้ฟังก่อนที่หน้าต่างจะถูกลากโดยแถบชื่อเรื่อง หากผู้ฟังโทรหา event.preventDefault() การลากจะถูกป้องกัน
ส่งคืนฟังก์ชั่นเพื่อลบผู้ฟัง
เหตุการณ์นี้ช่วยให้เอาชนะพฤติกรรมการลากของสีและเครื่องมือเครื่องมือใน JS Paint
onTitleChange(listener)เรียกผู้ฟังเมื่อชื่อของหน้าต่างเปลี่ยนไป
ส่งคืนฟังก์ชั่นเพื่อลบผู้ฟัง
เหตุการณ์นี้สามารถใช้เพื่ออัปเดตฉลากของปุ่ม TaskBar
onIconChange(listener)เรียกผู้ฟังเมื่อไอคอนของหน้าต่างเปลี่ยนไป
ส่งคืนฟังก์ชั่นเพื่อลบผู้ฟัง
เหตุการณ์นี้สามารถใช้เพื่ออัปเดตไอคอนของปุ่ม TaskBar ใช้ $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() ไม่มี API โดยเฉพาะสำหรับการวางตำแหน่งหน้าต่าง
คุณสามารถใช้ $($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() เพื่อรับสี่เหลี่ยมผืนผ้าขอบเขตของหน้าต่างอื่นแล้วใช้เพื่อวางตำแหน่งหน้าต่าง นี่คือ DOM API ในตัว ตัวอย่างเช่น:
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" );
}ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT ดูใบอนุญาตสำหรับรายละเอียด
ติดตั้ง node.js หากคุณยังไม่มี
โคลนพื้นที่เก็บข้อมูลจากนั้นในไดเรกทอรีโครงการเรียกใช้ npm i เพื่อติดตั้งการอ้างอิง ยังเรียกใช้ npm i เมื่อดึงการเปลี่ยนแปลงจากที่เก็บในกรณีที่มีการเปลี่ยนแปลงการพึ่งพา
เรียกใช้ npm start เปิดเซิร์ฟเวอร์การพัฒนา มันจะเปิดหน้าตัวอย่างในเบราว์เซอร์เริ่มต้นของคุณ การเปลี่ยนแปลงของไลบรารีจะถูกรวบรวมใหม่โดยอัตโนมัติและหน้าจะโหลดใหม่โดยอัตโนมัติ
เรียกใช้ npm run lint เพื่อเรียกใช้การตรวจสอบประเภทและการตรวจสอบการสะกด (และงานผ้าสำลีอื่น ๆ )
เรียกใช้ npm test เพื่อเรียกใช้การทดสอบ นอกจากนี้ยังช่วยประหยัดรายงานความครอบคลุมไปยังไดเรกทอรี coverage แต่โปรดทราบว่าเฉพาะบันทึกรหัสที่ครอบคลุมโดยการทดสอบหน่วยเช่นรหัสที่นำเข้าโดยตรงในการทดสอบไม่ใช่รหัสที่โหลดในบริบทของหน้าเนื่องจากต้องมีการตั้งค่าเพิ่มเติมสำหรับเครื่องมือวัด
เป็นความคิดที่ดีที่จะปิดเซิร์ฟเวอร์เมื่ออัปเดตหรือติดตั้งการพึ่งพา มิฉะนั้นคุณอาจพบปัญหา EPERM
สไตล์เขียนด้วย postcss สำหรับ mixins และการแปลงอื่น ๆ
แนะนำ: ติดตั้งปลั๊กอินภาษา PostCSS สำหรับตัวแก้ไขของคุณเช่นการสนับสนุนภาษา POSTCSS สำหรับรหัส VS
ขณะนี้มี CSS บางตัวที่ต้องสร้างใหม่ในเบราว์เซอร์และคัดลอกไปยังไฟล์ CSS เฉพาะธีม
ในอนาคตสิ่งนี้สามารถทำได้ด้วยตัวแยกวิเคราะห์ไวยากรณ์ POSTCSS ที่กำหนดเองสำหรับไฟล์. theme/.heMePack และ SVG แทนกราฟิกแรสเตอร์ใด ๆ เพื่อหลีกเลี่ยงการต้องการ node-canvas (การพึ่งพาดั้งเดิมเป็นความเจ็บปวด) หรืออาจเป็น UPNG.JS และการจัดการพิกเซลธรรมดา
