Question

有点'这里是新手......

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

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

这引导我进入themeroller。

我不是要“重新发明轮子”，只是调整特征（字体大小，对话框的位置，选择图标等）。

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

我无法弄清楚如何使用themeroller来满足我的需求。

是否有一个好的来源或书籍可以帮助像我这样的新手？

是的，我来过这里：

....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

可能对您有所帮助的是Firebug http://getfirebug.com/，它可以在Mozilla Firefox上运行，也可以使用Chrome开发工具，这些工具本身可以在任何Chrome版本中捆绑使用。然后你可以＆＃34;检查＆＃34;您希望通过CSS修改的元素。通过Inspect我的意思是你浏览组成元素并观察哪些CSS样式适用于它们。

使用上面提到的工具可以轻松实现这一点，允许您即时修改属性以测试看起来好看和有效的内容。

当/如果对某个属性的特定设置感到满意，您将＆＃34;覆盖＆＃34;相关规则，通过在页面中稍后包含您自己的CSS文件或内联<style>声明，将更新的规则/属性声明为默认jQuery-ui主题中的规则/属性。

举个例子，这是一个对话框和主题的香草版本：演示：http://jsfiddle.net/robschmuecker/3uKnt/

经过一些＆＃34;检查＆＃34;我只修改了一些选择规则，给它一个完全不同的外观。

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/

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

1 个答案: