Добавление стилей фокусировки в сетку пользовательского интерфейса Kendo?

Работает над улучшением доступности сайта с использованием сетки пользовательского интерфейса Kendo.Добавление стилей фокусировки в сетку пользовательского интерфейса Kendo?

Испытывать проблемы, добавляя стиль к сетке, используя все наследование стиля, встроенное в пользовательский интерфейс Kendo.

Кто-нибудь знает, как изменить стиль фокусировки якорных тегов (или любых элементов HTML, если на то пошло) в сетке пользовательского интерфейса Kendo?

Пример - Я хотел бы добавить этот стиль к элементам сетки:

a:focus { outline: #FF0000 dotted medium; }

источник

2014-01-03 Zach B

вы можете предоставить jsfiddle – 3bu1

я не понял, что именно вы хотите ..? Когда вы нажимаете на якорный тег, если он в одиночку меняет свою собственность, выглядя иначе, чем другие? – 3bu1

@ 3bu1 - Задача заключалась в том, чтобы попасть в стили сетки, не затрагивая элементы вне шаблона пользовательского интерфейса Kendo. OnaBai получил работу через jsfiddle [здесь] (http://jsfiddle.net/F5R7m/2/) –

Я предполагаю, что вы используете шаблон для рендеринга столбца как HTML anchor, верно?

Вы должны иметь что-то вроде:

{ 
    field: "City", 
    width: 200, 
    template: "<a href='http://maps.google.com?q=#= City #'>#= City #</a>" 
}

Если вы сделаете это, и использовать CSS:

a:focus { outline: #FF0000 dotted medium; }

Это работает! Проверьте это здесь: http://jsfiddle.net/F5R7m/1/

Теперь возникает вопрос, хотите ли вы ограничивать этот стиль только сеткой, чтобы якорь вне сетки не получал тот же стиль. Затем вы можете определить шаблон, как:

{ 
    field: "City", 
    width: 200, 
    template: "<a class='ob-grid' href='http://maps.google.com?q=#= City #'>#= City #</a>" 
}

и стиль CSS, как:

a.ob-grid:focus { 
    outline: #FF0000 dotted medium; 
}

и вы получите это работает, как в этом примере: http://jsfiddle.net/F5R7m/2/

Или вы можете ограничить его к одному единую сетку без изменения шаблона путем определения CSS как:

#grid a:focus { 
    outline: #FF0000 dotted medium; 
}

#grid относится к id вашего пользовательского интерфейса Kendo grid. Пример здесь: http://jsfiddle.net/F5R7m/3/

И если вы хотите для каждой сетки в вашей странице, вы можете определить, вы CSS, как:

.k-grid a:focus { 
    outline: #FF0000 dotted medium; 
}

Тогда любой HTML якорь будет иметь красную пунктирную линию, когда она получает фокус как в здесь: http://jsfiddle.net/F5R7m/5/

источник

2014-01-03 17:37:56 OnaBai

Большое спасибо! Это именно то направление, к которому я стремился. Моя задача заключалась в понимании того, как попасть в сетку пользовательского интерфейса Kendo без изменения шаблона или внешних стилей, как в третьем примере. Это очень подробное объяснение и очень ценится. –

Вы наиболее likly просто нужно добавить важный в вашем CSS!.

Я использую следующий JS, чтобы добавить класс CSS к тр в кендо сетке для цветных строк по-разному и для эффекта раскраски, (в данном случае с помощью тд, содержащей конкретное слово):

function setMessageColor(){ 
    $("#EventMessagesGrid tr td:contains('Nominal')").closest('tr').addClass("nominal-message"); 
    $("#EventMessagesGrid tr td:contains('Warning')").closest('tr').addClass("warning-message"); 
    $("#EventMessagesGrid tr td:contains('Failure')").closest('tr').addClass("failure-message"); 
}

с помощью CSS для этих классов ниже этой модели:

.warning-message { 
background-color: #fffdec !important; 
} 
.warning-message:hover { 
    background-color: #fff9c2 !important; 
}

источник

2014-01-03 17:37:46

в зависимости от того, как сетка установка ...

Кендо добавляет выбранный класс к элементу.

Вы можете настроить таргетинг в css на что-то вроде этого.

.k-state-selected{ 
    border: 1px dotted red !important; 
}

Возможно, вам не понадобится важная информация, если у вас есть загруженный css последний, но это не повредит его использованию.

источник

2014-01-03 17:47:12

Добавление стилей фокусировки в сетку пользовательского интерфейса Kendo?

ответ

Смежные вопросы