Fråga : Att visa SPÄNNER ÖVER för att simulera tb-lr ganska än det normalalr-tben långt av att visa saker.

Förmiddagen för Hello.

I bygger en generisk manick, som ska skärm en uppsättning av checkboxes, och etiketter i en vätska grid.

The avslutar - den ska användaren är kompetent att kontrollera storleksanpassa av behållaren, tillfogar any att utforma till beståndsdelarna, manicken för etc.

The accepterar en uppsättning av id=labelpairings och visar dem som… class= " lineNumbers " >
1 för >
 {$a_Data [”etikett”]} 

<-/pre>


Nothing complicated.

I've fick för alla storleksanpassa för automatisk gjort, så ingen materia vad storleksanpassar, etiketterna är (inom resonera - rödingar för kort stavelseetikettsub 50), checkboxesna all line up. 

In som kodifierasnippeten fäste, I've fick ett statisk elektricitetexempel. Den fullständigt dynamiska versionen optimeras inte ännu, utan fungerar fullständigt i IE8Standards, Firefox och krom. Den är precis ett lite långsamt i IE, och FF.


What som jag skulle något liknande för att göra, är att omorganisera spänner över, så att i stället för läs- från vänster till höger, vertikalt, de läser vertikalt, huvudsakliga problem för left-to-right.

The 2 jag har är: 

1 - numrera av beståndsdelar är okänd, tills manicken för runtime

The inkluderar en AJAX-beståndsdel för att hämta lista av ids och etiketter från en databas. Lista kan vara några data som det finns en passande serversida till responder.

2 - numrera av kolonner är okänt, tills runtime

The numrerar av kolonner är beslutsamma, på runtime, vid bredden av behållaren och maximat bredd av texten som tar in i konto, gränsar, förser med marginal och padding.


So, I-förmiddagen som söker efter egentligen 2 things.

1 - vilken algoritm kan jag använda för att låta mig sortera objekt för 1 n in i 1 sådan M kolonner att jumbon row innehåller några lämnade overs och, att kolonner fylls first.

2 - kan mig göra denna i JS genom precis att applicera positionering? 


OOI, den experimentella CSS3EN kolonn-räknar (och tillhörande härskar), skulle verkar för att erbjuda något hopp här. Om dem worked.

-moz-column-count & - webkit-kolonn-räkna båda verkar för att vara ofullbordat på ögonblicket. Och det uteslutar något i IE.



For exempeldatan, tillverkad bör se lik… för class=" codeSnippet " för 

1 för >AJDDQVIRXB GCVCSZUAXVSSFDOXF LYMWLFUHDCSOGTDIVU QEDFDVCSRLPM WMNVUPCDXEM " för prettyprint " för class= för id= " codeSnippet854356 " för >


Any för <-/pre>

Really. Något considered.

Regards, 

Richard Quadling.

  
  
   
> för 
           
             
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:


           
           " codeBody " 
          " >< för class= " för  
 
 
 
X-UA-Kompatibel " content= " IE=edge "/> för Test: Statisk elektricitetetikett Grid 

förkroppsliga,
html
	{
	bakgrund-färga: rgb (23, 23, 23);
	gränsa: 0;
	färga: rgb (255, 255, 255);
	stilsort: Verdana 100%/1.25, ”gotiskt århundrade”, Calibri, ”stora Lucida”, Arial som är helvetica, Sans Serif;
	förse med marginal: 0;
	vaddera: 0;
	}

förkroppsliga
	{
	förse med marginal: 10px;
	}

#cbGrid
	{
	bakgrund-färga: rgb (216, 229, 241);
	gränsa: 3px fast rgb (55, 96, 145);
	färga: rgb (0, 0, 0);
	flöte: högert;
	vaddera: 0;
	förse med marginal: 5px;
	bredd: 85%;
	}

#cbGrid h1
	{
	gränsa-bottna: svart för heltäckande 1px;
	gränsa-radie: 0;
	stilsort-storleksanpassa: 2em;
	stilsort-väga: det normala;
	letter-spacing: 01px;
	förse med marginal: 0 0 5px;
	vaddera: 0;
	text-arrangera i rak linje: centrera;
	text-skugga: inga;
	vit-göra mellanslag: det normala;
	}

#cbGrid matar in [type=checkbox]
	{
	gränsa: 0;
	förse med marginal: 0 5px;
	vaddera: 0;
	}

#cbGridetikett
	{
	stilsort-storleksanpassa: 8pt;
	vaddera-bottna: 0px;
	vaddera-rätt: 5px;
	placera: släkting;
	text-skugga: inga;
	bästa: -2px;
	}

#cbGrid spänner över
	{
	flöte: lämnat;
	förse med marginal-lämnat: 1px;
	förse med marginal-rätt: 1px;
	minut-bredd: 201px;
	vaddera: 0 4.1px;
	vit-göra mellanslag: nowrap;
	}

#cbGrid spänner över: svävande
	{
	bakgrund-färga: rgb (184, 197, 209);
	markör: pekare;
	}

 
 

 
	
Test: Statisk elektricitetetikett Grid
 
	
 
		Pröva förmiddag I att skapa ett sådan pseudoraster att checkboxesna all line up som baseras på bredderna av labels. 
		Dessa behöver att vara dynamiska, som de nya etiketterna tillfogas varje annan månad eller så.
	
 

 
 
	
