(Por) não jQuery fazer o meu controle deslizante parecer gorda?

StackOverflow https://stackoverflow.com/questions/1616675

  •  06-07-2019
  •  | 
  •  

Pergunta

Eu estou ensinando-me jQuery e, a partir de jquery-ui usando um controle deslizante. Eu tê-lo ligado e funcionalmente ele funciona bem, definir algumas variáveis ??de página globais quando eu deslizar a alça. Isso não acontecer, no entanto, olhar como o controle deslizante na página de demonstração jquery-ui.

É um controle deslizante horizontal e posso controlar o comprimento da barra, definindo a propriedade largura CSS dos que converte jquery-ui para o controle deslizante. Mas o bar é cerca de duas ou três vezes "mais grosso" do que o da página de demonstração, eo controle deslizante é proporcionalmente maior. Parece ok, mas não tão bom quanto o da página de demonstração.

Tomar a configuração de largura como uma dica, eu tentei definindo a propriedade altura CSS do subjacente. Isso mudou a altura da parte bar, mas não a alça que agora parecia descomunal.

Aqui está o cabeçalho: 

<head>
    <title>The Memory Game</title>
    <link href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
    <link href="css/memoryGame.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script src="js/memoryGame.js" type="text/javascript"></script>
</head>

Aqui está o HTML marcação: 

<div id="control-panel"  class="ui-state-default">
<div id="slider" style="width: 150px"></div>
</div>

Aqui está o meu CSS para o controle do painel: 

div#control-panel {
padding:    10px;
float:      right;
}

E aqui está o jQuery em que eu aplicar o controle deslizante: 

$('#slider').slider({
    max: 10000,
    value: waitTime,
    change: function(event, ui) {
        waitTime = ui.value;
        fadeTime = waitTime / 3;
    }
});

Alguém pode sugerir como eu pode dimensionar a espessura do meu controle deslizante ou pelo menos ter a mesma espessura mostrado na página jquery-ui demonstração?

Foi útil?

Solução

O tamanho deslizante é controlado pelo 'font-size' propriedade css. Você quer diminuir o tamanho da fonte do elemento pai.

Outras dicas

Todos jQuery UI Widgets Tem theming instruções que lhes estão associados. As instruções para o controle deslizante Widget de mencionar certas classes CSS que são atribuídos ao controle deslizante.

Olhando para o jquery-ui.css (ou ui.slider.css se você estiver usando o pacote de desenvolvimento), você pode ver que o CSS padrão é algo como: 

.ui-slider .ui-slider-handle {
  width: 1.2em;
  height: 1.2em;
}
.ui-slider-horizontal .ui-slider-handle { 
  top: -0.3em;
  margin-left: -0.6em;
}

Você pode substituir essas regras CSS para criar um identificador de qualquer tamanho.

Editar

Eu já produziu funcionalidade básica deslizante aqui: http://jsbin.com/otika3 (editável via < a href = "http://jsbin.com/otika3" rel = "noreferrer"> http://jsbin.com/otika3 ). Por favor, tente reproduzir o seu problema na http://jsbin.com e compartilhar o link público com a gente.

fonte completa: 

<!doctype html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
  <title>http://stackoverflow.com/questions/1616675</title>
  <style type="text/css" media="screen">
    html, body, #content { height: 100%; }
    body { background-color: #000; font-size: 62.5%; color: #fff; }
    #content { width: 700px; margin: 0 auto; border: 1px solid white; padding: 1em;}
    #slider { width: 200px; }
  </style>
</head>
<body>
  <div id="content">
    <div id="slider"></div>
  </div>
  <script>
    $('#slider').slider();
  </script>
</body>

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top