Термин Bubbles в поисковой системе - PullRequest
1 голос
/ 22 сентября 2011

Так что я сделаю все возможное, чтобы описать то, что я пытаюсь сделать, но я думаю, что картина сделает больше справедливости.

В основном я работаю над своего рода поисковой системой, которая принимает ключевые слова с разделителями-запятыми. Я хотел бы, чтобы это работало после того, как пользователь вводит термин и ставит запятую, термин появляется под панелью поиска в «пузыре» соответствующего размера с «x», который позволяет ему удалить термин из их поиска.

Программно я знаю, как это сделать. Я немного застрял на том, как сделать графику, хотя. Я знаю, что это форум по программированию, но я не уверен, стоит ли мне создавать «базовую» графику для пузырька, а затем динамически изменять ее размер в зависимости от длины поискового запроса или есть какой-то другой способ сделать это. .

Мысли

РЕДАКТИРОВАТЬ: Wow, только что вспомнил, что StackExchange выполняет именно то, что я хочу, без опции «х». Это то, что я хочу, кроме более округлого стиля.

Ответы [ 3 ]

2 голосов
/ 22 сентября 2011

Что-то вроде:

span {
    display: inline-block;
    background: blue;
    padding: 5px 10px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

... должен сделать свое дело. Не нужно играть с графикой, кроме значков удаления.

0 голосов
/ 22 сентября 2011

Вы можете пойти любым путем HTML 5, добавив закругленные углы к li 's / div'.

Посмотрите на свойство border-radius для этого.Хотя это поддерживается не всеми (более старыми / IE :)) браузерами.

или

Вы можете сделать что-то вроде следующего (полупсевдокод):

<div class="button">
  <div class="left"></div>
  <div class="content">Term</div>
  <div class="right"></div>
</div>

.button .left { background: url('image with the left part of the button'); width: the width of the image; }
.button .right { background: url('image with the rightpart of the button'); width: the width of the image; }
.button .content { background: gray; }

Который будет иметь две стороны (влево / вправо) с закругленными углами в качестве изображения и фиксированной ширины.И средняя часть контента, которая не имеет фиксированной ширины.

РЕДАКТИРОВАТЬ

Демонстрация второго пути: http://jsfiddle.net/kc5ZC/4/

Я просто установил левый / правый с тем же красным цветом фона.Для этого вам придется создавать левые / правые изображения с закругленными углами.

0 голосов
/ 22 сентября 2011

Используйте технику раздвижных дверей ...

http://kailoon.com/css-sliding-door-using-only-1-image/

, а затем используйте автоматическую ширину с отступом по обе стороны.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...