DWZ选项卡

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Scripts/dwz/themes/default/style.css" rel="stylesheet" />
    <link href="Scripts/dwz/themes/css/core.css" rel="stylesheet" />
    <link href="Scripts/dwz/themes/css/print.css" rel="stylesheet" />

    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/dwz/js/dwz.core.js" type="text/javascript"></script>
    <script src="Scripts/dwz/js/dwz.ui.js" type="text/javascript"></script>
    <script src="Scripts/dwz/js/dwz.tab.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            DWZ.init("Scripts/dwz/dwz.frag.xml", {
                //loginUrl: "login.html",
                callback: function () {
                    initEnv();
                    //$("#themeList").theme({ themeBase: "themes" });
                }
            });
        });
    </script>

</head>
<body>

    <div class="tabs" currentIndex="0" eventType="click">
    <div class="tabsHeader">
        <div class="tabsHeaderContent">
            <ul>
                <li><a href="javascript:;"><span>卡1</span></a></li>
                <li><a href="javascript:;"><span>卡2</span></a></li>
                <li><a href="javascript:;"><span>卡3</span></a></li>
            </ul>
        </div>
    </div>
    <div class="tabsHeader">
        <div class="tabsHeaderContent">
            <ul>
                <li><a href="javascript:;"><span>卡4</span></a></li>
                <li><a href="javascript:;"><span>卡5</span></a></li>
                <li><a href="javascript:;"><span>卡6</span></a></li>
            </ul>
        </div>
    </div>
    <div class="tabsContent" layoutH="120">
        <div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
        <div>内容4</div>
        <div>内容5</div>
        <div>内容6</div>
    </div>
</div>
</body>
</html>

  

currentIndex表示默认选中的选项卡的索引
时间: 2024-11-06 07:35:15

DWZ选项卡的相关文章

DWZ(一):框架初了解

DWZ富客户端框架(jQuery RIAframework),是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. DWZ富客户端框架设计目标是简单实用.扩展方便.快速开发.RIA思路.轻量级. DWZ框架支持用HTML扩展的方式来代替JavaScript代码,只要懂HTML语法,再参考DWZ使用手册就可以做Ajax开发. 开发人员不写JavaScript的情况下,也能用Ajax做项目和使用各种UI组件.基本可以保证程序员不懂JavaScript, 也能使用各种页面组件和Ajax技

DWZ框架学习

转自(http://blog.sina.com.cn/s/blog_667ac0360102ec0q.html) 初始化配置文件 $(function(){ DWZ.init("dwz.frag.xml", {   loginUrl:"login_dialog.html", loginTitle:"登录", // 弹出登录对话框   loginUrl:"login.html", // 跳到登录页面   statusCode:{

DWZ在APS.NET WebForm中的使用(一)

1.前言 在最近的项目开发中,使用到了前端框架DWZ.DWZ是一款较为优秀的后台管理界面框架,但官方发布的文档确实令人汗颜,简单几页了事,有点对自己的产品不负责任了.同时感谢网友石头的热心帮助,在我这种菜鸟遇到困难时给予极大的帮助. 2.介绍 引用官方描述:DWZ富客户端框架(jQuery RIA framework),是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. DWZ富客户端框架设计目标是简单实用.扩展方便.快速开发.RIA思路.轻量级. 其好处在于可以减少项目开发中J

DWZ富客户端HTML框架

一.了解 概述:是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. 目的:简单实用.扩展方便(在原有架构基础上扩展方便).快速开发.RIA思路.轻量级 使用:用html扩展的方式来代替javascript代码 思路:根据官网页面样例,查看官方代码包,查阅相关子页面,参阅帮助文档,添加固定的标签属性语法 优势:第一次打开页面时载入界面到客户端, 之后和服务器的交互只是数据交互, 不占用界面相关的网络流量,开源免费 劣势:文档少,开发者少,共享资源少,帮助文档不易阅读 二.资料 官方

转载《Android-TabHost 选项卡功能用法详解》

一. TabHost介绍 TabHost组件可以在界面中存放多个选项卡, 很多软件都使用了改组件进行设计; 1. TabHost常用组件 TabWidget : 该组件就是TabHost标签页中上部 或者 下部的按钮, 可以点击按钮切换选项卡; TabSpec : 代表了选项卡界面, 添加一个TabSpec即可添加到TabHost中; -- 创建选项卡 : newTabSpec(String tag), 创建一个选项卡; -- 添加选项卡 : addTab(tabSpec); 2. TabHos

js实现选项卡

通过JavaScript实现如上选项卡切换的效果. 实现思路: 一.HTML页面布局 选项卡标题使用ul..li 选项卡内容使用div 二.CSS样式制作 整个选项卡的样式设置 选项卡标题的样式设置 选项卡内容的样式设置 一开始只显示一个选项卡内容,其它选项卡内容隐藏. 三.JS实现选项卡切换 获取选项卡标题和选项卡内容 选项卡内容多个,需要循环遍历来操作,得知哪个选项卡和哪个选项内容匹配 通过改变DOM的css类名称,当前点击的选项卡显示,其它隐藏 <!--代码一--><!DOCTYP

数据校验validator 与 DWZ

在做系统时经常会用到数据校验,数据校验可以自己写,也可以用现在成的,现在记录下两种类库使用方法, validator <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="pragma" content="n

【锋利的JQuery-学习笔记】Tab选项卡的实现

效果图: 关键点: 1.标签和标签内容都是用<ul><li>实现的,主要是通过Css样式设计成选项卡的模样. 2.用js代码实现点击标签时,标签内容的切换(做法是<div id="jnBrandList">横向滚动). html: <div id="jnBrand"> <div id="jnBrandTab"> <h2 title="品牌活动">品牌活动&

WEB前端:01_Tab选项卡

Tab选项卡 采用两种方法实现选项卡切换功能,目前只提供了最基本的切换效果,后期增加jquery版和渐变切换效果. 效果图: 纯JS简化版: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 <html> <head> <ti