Как получить текстовое поле с помощью jquery без изображений - PullRequest
Новая
       48

Как получить текстовое поле с помощью jquery без изображений

4 голосов
/ 22 августа 2009

Я пытаюсь закруглить углы для текстового поля. Но как я могу получить это. Вот класс 

.tbox
{
 float:left;
 width:200px;
 margin-top:10px;
 margin-left:10px;

}

когда я звоню, используя jquery, используя 

$('.tbox').corners("4px");

это не работает. Я уже включил Jquery.js и jquery.corners.js. Но это не работает. Любая помощь будет оценена

Ответы [ 8 ]

8 голосов
/ 22 августа 2009

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

class="text ui-widget-content ui-corner-all"

Надеюсь, это поможет вам.

5 голосов
/ 22 августа 2009

Вы можете сделать округленный угол div и внутри этого места текстовое поле без границ. Я думаю, что это будет самый простой способ удовлетворить ваши потребности. 

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.corner.js" type="text/javascript"></script>

<script>
    $(document).ready ( function () {
        $("#div1").corner("round");
    });
</script>

<style>
#div1 { width: 200px; height: 30px; background-color: #a9a9a9; }
#txtBox { width: 180px; height: 20px; background-color: transparent; position: relative; top: 5px; left: 10px; border-style: none; }
</style>


<div id="div1">
    <input type="text" id="txtBox" />
</div>
2 голосов
/ 22 августа 2009

Вы можете сделать это легко с DD_roundies

jQuery группа предложила использовать его для скругления углов.
это лучшее, что я видел.

2 голосов
/ 22 августа 2009

Я предлагаю использовать чистый CSS: 

border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;

Однако это не будет работать в IE, но я рассматриваю это как наказание за использование этого браузера: D В следующей версии это будет работать, вероятно.

1 голос
/ 07 марта 2011

Похоже, что Арка Чаттерджи предложил лучшее решение для использования jquery для создания закругленных углов. Просто обратитесь к файлам jquery-ui.css и jquery-ui.min.js, а затем добавьте упомянутые классы. Я бы за это проголосовал, но мне пока не хватает «репутации». Вот пример: 

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>

<input type="text" class="text ui-widget-content ui-corner-all" id="txtBox" />
0 голосов
/ 06 сентября 2009

Вы опытный программист JavaScript и можете ли вы работать с элементом HTML5 Canvas?

Затем вы можете попробовать jQuery Background Canvas. Вставьте один холст позади вашей формы и нарисуйте закругленные углы на вашем текстовом поле. Вот плагин, и этот сайт широко использует его: Плагин jQuery Background Canvas

0 голосов
/ 22 августа 2009

Поместите ввод в div и установите закругленные углы на div. Удалите собственные границы ввода и отступы и сделайте его таким же большим, как div оболочки (минус любой отступ, который вы хотите в div).

0 голосов
/ 22 августа 2009

Я нашел код с закругленными углами css с помощью javascript. Это довольно просто и легко редактировать. Работает во всех браузерах

проверьте эту ссылку

Примечание: закругленные углы для div'ов работают во всех браузерах, включая ie6, но закругленные углы текстового поля не работают в ie6.

...