Question

这是我第一次使用jqueryKnob插件。我试图在这个插件中使用格式选项和皮肤选项，但它似乎没有用。对于皮肤问题，我试过jQuery knob tron skin issue，但没有任何帮助。我可能在哪里出错？

@Bean
public JpaExecutor jpaExecutor() {

    JpaExecutor executor = new JpaExecutor(entityManagerFactory);
    executor.setFlushSize(10);
    executor.setEntityClass(JobOffer.class);
    return executor;
}

@Bean
@ServiceActivator(inputChannel="channel5")
public JpaOutboundGateway save(JpaExecutor jpaExecutor, PlatformTransactionManager transactionManager) throws Exception {

    DefaultTransactionAttribute dta = new DefaultTransactionAttribute();
    dta.setPropagationBehavior(TransactionDefinition.PROPAGATION_REQUIRES_NEW);
    dta.setReadOnly(false);

    MatchAlwaysTransactionAttributeSource matas = new MatchAlwaysTransactionAttributeSource();
    matas.setTransactionAttribute(dta);

    TransactionInterceptor ic = new TransactionInterceptor();
    ic.setTransactionManager(transactionManager);
    ic.setTransactionAttributeSource(matas);

    List<Advice> adviceChain = new ArrayList<>();
    adviceChain.add(ic);

    JpaOutboundGateway gateway = new JpaOutboundGateway(jpaExecutor);
    gateway.setAdviceChain(adviceChain);
    gateway.setProducesReply(false);

    return gateway;
}

HTML

<script>
    $(function() {
        $('.dial').knob({
            readOnly:true,
            fgColor:"#D07321",
            inputColor:"#3e4040",
            thickness: 0.1,
            skin:"tron",

            draw : function () {

                // "tron" case
                if(this.$.data('skin') == 'tron') {

                    this.cursorExt = 0.3;

                    var a = this.arc(this.cv)  // Arc
                        , pa                   // Previous arc
                        , r = 1;

                    this.g.lineWidth = this.lineWidth;

                    if (this.o.displayPrevious) {
                        pa = this.arc(this.v);
                        this.g.beginPath();
                        this.g.strokeStyle = this.pColor;
                        this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
                        this.g.stroke();
                    }

                    this.g.beginPath();
                    this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
                    this.g.stroke();

                    this.g.lineWidth = 2;
                    this.g.beginPath();
                    this.g.strokeStyle = this.o.fgColor;
                    this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                    this.g.stroke();

                    return false;
                }
            }
        })
    });
</script>

Answer 1

问题是您错过了元素中的 data-skin =＆＃34; tron＆＃34; 属性。

查看更新的演示：Demo with knob

或者我建议您使用jQuery roundSlider插件   由基本的DOM元素组成。因此，您可以自定义整体   控制外观通过CSS 本身，而不需要更多   脚本。

在这里，我使用roundSlider进行相同的演示，查看演示：Demo with roundSlider

您也可以自行轻松自定义：Additional DEMO

您可以从这里查看roundSlider的更多外观：

<强> http://roundsliderui.com/demos.html#different-theming-and-appearances

如何使用jqueryKnob的tron皮肤？

1 个答案: