1

我想在我的网站上弹出模态窗口（它是一个背景不透明的窗口）来显示一些数据。请检查下面的图片：

图片

我想使用类似的实现：http ://www.smartclient.com/?skin=Enterprise#modality 但我不知道该怎么做。谁能帮我实现这个？我无法从这里找到要下载的文件：http
://www.smartclient.com/product/download.jsp 这不是 MooTools 或 jQuery 框架之类的吗？我不明白要从他们下载的库中包含哪个文件。有人可以为我提供一个示例 html 页面代码来做到这一点吗？

另一件事是，我在他们的源代码中看到了以下代码：

            isc.IButton.create({
                ID: "touchButton",
                width: 120,
                title: "Touch This"
            });

            isc.Label.create({
                left: 150,
                height: 20,
                contents: "<a href='http://www.google.com' target='_blank'>Open Google</a>"
            });

            isc.IButton.create({
                title: "Show Window",
                top: 35,
                left: 75,
                click : function () {
                    touchButton.setTitle("Can't Touch This");
                    modalWindow.show();
                }
            });

            isc.Window.create({
                ID: "modalWindow",
                title: "Modal Window",
                autoSize:true,
                autoCenter: true,
                isModal: true,
                showModalMask: true,
                autoDraw: false,
                closeClick : function () { touchButton.setTitle('Touch This'); this.Super("closeClick", arguments)},
                items: [
                    isc.DynamicForm.create({
                        autoDraw: false,
                        height: 48,
                        padding:4,
                        fields: [
                                    {name: "field1", type: "select", valueMap: ["foo", "bar"]},
                                    {name: "field2", type: "date"},
                                    {type: "button", title: "Done",
                                     click: "modalWindow.hide();touchButton.setTitle('Touch This')" }
                                ]
                    })
                 ]
            });

我担心以下代码：

            fields: [
                        {name: "field1", type: "select", valueMap: ["foo", "bar"]},
                        {name: "field2", type: "date"},
                        {type: "button", title: "Done",
                         click: "modalWindow.hide();touchButton.setTitle('Touch This')" }
                    ]

有人可以告诉我这是什么类型的代码吗？MooTools 或 jQuery 中是否有类似的功能？我对这些事情不以为然。请帮忙。先感谢您。

4

4 回答 4

3

smartclient 是它自己的 RIA 框架，您发布的代码是他们自己的语法。

您在下面看到的代码：

fields: [
    {
        name: "field1",
        type: "select",
        valueMap: ["foo", "bar"]
    },
    {
        name: "field2",
        type: "date"
    },
    {
        type: "button",
        title: "Done",
        click: "modalWindow.hide();touchButton.setTitle('Touch This')"
    }
]

是一个简单的字面量数组定义，其中数组成员是字面定义的对象。这不是特定于 mootools 或 jquery 或任何框架的，它只是 javascript。另外，阅读 JSON（javascript 对象表示法），本质上是上述的一种传输形式。

至于 mootools 类似 UI 的版本：

  • 莫查伊 http://mochaui.org/demo/ - 我会等一下，他们可能会发布一个新的突破性版本，使其与 mootools 1.3 保持一致并修复负载。
  • LSD - 通过 mootools ART 的迷你 UI - https://github.com/Inviz/lsd#readme（其中之一，也许也期待来自 Cloudera 的东西）
  • moolego ui - http://ui.moolego.org/ - 虽然似乎停滞不前 - github 上的最后一次提交是从 11 个月前开始的。
  • 看看mootools forge。
  • 做你自己的！这些天来如此简单，尤其是使用 html5
于 2011-01-28T09:55:25.323 回答
0

首先，您需要熟悉 javascript 才能理解上面的 SmartClient 代码，我相信您已经熟悉了。

现在关于代码：SmartClient 已构建其所有组件以支持 json/xml 数据格式。我们在这里不讨论 xml（可扩展标记语言）。

现在关于 json（javascript 对象表示法）；如果您了解 javascript，Json 是一种非常简单且标准的学习格式。向/从客户端/服务器传递任何信息/参数；就像我们在 html ex 中所做的那样。www.google.com? 参数=值；json 用冒号“：”字符分隔每个参数（键）和值。现在，如果您看到上面的代码，那么任何“{”和“}”之间的所有属性（参数）和值都代表一个 json。如果大括号“{}”是嵌套的，则有嵌套的 json，如果 json 在长括号“[]”之间，则表示 json 数组。

前任。如果有任何实体的表说用户，那么它的 json 将是 [{user 1 json...}, {user 1 json...} 等等...]

但是如果有任何一个 html 表单（在 SmartClient 中是 DynamicForm），那么一个 json 就足够了{form json with all fields... }

让我们再次回顾一下代码：第一行是 isc.IButton.create - SmartClient 属于同构 (isc)，因此任何 isc 组件都是使用 isc.COMPONENT.create ({}) 创建的；在“（{...}）”之间，您需要编写json，其中width：120只不过是一个json。

代码中的任何事件，如 click、closeClick 都不过是 javascript 匿名函数，如 html 中的 mouseover。

在 isc.Window.create 代码中有 json 和 json 元素数组的嵌套，Window 是具有给定属性的 SmartClient 特定组件。

最后一个例子：如果有实体 User: 具有属性 rollNo 为 1 和 name: "no-name" 那么它的 json 将是： {"user": {"rollNo": "1", "name": "no-name "}} 或 {"rollNo": "1", "name": "no-name"}

如果有两个这样的用户，那么 [ {"rollNo": "1", "name": "no-name-1"}, {"rollNo": "2", "name": "no-name-2 "}]

回答你关于不透明度的问题是；在窗口组件中使用以下属性： modalMaskOpacity: 50 该属性控制模态窗口后面显示的模态掩码的不透明度，值从 0（透明）到 100（不透明）不等

谢谢沙鲁

于 2011-06-09T11:04:52.263 回答
0

如果您想创建模态对话框，您可以轻松地使用 Jquery UI Dialog 并将您的表单添加到对话框中。

jQuery UI 对话框

于 2011-01-28T02:01:35.657 回答
0

要使用 mootools 创建对话框，您可以使用MooDialog

于 2011-01-28T08:15:38.503 回答