DWZ搭建頁面快速入門筆記

時間 2019-11-24

標籤 dwz 搭建頁面快速入門筆記欄目 JQuery 简体版

原文原文鏈接

DWZ 是一個開源的基於 jQuery 的 UI 框架，範例地址請參考 http://j-ui.com/，其框架源碼下載地址爲：http://code.google.com/p/dwz/downloads/list，當前最新版本爲 1.4.4。javascript

　　下載完成目錄以下：css

　　其中 index.html 是範例主頁面，雙擊瀏覽便可本地瀏覽 DWZ 全部範例。html

　　下面咱們使用 DWZ 搭建頁面框架步驟java

　　一、在電腦任意位置新建一個文件夾 First，而後在 First 下面建立一個 html 頁面，Welcome.html。jquery

　　二、在 First 文件下新建一個 scripts 文件夾，而後把剛剛下載的 dwz/bin 目錄下面的 dwz.min.js 拷貝、dwz/js 目錄 speedup.js 及 jquery-1.7.2.min.js 的到裏面。框架

　　三、拷貝 dwz 目錄下的 themes 文件夾，dwz.frag.xml 文件拷貝到 First 文件夾下。ide

　　四、在頁面 Welcome.html 添加代碼以下：ui

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">google

　　<html xmlns="http://www.w3.org/1999/xhtml">spa

　　<head>

　　<title>簡單實用國產 jQuery UI 框架 - DWZ 富客戶端框架(J-UI.com)</title>

<!--[if IE]>

　　<![endif]-->

　　$(function () {

　　DWZ.init ("dwz.frag.xml"， {

　　//loginUrl: "login_dialog.html"， loginTitle: "登陸"， // 彈出登陸對話框

　　// loginUrl:"login.html"， // 跳到登陸頁面

　　statusCode: { ok: 200, error: 300, timeout: 301 }， //【可選】

　　pageInfo: { pageNum: "pageNum"， numPerPage: "numPerPage"， orderField: "orderField"， orderDirection: "orderDirection" }， //【可選】

　　debug: false, // 調試模式【truefalse】

　　callback: function () {

　　initEnv ();

　　$("#themeList") .theme ({ themeBase: "themes" }); // themeBase 相對於 index 頁面的主題 base 路徑

　　}

　　});

　　</script>

　　</head>

　　<div >

　　<div>

　　</div>

　　<div >

　　<h2>

　　主菜單</h2>

　　<div>

　　收縮</div>

　　</div>

　　<div >

　　<h2>

　　<span>Folder</span>功能管理</h2>

　　</div>

　　<div >

　　</div>

　　<div >

　　<h2>

　　<span>Folder</span>帳號導入</h2>

　　</div>

　　<div >

　　</div>

　　<div >

　　<h2>

　　<span>Folder</span>導航管理</h2>

　　</div>

　　<div >

　　</div>

　　<div >

　　<ul >

　　</ul>

　　</div>

　　<div >

　　left</div>

　　<div >

　　right</div>

　　<div >

　　more</div>

　　</div>

　　<ul >

　　</ul>

　　<div >

　　個人主頁

　　</div>

　　<div >

　　</div>

　　</body>

　　</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。