Tôi phải duy trì một số lượng lớn các trang ASP cổ điển, nhiều trang có dữ liệu dạng bảng không có khả năng sắp xếp nào cả. Bất cứ thứ tự nào nhà phát triển ban đầu được sử dụng trong truy vấn cơ sở dữ liệu là những gì bạn đang mắc kẹt.

Tôi muốn giải quyết một số cách sắp xếp cơ bản cho một loạt các trang này và tôi đang thực hiện tất cả các phía máy khách bằng javascript. Tôi đã có kịch bản cơ bản được thực hiện để sắp xếp một bảng đã cho trên một cột nhất định theo một hướng nhất định và nó hoạt động tốt miễn là bảng bị giới hạn bởi các quy ước nhất định mà chúng tôi tuân theo ở đây.

Những gì tôi muốn làm cho UI chỉ là chỉ ra hướng sắp xếp với ký tự dấu mũ (^) và ... cái gì? Có một nhân vật đặc biệt là đối diện trực tiếp của một caret? Bức thư vsẽ không hoàn toàn cắt nó. Ngoài ra, có một cặp nhân vật khác tôi có thể sử dụng?

Có: & # 9650; và: & # 9660;

Đừng quên các ký tự ∧(logic và) và ∨(logic hoặc), đó là những gì tôi sử dụng để chỉ hướng sắp xếp: các thực thể HTML ∧& ∨tương ứng.

Luôn có chữ thường "v". Nhưng nghiêm túc, ngoài Unicode, tất cả những gì tôi có thể tìm thấy sẽ &darrgiống như.

Một tetflex lộn ngược được gọi là caron , hoặc háček .

Nó có một thực thể HTML trong phần mở rộng TADS Latin-2 thành HTML: ˇvà trông như thế này: ˇ không may hiển thị ở cùng kích thước / tỷ lệ như ^ caret.

Hoặc bạn có thể sử dụng unicode U+30C.

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

 ˅˅˅  Hǝɹǝ, s ɐ ɯɐʇɔɥᴉuƃ sǝʇ˙  ˅˅˅
 Dưới đây  là một tập hợp.

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

"Kích thước thực tế": ˅˄˅˄  
_{(thêm thông tin)}

Chỉnh sửa: Tùy chọn khác ...

⋁⋁⋁⋁⋁⋁⋁⋁⋁⋁ _{^{Unicode # 8897 / U + 22C1 ( thông tin )}} có tên N-ARY LOGICS HOẶC

⋀⋀⋀⋀⋀⋀⋀⋀⋀⋀ _{^{Unicode # 8896 / U + 22C0 ( thông tin )}} có tên N-ARY LOGICS VÀ

"Kích thước thực sự": ⋁⋀⋁⋀

Một tùy chọn mạnh mẽ - và một tùy chọn cũng giúp tăng khả năng sáng tạo - là thiết kế các ký tự của riêng bạn bằng cách sử dụng các ký tự vẽ hộp .

Bạn muốn một "dấu mũ" xuống? Đây là một:

Gần đây tôi đã phát hiện ra chúng - và tôi rất vui khi sử dụng các ký tự được thiết kế tùy chỉnh như vậy để dán nhãn mọi thứ xung quanh :).

Bạn có thể sử dụng các hình tam giác màu đen, giá trị Unicode U + 25b2 và U + 25bc. Hoặc các mũi tên, U + 2191 và U + 2193.

mã 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

Bạn có thể cân nhắc sử dụng Font Awesome thay vì sử dụng unicode hoặc các biểu tượng khác

Mã có thể đơn giản như (a) bao gồm phông chữ tuyệt vời, ví dụ: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">(b) tạo một nút như<button><i class="fa fa-arrow-down"></i></button>

Tôi sẽ sử dụng một vài hình ảnh nhỏ. Nhìn cũng tốt hơn.

Ngoài ra, bạn có thể dùng thử tiện ích Bản đồ nhân vật đi kèm với Windows hoặc thử tìm kiếm tại đây .

Một giải pháp khác tôi từng thấy là sử dụng phông chữ Wingdings cho các biểu tượng. Điều đó có rất nhiều cho mũi tên.

Tôi đã đăng ký vốn & in đậm V. Nó hoạt động hoàn hảo (mặc dù phải mất một số nỗ lực, nếu nó cần phải được thực hiện lặp đi lặp lại)

Cú pháp:

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

Đầu ra:
_v

Các ^(Caret - hoặc Ascii o Dấu), được sản xuất bằng cách nhấn shift+ 6, không xuất hiện để có một đối diện Ascii, cụ thể là một Ascii Inverted o Dấu.

Nhưng để ghép cặp ký tự thay thế của bạn cũng có kết hợp bàn phím, bạn có thể sử dụng:

(Circumflex) shift+ alt+ ivà
(Caron) shift+ alt+t

Nguồn: fileformat.info

Không có ký tự dấu mũ lộn ngược, nhưng bạn có thể dễ dàng xoay dấu mũ bằng CSS. Đây là một giải pháp đơn giản mà trông hoàn hảo. Nhấn 'Chạy đoạn mã' để xem nó hoạt động:

.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>

Xin lưu ý những điều sau ...

• Tôi đã điều chỉnh một chút cho vị trí của dấu mũ, vì nó thường cao (do đó thấp trong phiên bản xoay). Bạn muốn di chuyển nó lên một chút. 'Nhỏ' này liên quan đến kích thước phông chữ, do đó 'em'. Tùy thuộc vào lựa chọn phông chữ của bạn, bạn có thể muốn sử dụng nó để làm cho nó trông đẹp hơn.
• Giải pháp này không hoạt động trong IE8. Bạn nên sử dụng bộ lọc nếu bạn muốn hỗ trợ IE8. Hỗ trợ IE8 không thực sự cần thiết và cũng không phổ biến trong năm 2018.
• Nếu bạn muốn sử dụng kết hợp với Twitter Bootstrap, vui lòng đổi tên lớp 'caret' thành một tên khác, như 'caret_down' (vì nó va chạm với tên lớp từ Twitter Bootstrap).

U + 2304 M ARI TÊN XUỐNG , trong HTML dưới dạng & # 8964;

Bạn có thể vẽ đường dẫn svg bên trong một khoảng bằng cách sử dụng document.write không? Khoảng thời gian không cần thiết để svg hoạt động, nó chỉ đảm bảo rằng Svg vẫn ở trạng thái nội tuyến với bất kỳ văn bản nào mà carat bên cạnh. Tôi đã sử dụng lề dưới để căn giữa nó với văn bản, có thể có một cách khác để làm điều đó. Đây là những gì tôi đã làm trên điều hướng bên blog của tôi (trừ js). Nếu bạn không có văn bản bên cạnh, bạn sẽ không cần khoảng thời gian hoặc phần bù dưới lề.

<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>

Vì vậy, tôi muốn caret chính xác như trong OWA, vì vậy tôi đã tải xuống office365icons.wofftừ https://owa.example.com/owa/prem/15.1.1913.10/resources/styles/fonts/office365icons.woff(phải đăng nhập để làm điều đó, cũng như vậy thông qua trình duyệt) và sau đó, sao chép kiểu đun sôi từ trang web:

  @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;
  }

Và cuối cùng:

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

Nếu bạn đang cần phông chữ tuyệt vời cho Ứng dụng React thì Biểu tượng React là một tài nguyên rất tốt và rất dễ thực hiện. Nó bao gồm rất nhiều thư viện hơn là chỉ phông chữ tuyệt vời.