草庐IT

jQuery UI 定制

runoob 2023-04-06 原文

jQuery UI 定制

jQuery UI 提供了多种定制方式。您已经看到下载生成器（Download Builder）如何定制一个值包含您所需选项的自定义版本，这里还提供了其他定制方式。

jQuery UI 基础：使用选项

jQuery UI 中的每个插件都有一个默认配置，默认配置值一般是根据最基本最常见的使用情况设置的。如果您想要让某个插件设置成非默认值，您可以使用 "options" 重写它的默认设置。选项是一组属性，作为参数传递给 jQuery UI 小部件。例如，滑块（slider）小部件具有 orientation 选项，该选项允许您指定滑块是水平的还是垂直的。为了设置滑块的该选项，您只需将它作为一个参数传递，如下所示：

$( "#mySliderDiv" ).slider({
    orientation: "vertical"
});

您可以传递更多不同的选项，每个选项之间用逗号分隔：

$( "#mySliderDiv" ).slider({
    orientation: "vertical",
    min: 0,
    max: 150,
    value: 50
});

请记得选项需放在大括号 { } 内。上面的实例只是一个简单的讲解，如需获取整套 jQuery UI 小部件的详细信息，请查看 jQuery UI 实例。

视觉定制：设计一个 jQuery UI 主题

如果您想要设计自己的主题，jQuery UI 提供了一个非常完美的用于主题定制的应用程序，这就是 ThemeRoller。具体定制请访问 jQuery UI ThemeRoller。

ThemeRoller 为所有使用 jQuery UI 小部件设计的元素提供了一个自定义接口。当您调整左栏中的"levers"，右栏中的小部件将根据您的设计进行显示。ThemeRoller 的 Gallery 选项卡提供了一些与设计主题，与下载生成器（Download Builder）页面提供的一样。您可以基于这些主题做调整，或者直接下载。

下载主题

当您点击 ThemeRoller 页面中的 "Download theme" 按钮，将跳转到下载生成器（Download Builder）页面，您的自定义主题会在主体下拉菜单中自动选中。您可以进一步配置下载包。一旦下载完成，您将看到 example.html 页面使用了您自定义的主题。

提示： 如果您需要编辑您的主题，只需打开 CSS 文件，找到第 43 行，"To view and modify this theme, visit ..."，该 url 即为在 ThemeRoller 中打开主题进行编辑的链接。

jQueryUI自定ThemeRollerjQuery UI

