jquery - jquery 基本对话框小部件中的自定义样式

Question

这里有点新手......

我正在尝试更改 jQuery 对话框小部件中框的基本格式。

我认为这将涉及对主题进行更改或覆盖。

这让我找到了主题滚轮。

我并不是想“重新发明轮子”，只是调整特性(字体大小、对话框的位置、选择图标等)

鉴于此，我是否需要构建自定义主题，或者我可以更轻松地进行小的更改吗？如果是这样，怎么办？

我不知道如何使用主题滚轮来满足我的需求。

有没有好的资源或书籍可以帮助像我这样的新手？

是的，我来过这里:

....jquery-ui/getting-started/

....jquery-ui/theming/

但这让我更深入地了解我现在想要解决的问题。 (或者，目前有必要这样做吗？)

(我在这里找到了一些引用资料，但我不知道如何应用于我的情况。)

我的配置:

我正在使用此处的“默认功能”:

....jqueryui.com/dialog/

使用 jquery-1.10.1

我必须使用该版本才能使其与我正在使用的 fancybox 版本(2.1.5)兼容: (兼容性问题对我来说真的很痛苦。)

这是我用于 jQuery 小部件的代码:

    <!-- basic alert:  -->
    <script type="text/javascript" src="fbox2/lib/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <!-- basic alert  -->

目前，我调用小部件的代码如下所示:

JS:

    function dopopup()  {
        $("<div title='Basic dialog onclick'>Test message <b>bolded</b></div>").dialog();
    return
    }

html:

    <a href="#" onclick="dopopup()">here</a><p>

您能否引导我在这个问题上找到正确的方向？

谢谢。

Answer 1

这里可能对您有帮助的是在 Mozilla Firefox 上运行的 Firebug http://getfirebug.com/ 或使用任何 Chrome 变体中原生捆绑的 Chrome 开发工具。 然后您可以通过 CSS“检查”您想要修改的元素。我所说的“检查”是指您浏览组成元素并观察哪些 CSS 样式适用于它们。

使用上述工具可以使这变得非常简单，允许您即时修改属性以测试看起来不错且有效的内容。

当/如果对属性的特定设置感到满意时，您可以通过包含您自己的 CSS 文件或内联 <style> 声明来声明默认 jQuery-ui 主题中找到的更新规则/属性，从而“覆盖”相关规则稍后在页面中。

作为示例，以下是对话框和主题的普通版本: 演示:http://jsfiddle.net/robschmuecker/3uKnt/

经过一些“检查”后，我只修改了一些选择规则，以使其具有完全不同的外观。

CSS:

.ui-widget {
    font-family: courier;
}
.ui-dialog .ui-dialog-title {
    font-size: 8px;
}
.ui-widget-content {
    background-color: #616DFF;
}
.ui-widget-header .ui-icon {
    background-image: url("http://www.famfamfam.com/lab/icons/silk/icons/bell.png");
    background-position:0;
}

演示:http://jsfiddle.net/robschmuecker/3uKnt/1/