Select labels
 
	AJDDQVIRXB 
	AJRWJTWTIPBGUBQ 
	AMIXMKEZGM 
	APYYSBXVPPWVIRDSQSYI 
	AQN 
	AVAXA 
	AVGQHKAIAYUGXEWQ 
	BJKJFJYFETPXVDFMHH 
	BKTYJGMNQXXAAA 
	BKUIQXHFJ 
	BMEHSWZISSBZ 
	BVPMKLOFBGLJSIB 
	CRQMMXAVSIYWKSLPB 
	CVEXAVCYQWY 
	EAWAYLHZ 
	EBIOVEMTA 
	ENGRPJGWDYCW 
	ENXUDZWUF 
	FJJMQKRMSVIHNAQXXW 
	FSKNGNNKQ 
	FVCXPZLXYPE 
	FWG 
	GAEUPSNZQRGWLYIF 
	GCVCSZUAXVSSFDOXF 
	GFGCXSWYEQJKRE 
	GITDBCVTAHVVFTLAMZG 
	GJAMXBZKSO 
	GONTINDHSIEMBS 
	GYVSKFC 
	HABDVNDI 
	HKZ 
	HNDHYSZBYZFGT 
	HOBINLMPWRWIDVBIOGR 
	HRWETYNHFGXJN 
	IFHNXGDGXXRDTEVIIJ 
	JOVFCFHUQBSRV 
	JPO 
	JQSZDG 
	JYWXVQMLMVTWZIBSE 
	KEL 
	LFKXNDOL 
	LLCNKIYRLPSYAOJM 
	LSFXIDXYLHBW 
	LXGVRMAP 
	LXVTZEBPY 
	LYMWLFUHDCSOGTDIVU 
	MBHTO 
	MNORWCWC 
	MOYM 
	MWPZ 
	MWTCCMNWCNSZJEZSJ 
	MZTBJSURMAPNP 
	NDPRBCDU 
	NEYAGJHGVACZ 
	NGVIWTZSLVWN 
	NMZRZXDFDJU 
	NOWPKIXJHS 
	PAPDJLVIVGBESBK 
	PBPQHIBFMIBNJY 
	POAOXFGNZBW 
	PQGSIPWFDMHOVY 
	PREOINTJWV 
	PTKKXCUEFGFAB 
	PUQYWOXUUZZMZ 
	PZQKHHVCBF 
	QCFZRB 
	QDKSFUMJQTPK 
	QEDFDVCSRLPM 
	QJMCOFZBGET 
	QXCIVWCGXPKTY 
	QYFJJMXMTCPDQD 
	RLZOOGHJNVZDEFKHT 
	RQXFJCZGYEWPDRTXZH 
	RSMKDDWUOSYAWEHEGC 
	SDFJXJDOXTXTBIBCO 
	SLNUYAL 
	SWOHQPGQNDLLEBAZ 
	TOE 
	TROXMCROFXKZ 
	TVGIMKBYRW 
	UANFZTVBBZCB 
	UJKACYFKSBSPIA 
	UOEPPBAZMRXUY 
	UZZOTOXRFPXEHFMQ 
	VETKKOWMZLAP 
	VUNNYXLNZUYLV 
	VXBICHZ 
	WKOTS 
	WLQYOETGJ 
	WMNVUPCDXEM 
	WNJSVVICXUSXL 
	WNSXUJLQUSLLFMF 
	WQF 
	WUGBNXILWXOKM 
	WYDDXRWDQPH 
	XEW 
	XLUAQ 
	XQABOUIJPWRZDTZEXI 
	XUGSSAUBZZI 
	XYKAWQEQMYDU 
	XZOCDZFIVHTGNPAA 
	YGWZCLJQFPI 
	YJBSJEJX 
	YLRJAFKTAQYZRJIJXXQ 
	YPGXRXKDVFZYAUZYH 
	YRBDXVWHEQUIT 
	YRLXQVQCWEKIAYG 
	YXYYDTZYGURC 
	YZALVXZFKPKFZE 
	ZMDLCZBLCWZKD 
	ZMFDWTXAJPMFBO 
 


           
         
       


   
" klar "

Svar : Att visa SPÄNNER ÖVER för att simulera tb-lr ganska än det normalalr-tben långt av att visa saker.

(Inelegant) kodifiera efter är untested, men det bör få dig startad.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:

Givet numrera av uttrycker och kolonner:

var-word_count = 111;
var-cols = 5;
var-extrahjälp = 0;
var-spill = [0.0.0.0.0]; // samma nr. av beståndsdelar som nr. av kolonner
var ror = parseInt (word_count/cols, 10); // uttrycker per kolonn
var i = 0;

om (ror * cols)! ==word_count) { 
    extrahjälp = word_count - (ror  * cols); // rester?
    om (extrahjälp! == 0) {
        ror += 1; // behov another ror för rester
    }
}

/*
Du vet att nr. av tillträden per kolonn och dig kan dela ”word_listen” på utrymmen 
och kretsa till och med uttrycker och att bygga dina beståndsdelar, (eller flik eller allt vad)
*

var uttrycker = wordlist.split (''); // skapar samling av uttrycker
var spänner över = [];

för (var i = 0; i  < cols="">
        spänna över [(I  + (j * cols)] = "" + (I + (j * cols);
    }
}

/*
”spänna över” rymmer nu beståndsdelarna i columnar beställer:
[
   0 24, 46, 68, 90,
   1 25, 47, 69, 91,
   2 26, 48, 70, 92,
…,
  22 45, 67, 89.111
  23  --  --  --  --
]

och du kan tillfoga dem till DOMNA med ett enkelt kretsar
*

för (I = 0; i  < span="">
Andra lösningar  
 
programming4us programming4us