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