Мені доводиться підтримувати велику кількість класичних сторінок ASP, на багатьох з яких є табличні дані, у яких немає можливостей сортування. Що б ви не замовляли оригінальний розробник, який використовується в запиті до бази даних, це те, що ви застрягли.

Я хочу застосувати деякі основні сортування на купу цих сторінок, і я роблю це на всій стороні клієнта за допомогою JavaScript. У мене вже є базовий сценарій для сортування заданої таблиці в заданому стовпчику в заданому напрямку, і він працює добре, поки таблиця обмежена певними умовами, яких ми дотримуємося тут.

Що я хочу зробити для інтерфейсу, це просто вказати напрямок сортування з символом caret (^) і ... що? Чи є особливий персонаж, який є прямою протилежністю карети? Лист vне дуже скоротить його. Як альтернатива, чи є інше поєднання символів, яке я можу використовувати?

Є ▲: & # 9650; та ▼: & # 9660;

Не забувайте символи ∧(логічні та) та ∨(логічні чи), саме це я використовую для вказівки напряму сортування: сутності HTML ∧та ∨відповідно.

Завжди є мале "v". Але якщо серйозно, окрім Unicode, все, що я можу знайти, було б &darrсхоже на ↓.

Перевернутий вниз головою називається карон , або хачек.

Він має сутність HTML у розширенні TADS Latin-2 до HTML: ˇі виглядає приблизно так: ˇ який, на жаль, не відображається у такому ж розмірі / пропорції, як ^ caret.

Або ви можете використовувати unicode U+30C.

˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅˅

 ˅˅˅  Hǝɹǝ, s ɐ ɯɐʇɔɥᴉuƃ sǝʇ˙  ˅˅˅
 Ось  набір відповідності.  ˄˄˄

˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄˄

"Фактичний розмір": ˅˄˅˄  
_{(детальніше)}

Редагувати: ще один варіант ...

⋁⋁⋁⋁⋁⋁⋁⋁⋁⋁ _{^{Unicode № 8897 / U + 22C1 ( інформація ) з}} назвою N-ARY LOGICAL OR

⋀⋀⋀⋀⋀⋀⋀⋀⋀⋀ _{^{Unicode № 8896 / U + 22C0 ( інформація ) з}} назвою N-ARY LOGICAL AND

"Фактичний розмір": ⋁⋀⋁⋀

Потужним варіантом - і тим, що також сприяє творчості - є створення власних персонажів за допомогою символів для малювання коробки .

Хочете вниз, вказуючи "каре"? Ось один: ╲╱

Нещодавно я їх виявив - і я із великим задоволенням використовую такі спеціально призначені символи для позначення речей навколо себе :).

Можливо, ви зможете використовувати чорні трикутники, значення Unicode U + 25b2 та U + 25bc. Або стрілки, U + 2191 і U + 2193.

c # код

int i = 0;
char c = '↑';
i = (int)c;
Console.WriteLine(i); // prints 8593

int j = 0;
char d = '↓';
j = (int)d;
Console.WriteLine(j); // prints 8595

Ви можете подумати про використання шрифту Awesome замість використання значків Unicode або інших значків

Код може бути таким же простим, як (a), включаючи приголомшливий шрифт, наприклад <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">(b) виготовлення кнопки типу<button><i class="fa fa-arrow-down"></i></button>

Я б використав пару крихітних зображень. Було б також краще виглядати.

Крім того, ви можете спробувати утиліту Map Character, яка постачається разом із Windows, або спробувати подивитися тут .

Ще одне я бачив - використовувати шрифт Wingdings для символів. У ньому багато стрілок.

Я зробив підписний капітал і напівжирним V. Він працює чудово (хоча це потребує певних зусиль, якщо це потрібно робити повторно)

Синтаксис:

<sub><strong>v</strong></sub>

Вихід:
_v

^(Каретка - або Ascii Метасимвол), проводиться шляхом натискання shift+ 6, як видається , не має Ascii протилежної, а саме ASCII - Inverted циркумфлекс.

Але для альтернативного спарювання символів, які також мають комбінації клавіатур, ви можете використовувати:

ˆ (Circumflex) shift+ alt+ iі
ˇ (Caron) shift+ alt+t

Джерело: fileformat.info

Персонаж каретки перевернутий догори ногами, але ви можете легко обертати карету за допомогою CSS. Це просте рішення, яке виглядає ідеально. Натисніть "Запустити фрагмент коду", щоб переглянути його в дії:

.upsidedown {
transform:rotate(180deg); 
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
}
.upsidedown.caret {
display: inline-block; 
position:relative; 
bottom: 0.15em;
}

more items <span class="upsidedown caret">^</span>

Зверніть увагу на наступне ...

• Я зробив невелику поправку для позиціонування каретки, оскільки вона зазвичай висока (таким чином, низька в обертовій версії). Ви хочете трохи перенести його вгору. Цей "маленький" по відношенню до розміру шрифту, звідси і 'em'. Залежно від вибору шрифту, ви можете захотіти поспілкуватися з цим, щоб він виглядав добре.
• Це рішення не працює в IE8. Ви повинні використовувати фільтр, якщо ви хочете підтримку IE8. Підтримка IE8 насправді не потрібна і не поширена в 2018 році.
• Якщо ви хочете використовувати це в поєднанні з Twitter Bootstrap, перейменуйте клас "caret" на щось інше, наприклад "caret_down" (оскільки він стикається з назвою класу з Twitter Bootstrap).

U + 2304 СТРЕЛА ВНИЗ , у HTML як & # 8964;

Не могли б ви просто намалювати шлях до svg всередині прольоту за допомогою document.write? Проміжок не потрібен для роботи svg, він просто забезпечує, що svg залишатиметься в рядку з текстом, з яким знаходиться карат. Я використовував поле з нижньою маркою, щоб вертикально централювати його з текстом, можливо, є ще один спосіб зробити це. Це те, що я зробив на моєму блозі nav (мінус js). Якщо у вас немає тексту поруч, вам не знадобиться зміщення діапазону чи зміщення внизу поля.

<div id="ID"></div>

<script type="text/javascript">
var x = document.getElementById('ID');

// your "margin-bottom" is the negative of 1/2 of the font size (in this example the font size is 16px)
// change the "stroke=" to whatever color your font is too
x.innerHTML = document.write = '<span><svg style="margin-bottom: -8px; height: 30px; width: 25px;" viewBox="0,0,100,50"><path fill="transparent" stroke-width="4" stroke="black" d="M20 10 L50 40 L80 10"/></svg></span>';
</script>

Тому я хотів, щоб карета була точно так само, як в OWA, тому я завантажила office365icons.woffз неї https://owa.example.com/owa/prem/15.1.1913.10/resources/styles/fonts/office365icons.woff(для цього потрібно увійти в систему, зробила це через браузер), а потім, скопіювавши стиль перекидання з веб-сайту:

  @font-face {
      font-family: 'Office365Icons';
      src: url('/fonts/office365icons.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  }

  span.o-icon {
      font-family: 'Office365Icons';
      font-size: 14pt;
      line-height: 21px;
      color: #666;
  }

І, нарешті:

<span class="o-icon">&#xe088;</span>

Якщо вам потрібні шрифтові приголомшливі програми для React Apps, тоді React Icons - це дуже хороший ресурс і дуже простий у реалізації. Він включає набагато більше бібліотек, ніж просто приголомшливий шрифт.