LJS 控件庫 Dialog 組件完整使用指南

LJS 是一套輕量級的 JavaScript UI 控件庫，其 Dialog 組件提供了豐富的客製化選項，支援模態/非模態視窗、拖曳調整大小、多種預設主題樣式，是構建 Web 應用介面的利器。

核心配置：XML 驅動的聲明式定義

Dialog 的所有外觀與行為參數均透過 XML 配置檔聲明，根節點 <Dialog> 支援以下關鍵屬性：

• Width / Height：視窗寬高
• TitleHeight：標題列高度
• Class：套用的 CSS 類別名稱
• BorderWidth：邊框寬度
• Resizeable：是否允許使用者調整大小

樣式客製化架構

LJS 為 Dialog 的每個組成部分（標題列、關閉按鈕、內容區、邊框等）預定義了獨立的 CSS 類別名稱。開發者可覆寫這些樣式實現任意外觀。庫內建提供兩套經典主題供下載參考：

• ExtJS 風格（TitleHeight=18, BorderWidth=6）
• Windows XP 風格（TitleHeight=26, BorderWidth=4）

快速上手：從建立到控制

// 1. 建立 Dialog 實例
var dialog = LJS.create(
    "LJS.UI.Dialog",  // 控件類型
    "dialog.xml"      // 配置檔 URL
);

// 2. 核心方法控制
dialog.show("center");           // 置中顯示
dialog.show("absolute", 200, 150); // 指定座標顯示
dialog.hide();                   // 隱藏
dialog.resize(500, 400);         // 調整尺寸
dialog.width(); dialog.height(); // 取得外部尺寸
dialog.clientWidth(); dialog.clientHeight(); // 取得客戶區尺寸

實戰提示

配置檔路徑支援相對/絕對 URL。生產環境建議將配置內容內嵌在頁面 <script type="text/xml"> 標籤中，減少 HTTP 請求。若需動態生成 Dialog 內容，可在 show() 前透過 dialog.getContentElement() 取得內容容器進行 DOM 操作。