Devo mantenere un gran numero di pagine ASP classiche, molte delle quali hanno dati tabulari senza capacità di ordinamento. Qualunque ordine lo sviluppatore originale abbia utilizzato nella query del database è ciò con cui sei bloccato.

Voglio concentrarmi su alcuni ordinamenti di base su un mucchio di queste pagine e sto facendo tutto il lato client con javascript. Ho già fatto lo script di base per ordinare una determinata tabella su una determinata colonna in una determinata direzione, e funziona bene fino a quando la tabella è limitata da alcune convenzioni che seguiamo qui.

Quello che voglio fare per l'interfaccia utente è solo indicare la direzione di ordinamento con il carattere di inserimento (^) e ... cosa? C'è un personaggio speciale che è l'opposto diretto di un cursore? La lettera vnon la taglierà del tutto. In alternativa, c'è un altro personaggio che posso usare?

C'è ▲: & # 9650; e ▼: & # 9660;

Non dimenticare i caratteri ∧(logici e) e ∨(logici o), è quello che uso per indicare la direzione di ordinamento: entità HTML ∧e ∨rispettivamente.

C'è sempre una "v" minuscola. Ma seriamente, a parte Unicode, tutto ciò che posso trovare sarebbe &darr, che sembra ↓.

Un circonflesso rovesciato è chiamato caron o háček.

Ha un'entità HTML nell'estensione TADS Latin-2 a HTML: ˇe si presenta così: ˇ che purtroppo non viene visualizzato nella stessa dimensione / proporzione del ^ cursore.

Oppure puoi usare l'unicode U+30C.

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

 ˅˅˅  Hǝɹǝ, s ɐ ɯɐʇɔɥᴉuƃ sǝʇ˙  ˅˅˅
 Ecco  un insieme di corrispondenza.

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

"Dimensione reale": ˅˄˅˄  
_{(maggiori informazioni)}

Modifica: un'altra opzione ...

⋁⋁⋁⋁⋁⋁⋁⋁⋁⋁ _{^{Unicode # 8897 / U + 22C1 ( informazioni )}} denominato N-ARY LOGICAL OR

⋀⋀⋀⋀⋀⋀⋀⋀⋀⋀ _{^{Unicode # 8896 / U + 22C0 ( informazioni )}} denominato N-ARY LOGICAL AND

"Dimensione reale": ⋁⋀⋁⋀

Un'opzione potente - e che aumenta anche la creatività - è la progettazione dei propri personaggi utilizzando personaggi di disegno a scatola .

Vuoi un "cursore" verso il basso? Eccone uno: ╲╱

Li ho scoperti di recente e mi fa molto piacere usare personaggi così personalizzati per etichettare le cose intorno :).

Potresti essere in grado di utilizzare i triangoli neri, i valori Unicode U + 25b2 e U + 25bc. O le frecce, U + 2191 e U + 2193.

codice 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

Potresti prendere in considerazione l'uso di Font Awesome invece di usare l'unicode o altre icone

Il codice può essere semplice come (a) incluso font-awesome, ad esempio <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">(b) creare un pulsante come<button><i class="fa fa-arrow-down"></i></button>

Userei un paio di piccole immagini. Anche apparirebbe meglio.

In alternativa, puoi provare l'utilità Mappa caratteri fornita con Windows o cercare qui .

Un'altra soluzione che ho visto è usare il carattere Wingdings per i simboli. Questo ha molte frecce.

Ho scritto in maiuscolo e in grassetto V. Funziona perfettamente (anche se richiede uno sforzo, se deve essere fatto ripetutamente)

Sintassi:

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

Uscita:
_v

L' ^(Caret - o ASCII circonflesso), prodotte premendo shift+6 , non sembra avere un Ascii opposto, ovvero un Ascii Inverted Circumflex.

Ma per il tuo abbinamento di personaggi alternativi che hanno anche combinazioni di tastiere, puoi usare:

ˆ (Circumflex) shift+ alt+ ie
ˇ (Caron) shift+alt +t

Fonte: fileformat.info

Non esiste un carattere di capovolto capovolto, ma puoi ruotare facilmente il cursore con CSS. Questa è una soluzione semplice che sembra perfetta. Premi "Esegui snippet di codice" per vederlo in azione:

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

Si prega di notare quanto segue...

• Ho fatto una piccola correzione per il posizionamento del cursore, in quanto è normalmente alto (quindi basso nella versione ruotata). Vuoi spostarlo un po 'in alto. Questo 'piccolo' è relativo alla dimensione del carattere, da cui la 'em'. A seconda della scelta del carattere, potresti voler giocherellare con questo per farlo sembrare buono.
• Questa soluzione non funziona in IE8. È necessario utilizzare un filtro se si desidera il supporto IE8. Il supporto per IE8 non è realmente richiesto né comune nel 2018.
• Se si desidera utilizzarlo in combinazione con Twitter Bootstrap, rinominare la classe "caret" in qualcos'altro, come "caret_down" (poiché si scontra con un nome di classe da Twitter Bootstrap).

U + 2304 FRECCIA GIÙ , in HTML come & # 8964;

Potresti semplicemente disegnare un percorso svg all'interno di uno span usando document.write? L'intervallo non è necessario per il funzionamento di svg, ma garantisce solo che lo svg rimanga in linea con qualsiasi testo accanto al carato. Ho usato margin-bottom per centrarlo verticalmente con il testo, ma potrebbe esserci un altro modo per farlo. Questo è quello che ho fatto sul navigatore laterale del mio blog (meno la js). Se non si dispone di testo accanto ad esso, non è necessario lo span o l'offset del margine inferiore.

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

Quindi volevo il cursore esattamente come in OWA, quindi ho scaricato office365icons.woffda https://owa.example.com/owa/prem/15.1.1913.10/resources/styles/fonts/office365icons.woff(è necessario aver effettuato l'accesso per farlo, quindi l'ho fatto tramite il browser) e quindi, copiando lo stile ridotto dal sito 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;
  }

E infine:

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

Se hai bisogno di un font fantastico per le app React, React Icons è un'ottima risorsa e molto facile da implementare. Include molte più librerie che solo font-awesome.