Question

我正在使用来自http://www.7thweb.net/wicket-jquery-ui/的Wicket JQuery UI项目。我已经成功创建了一个可排序的解决方案，允许我在2个以上的可排序列表中使用JQuery的connectWith功能。我想通过使用JQuery占位符选项来扩展此解决方案，以显示可放弃的排序位置。我可以在生成的javascript中看到占位符选项，但看起来我在占位符选项中输入的CSS类未正确应用。

我已经在wicket中添加了CSS：head标签，但仍然没有被拾取。但是，如果我在IE11中调试页面并手动将样式添加到DOM Explorer样式选项卡，则占位符或多或少地响应JQuery示例在此处的工作方式https://jqueryui.com/sortable/#placeholder。

这告诉我该选项正在运行，但CSS没有被选中。我错过了什么？

由于

编辑：第一行是在我的类中设置jquery选项。第二行显示占位符选项是Wicket javascript输出中设置的最后一个选项。我还添加了占位符引用的CSS，以及显示CSS正确添加到Wicket应用程序。

//sets the JQuery option. Used to also setup the connectWith and forcePlaceholderSize properties.
this.options.set( "placeholder", Options.asString( "itemPlaceholder" ) );

//Wicket Javascript output
jQuery('#crewOrder20').sortable({ "receive": function (event,ui) {var attrs = {"u":"./dashboard?0-1.IBehaviorListener.1-dashboardPanel-webMarkupContainer-crewSchedules-0-crewSchedule-box-boxBody-availability-0-crewOrder","c":"crewOrder20"};var params = [{"name":"hash","value":ui.item.data('hash')},{"name":"index","value":ui.item.index()}]; attrs.ep = params.concat(attrs.ep || []); Wicket.Ajax.ajax(attrs); } , "connectWith": "list of sortables", "forcePlaceholderSize": "true", "update": function (event,ui) { var attrs = {"u":"./dashboard?0-1.IBehaviorListener.0-dashboardPanel-webMarkupContainer-crewSchedules-0-crewSchedule-box-boxBody-availability-0-crewOrder","c":"crewOrder20"}; var params = [{"name":"hash","value":ui.item.data('hash')},{"name":"index","value":ui.item.index()}]; attrs.ep = params.concat(attrs.ep || []); Wicket.Ajax.ajax(attrs); } , "placeholder": "itemPlaceholder" });;

//CSS
.itemPlaceholder{ 
height: 1.5em; 
line-height: 1.2em; 
backaground: yellow;

}

private Styles() {
    super( Styles.class, "style.css" );
}

public static Styles getInstance() {
    return StylesHolder.INSTANCE;
}

private static class StylesHolder {
    public static final Styles INSTANCE = new Styles();
}

//setting the CSS class in the Wicket app
bundles.addCssBundle( App.class, "style-" + Version.Info.getVersion() + ".css",
            (CssResourceReference) PrettifyCssResourceReference.INSTANCE,
            Styles.getInstance() );

这是一个显示功能的fiddle。

编辑：进一步编辑。我已经确认CSS正在应用于我通过Wicket设置的其他类属性。

//this correctly applys the dispatch CSS to this label
label.add( AttributeModifier.append( "class", "dispatch" ) );

Answer 1

使CSS规则更具体，例如body div .itemPlaceholder {....}。 jQuery UI css文件在CSS片段之后加载并覆盖它。

Wickets没有拿起CSS

1 个答案: