почему css не применяется к этой кнопке привязки jquery? - PullRequest
Новая
       222

почему css не применяется к этой кнопке привязки jquery?

0 голосов
/ 25 мая 2010

Я, должно быть, упускаю что-то очень простое в CSS. Моя кнопка привязки jQuery работает, но она отображается как простая подчеркнутая метка, а не как кнопка пользовательского интерфейса с закругленными углами. Я был бы признателен, если бы кто-то мог указать на ошибку в этом простом примере.

Спасибо 

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML LANG="en-US">
<HEAD>
<TITLE>button test</TITLE>

<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Expires" content="Sat, 22 May 2010 00:00:11 GMT">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<SCRIPT type="text/javascript">


$(document).ready(

    function() {

        $('a','.test').click(function(){showIntro();return false;});

     });


function showIntro()
{   
   document.location.href="intro.htm";  
}


</script>

<body>

<div class='test'><a href="#">Button</a></div>
</body>
</html>

Ответы [ 4 ]

2 голосов
/ 25 мая 2010

Вам нужно сделать кнопку, используя .button(), например: 

$(function() {
  $(".test a").button();
});

Здесь вы можете увидеть демонстрационные примеры jQuery UI и демонстрацию вашей разметки, работающей здесь .

0 голосов
/ 25 мая 2010

Извините, что даю ответ, если не "ответ", на мой собственный вопрос, но я обнаружил ключ к пониманию того, что происходит, если не конечную причину поведения. Ниже приведен фрагмент кода, вставленный из примера Button на веб-сайте jQuery; возьмите его в jsFiddle и запустите: он работает. Но если вы удалите эту строку, относящуюся к кнопке ввода: 

 $("button, input:submit, a", ".demo").button();

тогда кнопка привязки не может правильно отрисоваться. Почему рендеринг элемента привязки зависит от наличия кнопки ввода? 

<script type="text/javascript">
    $(function() {
        $("button, input:submit, a", ".demo").button();

        $("a", ".demo").click(function() { return false; });
    });
    </script>
    <style>

    </style>



<div class="demo">

    <button>A button element</button>

    <input type="submit" value="A submit button">

    <a href="#">An anchor</a>

</div><!-- End demo -->

1007 *

0 голосов
/ 25 мая 2010

Вам не нужно делать из нее нужную кнопку 

  $(".test a").click(function(){showIntro();return false;});

То, что вы пытаетесь сделать, когда ваш селектор передает второй параметр, это Scope. Второй параметр не является строкой (селектором), это должен быть объект jQuery.

Так что, если вы хотите сделать это по-своему, вам придется сказать

var test = $ ('. Test');

$ ( 'а', тест) .click ...

Но 1-й метод предпочтительнее, чем делать это таким образом.

0 голосов
/ 25 мая 2010

Вам необходимо добавить соответствующий класс к ссылке, используя jQuery или другим способом.

Попытка: 

<a href="#" class="ui-button">Button</a>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...