DWZ如何使用组件~~

最新推荐文章于 2020-12-16 15:29:34 发布

weixin_30695195

最新推荐文章于 2020-12-16 15:29:34 发布

阅读量84

点赞数

文章标签： javascript ui 数据库 ViewUI

原文链接：http://www.cnblogs.com/daisy7/archive/2013/05/07/3064467.html

版权

官方文档关于使用组件已十分详细，但环境配置说的很模糊，综合google回来的多位热心网友的意见终于使用组件成功啦：

1、在使用此框架前把需要的文件准备好(js文件（必须），dwz.frag.xml（必须）和theme（样式，不是必须的~）文件夹里的文件)，然后导入到项目中中，如图：

在项目的一个页面导入项目中需要的所有js文件和[样式文件]，如图：

dwz.frag.xml很重要，是DWZ的核心文件，所有的js文件都是经过他初始化的：

以上是使用此框架的前期准备

在页面中使用如下结构：
<body scroll="no">
<div id="layout">
<div id="navTab" class="tabsPage">

</div>
</div>
</body>

如官方文档中提到使用“tab组件”的方法，只需文档中提到的代码嵌入到中即可。

详细代码：

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=7" />
        <title>简单实用国产jQuery UI框架 - DWZ富客户端框架(J-UI.com)使用组件</title>

        <link href="themes/default/style.css" rel="stylesheet" type="text/css" media="screen"/>
        <link href="themes/css/core.css" rel="stylesheet" type="text/css" media="screen"/>
        <link href="themes/css/print.css" rel="stylesheet" type="text/css" media="print"/>
        <link href="uploadify/css/uploadify.css" rel="stylesheet" type="text/css" media="screen"/>
        <!--[if IE]>
        <link href="themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/>
        <![endif]-->

        <!--[if lte IE 9]>
        <script src="js/speedup.js" type="text/javascript"></script>
        <![endif]-->

        <script src="js/jquery-1.7.2.js" type="text/javascript"></script>
        <script src="js/jquery.cookie.js" type="text/javascript"></script>
        <script src="js/jquery.validate.js" type="text/javascript"></script>
        <script src="js/jquery.bgiframe.js" type="text/javascript"></script>
        <script src="xheditor/xheditor-1.1.14-zh-cn.min.js" type="text/javascript"></script>
        <script src="uploadify/scripts/jquery.uploadify.js" type="text/javascript"></script>

        <!-- svg图表  supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ -->
        <script type="text/javascript" src="chart/raphael.js"></script>
        <script type="text/javascript" src="chart/g.raphael.js"></script>
        <script type="text/javascript" src="chart/g.bar.js"></script>
        <script type="text/javascript" src="chart/g.line.js"></script>
        <script type="text/javascript" src="chart/g.pie.js"></script>
        <script type="text/javascript" src="chart/g.dot.js"></script>

        <script src="js/dwz.core.js" type="text/javascript"></script>
        <script src="js/dwz.util.date.js" type="text/javascript"></script>
        <script src="js/dwz.validate.method.js" type="text/javascript"></script>
        <script src="js/dwz.regional.zh.js" type="text/javascript"></script>
        <script src="js/dwz.barDrag.js" type="text/javascript"></script>
        <script src="js/dwz.drag.js" type="text/javascript"></script>
        <script src="js/dwz.tree.js" type="text/javascript"></script>
        <script src="js/dwz.accordion.js" type="text/javascript"></script>
        <script src="js/dwz.ui.js" type="text/javascript"></script>
        <script src="js/dwz.theme.js" type="text/javascript"></script>
        <script src="js/dwz.switchEnv.js" type="text/javascript"></script>
        <script src="js/dwz.alertMsg.js" type="text/javascript"></script>
        <script src="js/dwz.contextmenu.js" type="text/javascript"></script>
        <script src="js/dwz.navTab.js" type="text/javascript"></script>
        <script src="js/dwz.tab.js" type="text/javascript"></script>
        <script src="js/dwz.resize.js" type="text/javascript"></script>
        <script src="js/dwz.dialog.js" type="text/javascript"></script>
        <script src="js/dwz.dialogDrag.js" type="text/javascript"></script>
        <script src="js/dwz.sortDrag.js" type="text/javascript"></script>
        <script src="js/dwz.cssTable.js" type="text/javascript"></script>
        <script src="js/dwz.stable.js" type="text/javascript"></script>
        <script src="js/dwz.taskBar.js" type="text/javascript"></script>
        <script src="js/dwz.ajax.js" type="text/javascript"></script>
        <script src="js/dwz.pagination.js" type="text/javascript"></script>
        <script src="js/dwz.database.js" type="text/javascript"></script>
        <script src="js/dwz.datepicker.js" type="text/javascript"></script>
        <script src="js/dwz.effects.js" type="text/javascript"></script>
        <script src="js/dwz.panel.js" type="text/javascript"></script>
        <script src="js/dwz.checkbox.js" type="text/javascript"></script>
        <script src="js/dwz.history.js" type="text/javascript"></script>
        <script src="js/dwz.combox.js" type="text/javascript"></script>
        <script src="js/dwz.print.js" type="text/javascript"></script>
        <!--
        <script src="bin/dwz.min.js" type="text/javascript"></script>
        -->
        <script src="js/dwz.regional.zh.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(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 : true, // 调试模式 【true|false】
                    callback : function() {
                        initEnv();
                        $("#themeList").theme({
                            themeBase : "themes"
                        });
                        // themeBase 相对于index页面的主题base路径
                    }
                });
            });

        </script>
    </head>

    <body scroll="no">
        <div id="layout">
            <div id="navTab" class="tabsPage">
                <div class="tabs">
                    <div class="tabsHeader">
                        <div class="tabsHeaderContent">
                            <ul>
                                <li class="selected">
                                    <a href="#"><span>标题1</span></a>
                                </li>
                                <li>
                                    <a href="#"><span>标题2</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="tabsContent" style="height:150px;">
                        <div>
                            内容1
                        </div>
                        <div>
                            内容2
                        </div>
                    </div>
                    <div class="tabsFooter">
                        <div class="tabsFooterContent"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>