有关jQuery UI 定制的更多相关文章

  1. ruby - 如何进行排列以有效地定制输出 - 2

    这是一道面试题，我没有答对，但还是很好奇怎么解。你有N个人的大家庭，分别是1,2,3,...,N岁。你想给你的大家庭拍张照片。所有的家庭成员都排成一排。“我是家里的friend，建议家庭成员安排如下:”1岁的家庭成员坐在这一排的最左边。每两个坐在一起的家庭成员的年龄相差不得超过2岁。输入:整数N，1≤N≤55。输出:摄影师可以拍摄的照片数量。示例->输入:4，输出:4符合条件的数组:[1,2,3,4][1,2,4,3][1,3,2,4][1,3,4,2]另一个例子:输入:5输出:6符合条件的数组:[1,2,3,4,5][1,2,3,5,4][1,2,4,3,5][1,2,4,5,3][

  2. ruby-on-rails - 是否有任何基于可定制模板的 Ruby 或 Rails 报告工具？ - 2

    我正在寻找一个用ruby​​或rails完成的报告生成器，它允许用户首先定义一个模板，然后将数据提取到模板中。我一直在浏览“TheRubyBox:报告部分”(https://www.ruby-toolbox.com/categories/reporting.html)有两个报告工具类似于我正在寻找的:ThinReports:这真的很好。您下载一个模板编辑器，然后定义您自己的报告模板，然后通过组合thinreportsgem，您可以从您的应用程序中获取SVG或PDF报告。ODFReport:它使用ODF文件作为模板，可以通过OpenOffice和MSWord2010进行编辑。然后你就可以

  3. ruby-on-rails - Rails 路由 : Nested, 成员、集合、命名空间、范围和可定制 - 2

    我想了解更多关于Rails路线的信息。成员和收藏#Exampleresourceroutewithoptions:resources:productsdomemberdoget'short'post'toggle'endcollectiondoget'sold'endend命名空间和作用域#Exampleresourceroutewithinanamespace:namespace:admindoresources:productsendscope:admindoresources:productsend约束，Redirect_to#Exampleresourceroutewithop

  4. ruby-on-rails - RailsAdmin - 定制你自己的过滤器 - 2

    我正在使用https://github.com/sferik/rails_admin处理我的管理界面。可以根据此模型中存在的当前列(id、created_at等)过滤您的模型我希望能够为关联添加自定义过滤器。例如:当我探索“城镇”模型时，我希望能够仅显示具有一个或多个项目的城镇。我可以通过向城镇添加一个新列来做到这一点，称为has_projects作为bool值，当有1个或多个项目关联时将设置为true，但我觉得必须有一种更简洁的方法来制作您自己的自定义过滤器？ 最佳答案 您可以尝试使用枚举。参见https://github.com

  5. javascript - 结合 AngularJS、jQueryUI、Angular-Drag-Drop 排序列表 - 2

    我遇到以下情况，我需要允许用户从列表中选择对象并将它们拖/放到某个插槽中:对象的大小可以是插槽的一到三倍。所以如果用户将Object1拖到Slot0，那么它只占用Slot0(startSlot=0和endSlot=0)。但是，如果用户将对象3拖动到插槽3，则它会占用插槽3、4和5(startSlot=3和endSlot=5)。将对象放入槽中后，用户可以通过在槽中单击并上下拖动对象来重新排序对象。对象不能相互重叠:我正在使用Angular，所以我正在从数据库中读取对象列表，并且我有一个槽数变量。我尝试了几种解决方案。我相信使用jQuery和jQueryUI可拖动、可放置和可排序是解决方案

  6. javascript - JQueryUI 在一个 id 上调用 .accordion 两次 - 2

    我正在尝试使用AJAX根据框中选择的内容动态生成JquerUIAccordion。目前我有使用JS$("#courseselect").change(function(){$("#testselect").html("");//Emptyanypreviousdata$("#testselect").css("display","block");//Displayitifitwashidden$.getJSON('json.php?show=tests&courseid='+$(this).val(),function(data){for(xindata){$("#testselect

  7. javascript - 如何在 jqueryui datepicker 中禁用回车键 - 2

    我正在使用jQueryUI日期选择器，当用户单击文本框并按下回车键时，当前日期将被填充。我想避免这种情况。我试过这个:$('#datepicker').on('keypress',function(e){if(e.which==13){e.preventDefault();e.stopPropagation();returnfalse;}});运气不好这是演示https://jsfiddle.net/shalini456/zwjzo175/的链接 最佳答案 试试这个:$("#datepicker").keydown(myfuncti

  8. javascript - 在不涉及输入字段的情况下，在按下按钮时显示 jQueryUI 日期选择器 - 2

    在ASP.NET项目中，我正在寻找一种方法，当我按下按钮时出现jQueryUI日期选择器，然后在选择日期时引起回发。我已经使用thismethod使回发部分正常工作，但我无法让选择器在我想要的时候离开，或者在选择日期时正常运行。我试过:将选择器附加到按钮本身，但它会在我选择之后和回发发生之前将按钮的文本设置为所选日期，这是我不想要的。将选择器附加到按钮并设置altField的选项它位于浏览器窗口之外，但它仍会在选择日期时设置按钮的文本。通过将其附加到div使其内联并在onclick中创建它的按钮。但是根据thisforumpost，内联日期选择器的设计不显示“完成”按钮，我无法通过单击

  9. javascript - 在 JQueryUI 小部件的 QUnit 测试中测试可见性 - 2

    这对其他人来说可能很明显，但我没有通过搜索找到它，所以在这里发布问题和一个可能的答案。背景:自定义JQueryUI小部件使用widgetfactory在小部件中，某些元素会根据其他数据/选项隐藏或显示。创建单元测试以验证它们是否正确显示/隐藏。我认为我的单元测试都可以在内存中创建自己的元素，类似于thisoldanswer.从这个例子中删除了实际的小部件部分:test('show/hide',1,function(){varsomecondition=true;vardiv=$('').hide();if(somecondition)div.show();equal(somecondi

  10. javascript - jQueryUI Draggable Helper 选项帮助 - 2

    是否可以修改jQueryUI使用可拖动元素创建的克隆助手？我不想要完全相同的克隆作为助手，我只想要类似的东西。 最佳答案 对于helper选项，使用返回DOM对象的函数代替clone。以任何你喜欢的方式使这个对象“相似”。像这样:$('.selector').draggable({helper:function(){varfoo=dom_object_you_create_or_specify;returnfoo;}});引用文献:jQueryUIDraggable 关于javascri

随机推荐