基於duilib實現的可滑動tab標簽控件，duilib標簽控件
最近一直在忙棋牌游戲大廳的開發，使用了duilib界面庫，在大廳界面游戲菜單的展現上需要用到滑動的效果，類似悠揚棋牌，jj棋牌的菜單左右（上下）滑動的效果。通過自己的設計思路完善了一個可滑動的tab標簽控件。效果如下：
![]()
1 #ifndef __SLIDERTABLAYOUT_H__
2 #define __SLIDERTABLAYOUT_H__
3
4 #pragma once
5
6
7 namespace DuiLib {
8
9 class UILIB_API CSliderTabLayoutUI : public CTabLayoutUI
10 {
11 public:
12 CSliderTabLayoutUI();
13
14 LPCTSTR GetClass() const;
15 LPVOID GetInterface(LPCTSTR pstrName);
16 void DoEvent(TEventUI& event);
17 void OnTimer( int nTimerID );
18
19 bool SelectItem( int iIndex );
20
21 void OnSliderStep();
22
23 void SetAttribute(LPCTSTR pstrName, LPCTSTR pstrValue);
24
25 protected:
26 int m_iCurFrame;
27 bool m_bIsVertical;
28 int m_nPositiveDirection;
29
30 RECT m_rcCurPos;
31 RECT m_rcNextPos;
32
33 CControlUI* m_pCurPage; // 保存當前顯示的頁面
34 CControlUI* m_pNextPage; // 保存下一頁面
35
36
37 enum
38 {
39 TIMER_ANIMATION_ID = 1,
40 ANIMATION_ELLAPSE = 2,
41 ANIMATION_FRAME_COUNT = 30
42 };
43 };
44
45 class UILIB_API CSliderTabLayoutUI2 : public CTabLayoutUI
46 {
47 public:
48 CSliderTabLayoutUI2();
49
50 LPCTSTR GetClass() const;
51 LPVOID GetInterface(LPCTSTR pstrName);
52 void DoEvent(TEventUI& event);
53 void OnTimer( int nTimerID );
54
55 bool SelectItem( int iIndex );
56
57 void OnSliderStep();
58
59 void SetAttribute(LPCTSTR pstrName, LPCTSTR pstrValue);
60
61 protected:
62 int m_iCurFrame;
63 bool m_bIsVertical;
64 int m_nPositiveDirection;
65
66 RECT m_rcCurPos;
67 RECT m_rcNextPos;
68 RECT m_SldItem;
69
70 CControlUI* m_pCurPage; // 保存當前顯示的頁面
71 CControlUI* m_pNextPage; // 保存下一頁面
72 CHorizontalLayoutUI* m_pTabSlider;
73 CVerticalLayoutUI* m_pVTabSlider;
74
75 enum
76 {
77 TIMER_ANIMATION_ID = 1,
78 ANIMATION_ELLAPSE = 10,
79 ANIMATION_FRAME_COUNT = 30
80 };
81 };
82
83
84 class UILIB_API CSliderTabLayoutUI3 : public CTabLayoutUI
85 {
86 public:
87 CSliderTabLayoutUI3();
88
89 LPCTSTR GetClass() const;
90 LPVOID GetInterface(LPCTSTR pstrName);
91 void DoEvent(TEventUI& event);
92 void OnTimer( int nTimerID );
93
94 void SetPos(RECT rc);
95 bool SelectItem( int iIndex );
96
97 void OnSliderStep();
98
99 void SetAttribute(LPCTSTR pstrName, LPCTSTR pstrValue);
100
101 protected:
102 int m_iCurFrame;
103 bool m_bIsVertical;
104 int m_nPositiveDirection;
105
106 bool m_bAnimating;
107
108 RECT m_rcCurPos;
109 RECT m_rcNextPos;
110
111 CControlUI* m_pCurPage; // 保存當前顯示的頁面
112 CControlUI* m_pNextPage; // 保存下一頁面
113
114 enum
115 {
116 TIMER_ANIMATION_ID = 1,
117 ANIMATION_ELLAPSE = 10,
118 ANIMATION_FRAME_COUNT = 15
119 };
120 };
121
122 } // namespace DuiLib
123
124 #endif // __UISlider_H__
View Code
UISliderTabLayout.cpp
![]()
1 #include "StdAfx.h"
2 #include "UISliderTabLayout.h"
3
4 namespace DuiLib {
5
6
7
8 //////////////////////////////////////////////////////////////////////////
9 // CSliderTabLayoutUI
10 CSliderTabLayoutUI::CSliderTabLayoutUI() :
11 m_bIsVertical( false ),
12 m_iCurFrame( 0 )
13 {
14 }
15
16 LPCTSTR CSliderTabLayoutUI::GetClass() const
17 {
18 return _T("SliderTabLayoutUI");
19 }
20
21 LPVOID CSliderTabLayoutUI::GetInterface(LPCTSTR pstrName)
22 {
23 if( _tcscmp(pstrName, _T("SliderTabLayoutUI")) == 0 )
24 return static_cast<CSliderTabLayoutUI*>(this);
25 return CTabLayoutUI::GetInterface(pstrName);
26 }
27
28 bool CSliderTabLayoutUI::SelectItem( int iIndex )
29 {
30 if( iIndex < 0 || iIndex >= m_items.GetSize() ) return false;
31 if( iIndex == m_iCurSel ) return true;
32 if( iIndex > m_iCurSel ) m_nPositiveDirection = -1;
33 if( iIndex < m_iCurSel ) m_nPositiveDirection = 1;
34
35 m_iCurFrame = 0;
36 m_rcNextPos = m_rcCurPos = m_rcItem;
37 if( !m_bIsVertical ) //橫向
38 {
39 m_rcNextPos.left = m_rcCurPos.left - (m_rcCurPos.right - m_rcCurPos.left) * m_nPositiveDirection;
40 m_rcNextPos.right = m_rcCurPos.right - (m_rcCurPos.right - m_rcCurPos.left) * m_nPositiveDirection;
41 }
42 else
43 {
44 m_rcNextPos.top = m_rcCurPos.top - (m_rcCurPos.bottom - m_rcCurPos.top) * m_nPositiveDirection;
45 m_rcNextPos.bottom = m_rcCurPos.bottom - (m_rcCurPos.bottom - m_rcCurPos.top) * m_nPositiveDirection;
46 }
47
48 int iOldSel = m_iCurSel;
49 m_iCurSel = iIndex;
50 for( int it = 0; it < m_items.GetSize(); it++ )
51 {
52 if( it == iIndex ) {
53 m_pNextPage = GetItemAt(it);
54 m_pNextPage->SetPos(m_rcNextPos);
55 m_pNextPage->SetVisible(true);
56 }
57 else if( it == iOldSel )
58 {
59 m_pCurPage = GetItemAt(it);
60 m_pCurPage->SetVisible(true);
61 }
62 else
63 GetItemAt(it)->SetVisible(false);
64 }
65
66 m_pManager->SetTimer( this, TIMER_ANIMATION_ID, ANIMATION_ELLAPSE );
67 if( m_pManager != NULL ) {
68 //m_pManager->SetNextTabControl();
69 m_pManager->SendNotify(this, _T("tabselect"), m_iCurSel, iOldSel);
70 }
71 return true;
72 }
73
74 void CSliderTabLayoutUI::DoEvent(TEventUI& event)
75 {
76 if( event.Type == UIEVENT_TIMER )
77 {
78 OnTimer( event.wParam );
79 }
80 else
81 CContainerUI::DoEvent(event);
82 //__super::DoEvent( event );
83 }
84
85 void CSliderTabLayoutUI::OnTimer( int nTimerID )
86 {
87 OnSliderStep();
88 }
89
90 void CSliderTabLayoutUI::OnSliderStep()
91 {
92 int iStepLen = 0;
93 if( !m_bIsVertical ) //橫向
94 {
95 iStepLen = ( m_rcItem.right - m_rcItem.left ) * m_nPositiveDirection / ANIMATION_FRAME_COUNT;
96 if( m_iCurFrame != ANIMATION_FRAME_COUNT )
97 {
98 //當前窗體位置
99 m_rcCurPos.left = m_rcCurPos.left + iStepLen;
100 m_rcCurPos.right = m_rcCurPos.right +iStepLen;
101 //下一個窗體位置
102 m_rcNextPos.left = m_rcNextPos.left + iStepLen;
103 m_rcNextPos.right = m_rcNextPos.right +iStepLen;
104 m_pCurPage->SetPos(m_rcCurPos);
105 m_pNextPage->SetPos(m_rcNextPos);
106 }
107 else
108 {
109 m_pCurPage->SetVisible(false);
110 m_pNextPage->SetPos(m_rcItem);
111 }
112 }
113 else //豎向
114 {
115 iStepLen = ( m_rcItem.bottom - m_rcItem.top ) * m_nPositiveDirection / ANIMATION_FRAME_COUNT;
116 if( m_iCurFrame != ANIMATION_FRAME_COUNT )
117 {
118 //當前窗體位置
119 m_rcCurPos.top = m_rcCurPos.top + iStepLen;
120 m_rcCurPos.bottom = m_rcCurPos.bottom +iStepLen;
121 //下一個窗體位置
122 m_rcNextPos.top = m_rcNextPos.top + iStepLen;
123 m_rcNextPos.bottom = m_rcNextPos.bottom +iStepLen;
124 m_pCurPage->SetPos(m_rcCurPos);
125 m_pNextPage->SetPos(m_rcNextPos);
126 }
127 else
128 {
129 m_pCurPage->SetVisible(false);
130 m_pNextPage->SetPos(m_rcItem);
131 }
132 }
133
134 //NeedParentUpdate();
135
136 if( m_iCurFrame == ANIMATION_FRAME_COUNT )
137 {
138 NeedParentUpdate();
139 m_pManager->KillTimer( this, TIMER_ANIMATION_ID );
140 }
141 m_iCurFrame ++;
142 }
143
144 void CSliderTabLayoutUI::SetAttribute(LPCTSTR pstrName, LPCTSTR pstrValue)
145 {
146 if( _tcscmp(pstrName, _T("direction")) == 0 && _tcscmp( pstrValue, _T("vertical")) == 0 ) m_bIsVertical = true; // pstrValue = "vertical" or "horizontal"
147 return CTabLayoutUI::SetAttribute(pstrName, pstrValue);
148 }
149
150 //////////////////////////////////////////////////////////////////////////
151 // CSliderTabLayoutUI2
152 CSliderTabLayoutUI2::CSliderTabLayoutUI2() :
153 m_bIsVertical( false ),
154 m_iCurFrame( 0 )
155 {
156 }
157
158 LPCTSTR CSliderTabLayoutUI2::GetClass() const
159 {
160 return _T("SliderTabLayoutUI2");
161 }
162
163 LPVOID CSliderTabLayoutUI2::GetInterface(LPCTSTR pstrName)
164 {
165 if( _tcscmp(pstrName, _T("SliderTabLayoutUI2")) == 0 )
166 return static_cast<CSliderTabLayoutUI2*>(this);
167 return CTabLayoutUI::GetInterface(pstrName);
168 }
169
170 bool CSliderTabLayoutUI2::SelectItem( int iIndex )
171 {
172 if( iIndex < 0 || iIndex >= m_items.GetSize() ) return false;
173 if( iIndex == m_iCurSel ) return true;
174
175 m_iCurFrame = 0;
176
177 int iOldSel = m_iCurSel;
178 m_iCurSel = iIndex;
179 for( int it = 0; it < m_items.GetSize(); it++ )
180 {
181 if( it == iIndex ) {
182 m_pNextPage = GetItemAt(it);
183 }
184 else if( it == iOldSel )
185 {
186 m_pCurPage = GetItemAt(it);
187 m_pCurPage->SetVisible(true);
188 }
189 else
190 GetItemAt(it)->SetVisible(false);
191 }
192
193 if( !m_bIsVertical ) //橫向
194 {
195 m_pTabSlider = new CHorizontalLayoutUI;
196 m_pTabSlider->ApplyAttributeList("bkcolor=\"#FFFFFFFF\"");
197 m_pTabSlider->SetFloat(true);
198 m_SldItem = m_rcItem;
199 if( m_iCurSel > iOldSel )
200 {
201 m_nPositiveDirection = -1;
202 m_SldItem.left = m_rcItem.left;
203 m_SldItem.right = m_rcItem.left + (m_rcItem.right - m_rcItem.left) * 2;
204 m_pTabSlider->SetPos(m_SldItem);
205 m_pTabSlider->SetVisible(true);
206 m_pTabSlider->Add(m_pCurPage);
207 m_pTabSlider->Add(m_pNextPage);
208 }
209 else
210 {
211 m_nPositiveDirection = 1;
212 m_SldItem.left = m_rcItem.left - (m_rcItem.right - m_rcItem.left);
213 m_SldItem.right = m_rcItem.left + (m_rcItem.right - m_rcItem.left);;
214 m_pTabSlider->SetPos(m_SldItem);
215 m_pTabSlider->SetVisible(true);
216 m_pTabSlider->Add(m_pNextPage);
217 m_pTabSlider->Add(m_pCurPage);
218 }
219 }
220 else
221 {
222 m_pVTabSlider = new CVerticalLayoutUI;
223 m_pVTabSlider->SetFloat(true);
224 m_SldItem = m_rcItem;
225 if( m_iCurSel > iOldSel )
226 {
227 m_nPositiveDirection = -1;
228 m_SldItem.top = m_rcItem.top;
229 m_SldItem.bottom = m_rcItem.bottom + (m_rcItem.bottom - m_rcItem.top);
230 m_pVTabSlider->SetPos(m_SldItem);
231 m_pVTabSlider->SetVisible(true);
232 m_pVTabSlider->Add(m_pCurPage);
233 m_pVTabSlider->Add(m_pNextPage);
234 }
235 else
236 {
237 m_nPositiveDirection = 1;
238 m_SldItem.top = m_rcItem.top - (m_rcItem.bottom - m_rcItem.top);
239 m_SldItem.bottom = m_rcItem.bottom;
240 m_pVTabSlider->SetPos(m_SldItem);
241 m_pVTabSlider->SetVisible(true);
242 m_pVTabSlider->Add(m_pNextPage);
243 m_pVTabSlider->Add(m_pCurPage);
244 }
245 }
246
247 RECT rcTmp = {0};
248 m_pNextPage->SetPos(rcTmp);
249 m_pNextPage->SetFixedWidth(1);
250 m_pNextPage->SetFixedHeight(1);
251 m_pNextPage->SetVisible(true);
252 //m_pNextPage->NeedUpdate();
253
254 m_pManager->SetTimer( this, TIMER_ANIMATION_ID, ANIMATION_ELLAPSE );
255 if( m_pManager != NULL ) {
256 //m_pManager->SetNextTabControl();
257 m_pManager->SendNotify(this, _T("tabselect"), m_iCurSel, iOldSel);
258 }
259 return true;
260 }
261
262 void CSliderTabLayoutUI2::DoEvent(TEventUI& event)
263 {
264 if( event.Type == UIEVENT_TIMER )
265 {
266 OnTimer( event.wParam );
267 }
268 else
269 CContainerUI::DoEvent(event);
270 //__super::DoEvent( event );
271 }
272
273 void CSliderTabLayoutUI2::OnTimer( int nTimerID )
274 {
275 OnSliderStep();
276 }
277
278 void CSliderTabLayoutUI2::OnSliderStep()
279 {
280
281
282 int iStepLen = 0;
283 if( !m_bIsVertical ) //橫向
284 {
285 iStepLen = ( m_rcItem.right - m_rcItem.left ) * m_nPositiveDirection / ANIMATION_FRAME_COUNT;
286 if( m_iCurFrame != ANIMATION_FRAME_COUNT )
287 {
288 m_SldItem.left = m_SldItem.left + iStepLen;
289 m_SldItem.right = m_SldItem.right +iStepLen;
290 m_pTabSlider->SetPos(m_SldItem);
291 }
292 else
293 {
294 m_pCurPage->SetVisible(false);
295 m_pNextPage->SetPos(m_rcItem);
296 m_pNextPage->SetFixedWidth(m_rcItem.right - m_rcItem.left);
297 m_pNextPage->SetFixedHeight(m_rcItem.bottom - m_rcItem.top);
298 }
299 }
300 else //豎向
301 {
302 iStepLen = ( m_rcItem.bottom - m_rcItem.top ) * m_nPositiveDirection / ANIMATION_FRAME_COUNT;
303 if( m_iCurFrame != ANIMATION_FRAME_COUNT )
304 {
305 m_SldItem.top = m_SldItem.top + iStepLen;
306 m_SldItem.bottom = m_SldItem.bottom +iStepLen;
307 m_pVTabSlider->SetPos(m_SldItem);
308 }
309 else
310 {
311 m_pCurPage->SetVisible(false);
312 m_pNextPage->SetPos(m_rcItem);
313 }
314 }
315
316 if( m_iCurFrame == ANIMATION_FRAME_COUNT )
317 {
318 NeedParentUpdate();
319 m_pManager->KillTimer( this, TIMER_ANIMATION_ID );
320 }
321 m_iCurFrame ++;
322 }
323
324 void CSliderTabLayoutUI2::SetAttribute(LPCTSTR pstrName, LPCTSTR pstrValue)
325 {
326 if( _tcscmp(pstrName, _T("direction")) == 0 && _tcscmp( pstrValue, _T("vertical")) == 0 ) m_bIsVertical = true; // pstrValue = "vertical" or "horizontal"
327 return CTabLayoutUI::SetAttribute(pstrName, pstrValue);
328 }
329
330
331
332 //////////////////////////////////////////////////////////////////////////
333 // CSliderTabLayoutUI3
334 CSliderTabLayoutUI3::CSliderTabLayoutUI3() :
335 m_bIsVertical( false ),
336 m_bAnimating(false),
337 m_iCurFrame( 0 )
338 {
339 }
340
341 LPCTSTR CSliderTabLayoutUI3::GetClass() const
342 {
343 return _T("SliderTabLayoutUI3");
344 }
345
346 LPVOID CSliderTabLayoutUI3::GetInterface(LPCTSTR pstrName)
347 {
348 if( _tcscmp(pstrName, _T("SliderTabLayoutUI3")) == 0 )
349 return static_cast<CSliderTabLayoutUI3*>(this);
350 return CTabLayoutUI::GetInterface(pstrName);
351 }
352
353 bool CSliderTabLayoutUI3::SelectItem( int iIndex )
354 {
355 if( iIndex < 0 || iIndex >= m_items.GetSize() ) return false;
356 if( iIndex == m_iCurSel ) return true;
357 if( iIndex > m_iCurSel ) m_nPositiveDirection = -1;
358 if( iIndex < m_iCurSel ) m_nPositiveDirection = 1;
359
360 m_bAnimating = true;
361 m_iCurFrame = 0;
362
363 RECT rcInset = GetInset();
364 m_rcCurPos = GetPos();
365
366 m_rcCurPos.left += rcInset.left;
367 m_rcCurPos.top += rcInset.top;
368 m_rcCurPos.right -= rcInset.right;
369 m_rcCurPos.bottom -= rcInset.bottom;
370
371 m_rcNextPos = m_rcCurPos;
372
373 if( !m_bIsVertical ) //橫向
374 {
375 m_rcNextPos.left = m_rcCurPos.left - (m_rcCurPos.right - m_rcCurPos.left) * m_nPositiveDirection;
376 m_rcNextPos.right = m_rcCurPos.right - (m_rcCurPos.right - m_rcCurPos.left) * m_nPositiveDirection;
377 }
378 else
379 {
380 m_rcNextPos.top = m_rcCurPos.top - (m_rcCurPos.bottom - m_rcCurPos.top) * m_nPositiveDirection;
381 m_rcNextPos.bottom = m_rcCurPos.bottom - (m_rcCurPos.bottom - m_rcCurPos.top) * m_nPositiveDirection;
382 }
383
384 int iOldSel = m_iCurSel;
385 m_iCurSel = iIndex;
386 for( int it = 0; it < m_items.GetSize(); it++ )
387 {
388 if( it == iIndex ) {
389 m_pNextPage = GetItemAt(it);
390 m_pNextPage->SetPos(m_rcNextPos);
391 m_pNextPage->SetVisible(true);
392 }
393 else if( it == iOldSel )
394 {
395 m_pCurPage = GetItemAt(it);
396 m_pCurPage->SetVisible(true);
397 }
398 else
399 GetItemAt(it)->SetVisible(false);
400 }
401
402 m_pManager->SetTimer( this, TIMER_ANIMATION_ID, ANIMATION_ELLAPSE );
403 if( m_pManager != NULL ) {
404 //m_pManager->SetNextTabControl();
405 m_pManager->SendNotify(this, _T("tabselect"), m_iCurSel, iOldSel);
406 }
407 return true;
408 }
409
410 void CSliderTabLayoutUI3::DoEvent(TEventUI& event)
411 {
412 if( event.Type == UIEVENT_TIMER )
413 {
414 OnTimer( event.wParam );
415 }
416 else
417 CContainerUI::DoEvent(event);
418 }
419
420 void CSliderTabLayoutUI3::OnTimer( int nTimerID )
421 {
422 NeedParentUpdate();
423 }
424
425 void CSliderTabLayoutUI3::SetPos(RECT rc)
426 {
427 CControlUI::SetPos(rc);
428
429 RECT rcInset = GetInset();
430 rc.left += rcInset.left;
431 rc.top += rcInset.top;
432 rc.right -= rcInset.right;
433 rc.bottom -= rcInset.bottom;
434
435 if(m_bAnimating)
436 {
437 int iStepLen = 0;
438 if( !m_bIsVertical ) //橫向
439 {
440 iStepLen = ( rc.right - rc.left ) * m_nPositiveDirection / ANIMATION_FRAME_COUNT;
441 if( m_iCurFrame != ANIMATION_FRAME_COUNT )
442 {
443 //當前窗體位置
444 ::OffsetRect(&m_rcCurPos,iStepLen,0);
445 m_pCurPage->SetPos(m_rcCurPos);
446 //下一個窗體位置
447 ::OffsetRect(&m_rcNextPos,iStepLen,0);
448 m_pNextPage->SetPos(m_rcNextPos);
449 }
450 else
451 {
452 m_pCurPage->SetVisible(false);
453 ::OffsetRect(&m_rcCurPos,iStepLen,0);
454 m_pCurPage->SetPos(m_rcCurPos);
455 m_pNextPage->SetPos(rc);
456 }
457 }
458 else //豎向
459 {
460 iStepLen = ( rc.bottom - rc.top ) * m_nPositiveDirection / ANIMATION_FRAME_COUNT;
461 if( m_iCurFrame != ANIMATION_FRAME_COUNT )
462 {
463 //當前窗體位置
464 ::OffsetRect(&m_rcCurPos,0,iStepLen);
465 m_pCurPage->SetPos(m_rcCurPos);
466 //下一個窗體位置
467 ::OffsetRect(&m_rcNextPos,0,iStepLen);
468 m_pNextPage->SetPos(m_rcNextPos);
469 }
470 else
471 {
472 m_pCurPage->SetVisible(false);
473 ::OffsetRect(&m_rcCurPos,0,iStepLen);
474 m_pCurPage->SetPos(m_rcCurPos);
475 m_pNextPage->SetPos(rc);
476 }
477 }
478 if( m_iCurFrame == ANIMATION_FRAME_COUNT )
479 {
480 m_iCurFrame = 0;
481 m_bAnimating = false;
482 m_pManager->KillTimer( this, TIMER_ANIMATION_ID );
483 }
484 m_iCurFrame ++;
485 }
486 else
487 {
488 for (int it = 0; it < GetCount(); it++) {
489 CControlUI* pControl = GetItemAt(it);
490 if (!pControl->IsVisible()) continue;
491 if (pControl->IsFloat()) {
492 SetFloatPos(it);
493 continue;
494 }
495
496 if (it != GetCurSel()) continue;
497
498 RECT rcPadding = pControl->GetPadding();
499 rc.left += rcPadding.left;
500 rc.top += rcPadding.top;
501 rc.right -= rcPadding.right;
502 rc.bottom -= rcPadding.bottom;
503
504 SIZE szAvailable = { rc.right - rc.left, rc.bottom - rc.top };
505
506 SIZE sz = pControl->EstimateSize(szAvailable);
507 if (sz.cx == 0) {
508 sz.cx = MAX(0, szAvailable.cx);
509 }
510 if (sz.cx < pControl->GetMinWidth()) sz.cx = pControl->GetMinWidth();
511 if (sz.cx > pControl->GetMaxWidth()) sz.cx = pControl->GetMaxWidth();
512
513 if (sz.cy == 0) {
514 sz.cy = MAX(0, szAvailable.cy);
515 }
516 if (sz.cy < pControl->GetMinHeight()) sz.cy = pControl->GetMinHeight();
517 if (sz.cy > pControl->GetMaxHeight()) sz.cy = pControl->GetMaxHeight();
518
519 RECT rcCtrl = {rc.left, rc.top, rc.left + sz.cx, rc.top + sz.cy};
520 pControl->SetPos(rcCtrl);
521 }
522 }
523 }
524
525 void CSliderTabLayoutUI3::SetAttribute(LPCTSTR pstrName, LPCTSTR pstrValue)
526 {
527 if( _tcscmp(pstrName, _T("direction")) == 0 && _tcscmp( pstrValue, _T("vertical")) == 0 ) m_bIsVertical = true; // pstrValue = "vertical" or "horizontal"
528 return CTabLayoutUI::SetAttribute(pstrName, pstrValue);
529 }
530 } // namespace DuiLib
View Code
xml部分
![]()
1 <SliderTabLayout3 name="TAY_1" direction="vertical">
2 <!--基本資料-->
3 <VerticalLayout>
4 <HorizontalLayout width="458" height="29">
5 <Label text="基本資料" float="true" pos="13,0,0,0" width="105" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" font="0"/>
6 </HorizontalLayout>
7 <VerticalLayout width="458" height="339" bkimage="file='bk_bxg_right.png' corner='5,5,5,5'">
8 <Label text="昵稱：" float="true" pos="38,14,0,0" width="50" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
9 <Label name="LBL_VIP" text="" float="true" pos="96,64,0,0" width="25" height="12" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA"/>
10 <Edit name="TXT_NC" float="true" pos="94,17,0,0" width="181" height="25" bkcolor="#00000000" textpadding="4,3,4,3" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" font="1" maxchar="18" normalimage="file='txt_1.png' source='0,0,33,34' corner='5,5,5,5'" hotimage="file='txt_1.png' source='33,0,66,34' corner='5,5,5,5'" focusedimage="file='txt_1.png' source='66,0,99,34' corner='5,5,5,5'"/>
11 <Button name="BTN_JBZL_SAVE" float="true" pos="172,291,0,0" width="115" height="36" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='bt_45.png' source='0,0,115,36'" hotimage="file='bt_45.png' source='115,0,230,36'" pushedimage="file='bt_45.png' source='230,0,345,36'"/>
12 <Label text="VIP：" float="true" pos="38,54,0,0" width="50" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
13 <Label text="等級：" float="true" pos="233,93,0,0" width="50" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right" />
14 <Label name="LBL_DJ" float="true" pos="291,93,0,0" width="131" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" />
15 <Label text="金幣：" float="true" pos="38,92,0,0" width="50" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
16 <Label name="LBL_JB" text="" float="true" pos="96,92,0,0" width="131" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA"/>
17 <Label text="幸運豆：" float="true" pos="234,131,0,0" width="50" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right" />
18 <Label name="LBL_XYD" float="true" pos="292,131,0,0" width="131" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" />
19 <Label text="獎券：" float="true" pos="38,131,0,0" width="50" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
20 <Label name="LBL_JQ" text="" float="true" pos="96,131,0,0" width="131" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA"/>
21 <Label text="性別：" float="true" pos="39,169,0,0" width="50" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
22 <Label text="生日：" float="true" pos="39,207,0,0" width="50" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
23 <Label text="Email：" float="true" pos="39,246,0,0" width="50" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
24 <Label text="年齡：" float="true" pos="239,207,0,0" width="50" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
25 <Label text="QQ：" float="true" pos="239,246,0,0" width="50" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
26 <Edit name="TXT_EMAIL" text="" float="true" pos="98,248,0,0" width="136" height="25" bkcolor="#00000000" textpadding="4,3,4,3" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" maxchar="50" normalimage="file='txt_1.png' source='0,0,33,34' corner='5,5,5,5'" hotimage="file='txt_1.png' source='33,0,66,34' corner='5,5,5,5'" focusedimage="file='txt_1.png' source='66,0,99,34' corner='5,5,5,5'"/>
27 <Combo name="CMB_SR_1" float="true" pos="97,210,0,0" droptype="droplist" width="50" height="22" textpadding="4,1,1,1" normalimage="file='cmb.png' source='0,0,100,22' corner='2,2,20,2'" hotimage="file='cmb.png' source='0,22,100,44' corner='2,2,22,2'" pushedimage="file='cmb.png' source='0,44,100,66' corner='2,2,22,2'" vscrollbar="true" vscrollbar/>
28 <Label text="月" float="true" pos="145,213,0,0" width="15" height="15" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
29 <Combo name="CMB_SR_2" float="true" pos="160,210,0,0" droptype="droplist" width="45" height="22" textpadding="4,1,1,1" normalimage="file='cmb.png' source='0,0,100,22' corner='2,2,20,2'" hotimage="file='cmb.png' source='0,22,100,44' corner='2,2,22,2'" pushedimage="file='cmb.png' source='0,44,100,66' corner='2,2,22,2'"/>
30 <Label text="日" float="true" pos="204,213,0,0" width="15" height="15" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
31 <Edit name="TXT_QQ" text="" float="true" pos="291,248,0,0" width="127" height="25" bkcolor="#00000000" textpadding="4,3,4,3" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" maxchar="32" normalimage="file='txt_1.png' source='0,0,33,34' corner='5,5,5,5'" hotimage="file='txt_1.png' source='33,0,66,34' corner='5,5,5,5'" focusedimage="file='txt_1.png' source='66,0,99,34' corner='5,5,5,5'"/>
32 <Combo name="CMB_NL" float="true" pos="295,210,0,0" droptype="droplist" width="50" height="22" textpadding="4,1,1,1" normalimage="file='cmb.png' source='0,0,100,22' corner='2,2,20,2'" hotimage="file='cmb.png' source='0,22,100,44' corner='2,2,22,2'" pushedimage="file='cmb.png' source='0,44,100,66' corner='2,2,22,2'"/>
33 <Option name="OPN_BOY" text="男" float="true" pos="99,170,0,0" width="60" height="30" textpadding="5,0,0,0" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='chk_1.png' dest='5,5,20,20'" hotimage="file='chk_2.png' dest='5,5,20,20'" group="sex" selected="true" selectedimage="file='chk_3.png' dest='5,5,20,20'"/>
34 <Option name="OPN_GIRL" text="女" float="true" pos="161,170,0,0" width="60" height="30" textpadding="5,0,0,0" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='chk_1.png' dest='5,5,20,20'" hotimage="file='chk_2.png' dest='5,5,20,20'" group="sex" selectedimage="file='chk_3.png' dest='5,5,20,20'"/>
35 <Label name="LBL_JBZL_ERROR" text="" float="true" pos="100,278,0,0" width="260" height="18" textcolor="#00FF0000" disabledtextcolor="#FFA7A6AA"/>
36 <Button name="BTN_FACE" float="true" pos="337,16,0,0" width="62" height="60" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" bkimage="file='face\default.png' dest='2,2,60,58'" />
37 <Button name="BTN_CHANGEFACE" text="{a}更新頭像{/a}" float="true" pos="338,76,0,0" width="60" height="24" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" showhtml="true" align="center" />
38 </VerticalLayout>
39 </VerticalLayout>
40 <!--詳細資料-->
41 <VerticalLayout>
42 <HorizontalLayout width="458" height="29">
43 <Label text="詳細資料" float="true" pos="13,0,0,0" width="105" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" font="0"/>
44 </HorizontalLayout>
45 <VerticalLayout width="458" height="339" bkimage="file='bk_bxg_right.png' corner='5,5,5,5'">
46 <Label text="真實姓名：" float="true" pos="62,40,0,0" width="82" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
47 <Edit name="TXT_ZSXM" float="true" pos="146,42,0,0" width="181" height="25" bkcolor="#00000000" textpadding="4,3,4,3" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" font="1" maxchar="16" normalimage="file='txt_1.png' source='0,0,33,34' corner='5,5,5,5'" hotimage="file='txt_1.png' source='33,0,66,34' corner='5,5,5,5'" focusedimage="file='txt_1.png' source='66,0,99,34' corner='5,5,5,5'"/>
48 <Button name="BTN_XXZL_SAVE" float="true" pos="174,235,0,0" width="115" height="36" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='bt_45.png' source='0,0,115,36'" hotimage="file='bt_45.png' source='115,0,230,36'" pushedimage="file='bt_45.png' source='230,0,345,36'"/>
49 <Label text="身份證號：" float="true" pos="62,73,0,0" width="82" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
50 <Edit name="TXT_SFZH" float="true" pos="146,75,0,0" width="181" height="25" bkcolor="#00000000" textpadding="4,3,4,3" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" font="1" maxchar="18" normalimage="file='txt_1.png' source='0,0,33,34' corner='5,5,5,5'" hotimage="file='txt_1.png' source='33,0,66,34' corner='5,5,5,5'" focusedimage="file='txt_1.png' source='66,0,99,34' corner='5,5,5,5'"/>
51 <Label text="手機號碼：" float="true" pos="62,106,0,0" width="82" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
52 <Edit name="TXT_SJHM" float="true" pos="146,108,0,0" width="181" height="25" bkcolor="#00000000" textpadding="4,3,4,3" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" font="1" maxchar="12" normalimage="file='txt_1.png' source='0,0,33,34' corner='5,5,5,5'" hotimage="file='txt_1.png' source='33,0,66,34' corner='5,5,5,5'" focusedimage="file='txt_1.png' source='66,0,99,34' corner='5,5,5,5'"/>
53 <Label text="固定電話：" float="true" pos="62,140,0,0" width="82" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
54 <Edit name="TXT_GDDH" float="true" pos="146,142,0,0" width="181" height="25" bkcolor="#00000000" textpadding="4,3,4,3" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" font="1" maxchar="16" normalimage="file='txt_1.png' source='0,0,33,34' corner='5,5,5,5'" hotimage="file='txt_1.png' source='33,0,66,34' corner='5,5,5,5'" focusedimage="file='txt_1.png' source='66,0,99,34' corner='5,5,5,5'"/>
55 <Label text="地 址：" float="true" pos="62,173,0,0" width="82" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
56 <Edit name="TXT_DZ" float="true" pos="146,175,0,0" width="272" height="25" bkcolor="#00000000" textpadding="4,3,4,3" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" font="1" maxchar="50" normalimage="file='txt_1.png' source='0,0,33,34' corner='5,5,5,5'" hotimage="file='txt_1.png' source='33,0,66,34' corner='5,5,5,5'" focusedimage="file='txt_1.png' source='66,0,99,34' corner='5,5,5,5'"/>
57 <Text text="注：請您填寫真實信息，因資料填寫錯誤造成獎品無法投遞的情況，6513游戲中心將不承擔責任。" float="true" pos="64,279,0,0" width="333" height="36" textpadding="2,0,2,0" textcolor="#00FF0000" disabledtextcolor="#FFA7A6AA" align="wrap"/>
58 <Label name="LBL_XXZL_ERROR" float="true" pos="147,202,0,0" width="198" height="30" textcolor="#00FF0000" disabledtextcolor="#FFA7A6AA"/>
59 </VerticalLayout>
60 </VerticalLayout>
61 <!--密碼修改-->
62 <VerticalLayout>
63 <HorizontalLayout width="458" height="29">
64 <Label text="登錄密碼修改" float="true" pos="13,0,0,0" width="159" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" font="0"/>
65 </HorizontalLayout>
66 <VerticalLayout width="458" height="154" bkimage="file='bk_bxg_right.png' corner='5,5,5,5'">
67 <Label text="舊密碼：" float="true" pos="63,4,0,0" width="82" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
68 <Edit name="TXT_MM_JMM" password="true" float="true" pos="147,4,0,0" width="181" height="25" bkcolor="#00000000" textpadding="4,3,4,3" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" font="1" maxchar="16" normalimage="file='txt_1.png' source='0,0,33,34' corner='5,5,5,5'" hotimage="file='txt_1.png' source='33,0,66,34' corner='5,5,5,5'" focusedimage="file='txt_1.png' source='66,0,99,34' corner='5,5,5,5'"/>
69 <Label text="新密碼：" float="true" pos="63,33,0,0" width="82" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
70 <Edit name="TXT_MM_XMM" password="true" float="true" pos="147,33,0,0" width="181" height="25" bkcolor="#00000000" textpadding="4,3,4,3" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" font="1" maxchar="16" normalimage="file='txt_1.png' source='0,0,33,34' corner='5,5,5,5'" hotimage="file='txt_1.png' source='33,0,66,34' corner='5,5,5,5'" focusedimage="file='txt_1.png' source='66,0,99,34' corner='5,5,5,5'"/>
71 <Label text="確認密碼：" float="true" pos="63,65,0,0" width="82" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
72 <Edit name="TXT_MM_QRMM" password="true" float="true" pos="147,65,0,0" width="181" height="25" bkcolor="#00000000" textpadding="4,3,4,3" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" font="1" maxchar="16" normalimage="file='txt_1.png' source='0,0,33,34' corner='5,5,5,5'" hotimage="file='txt_1.png' source='33,0,66,34' corner='5,5,5,5'" focusedimage="file='txt_1.png' source='66,0,99,34' corner='5,5,5,5'"/>
73 <Button name="BTN_MMXG_MM_SAVE" float="true" pos="172,107,0,0" width="115" height="36" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='bt_45.png' source='0,0,115,36'" hotimage="file='bt_45.png' source='115,0,230,36'" pushedimage="file='bt_45.png' source='230,0,345,36'"/>
74 <Label name="LBL_MM_ERROR" float="true" pos="148,94,0,0" width="203" height="17" textcolor="#00FF0000" disabledtextcolor="#FFA7A6AA"/>
75 </VerticalLayout>
76 <HorizontalLayout width="458" height="29">
77 <Label text="保險箱密碼修改" float="true" pos="13,0,0,0" width="159" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" font="0"/>
78 </HorizontalLayout>
79 <VerticalLayout width="458" height="154" bkimage="file='bk_bxg_right.png' corner='5,5,5,5'">
80 <Label text="舊密碼：" float="true" pos="63,5,0,0" width="82" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
81 <Edit name="TXT_BXG_JMM" password="true" float="true" pos="147,5,0,0" width="181" height="25" bkcolor="#00000000" textpadding="4,3,4,3" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" font="1" maxchar="16" normalimage="file='txt_1.png' source='0,0,33,34' corner='5,5,5,5'" hotimage="file='txt_1.png' source='33,0,66,34' corner='5,5,5,5'" focusedimage="file='txt_1.png' source='66,0,99,34' corner='5,5,5,5'"/>
82 <Label text="新密碼：" float="true" pos="63,33,0,0" width="82" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
83 <Edit name="TXT_BXG_XMM" password="true" float="true" pos="147,33,0,0" width="181" height="25" bkcolor="#00000000" textpadding="4,3,4,3" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" font="1" maxchar="16" normalimage="file='txt_1.png' source='0,0,33,34' corner='5,5,5,5'" hotimage="file='txt_1.png' source='33,0,66,34' corner='5,5,5,5'" focusedimage="file='txt_1.png' source='66,0,99,34' corner='5,5,5,5'"/>
84 <Label text="確認密碼：" float="true" pos="63,64,0,0" width="82" height="30" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="right"/>
85 <Edit name="TXT_BXG_QRMM" password="true" float="true" pos="147,64,0,0" width="181" height="25" bkcolor="#00000000" textpadding="4,3,4,3" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" font="1" maxchar="16" normalimage="file='txt_1.png' source='0,0,33,34' corner='5,5,5,5'" hotimage="file='txt_1.png' source='33,0,66,34' corner='5,5,5,5'" focusedimage="file='txt_1.png' source='66,0,99,34' corner='5,5,5,5'"/>
86 <Button name="BTN_MMXG_BXX_SAVE" float="true" pos="172,107,0,0" width="115" height="36" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='bt_45.png' source='0,0,115,36'" hotimage="file='bt_45.png' source='115,0,230,36'" pushedimage="file='bt_45.png' source='230,0,345,36'"/>
87 <Label name="LBL_BXG_ERROR" float="true" pos="148,94,0,0" width="203" height="17" textcolor="#00FF0000" disabledtextcolor="#FFA7A6AA"/>
88 </VerticalLayout>
89 </VerticalLayout>
90 </SliderTabLayout3>
View Code
代碼實現部分當初用了三種方式實現滑動效果，但最理想的還是CSliderTabLayoutUI3實現。不知大家有沒有更好的實現思路，可一起交流交流。
c# 對於跨線程調用控件 標簽頁 滑動條的奇怪問題
出錯語句：toolStripStatusLabel.Text = "需要設置的文本" ;
錯誤內容:：線程間操作無效: 從不是創建控件“labelTherm1”的線程訪問它。
labeltherm1 是 tabpage內的第一個控件。
明顯不搭嘛，語句操作的是狀態欄文本，報錯的是第一個動態Label
錯誤內容說明你主線程的代碼在操作labelTherm1（它是在子線程創建的），檢查有無此類代碼
對於asp TAB頁滑動門效果js幫解
已改好
<style type="text/css">
#header {
height: 20px;
width: 320px;
font-family: "宋體";
font-size: 12px;
}
#bk {
background-color: #FFFFFF;
border: 1px solid #E1E1E1;
height: 200px;
width: 322px;
}
.menu {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menu td {
display: block;
width: 80px;
text-align: center;
float: left;
}
.sec1 {
background-image: url(/images/fb.jpg);
}
.sec2 {
background-image: url(/images/menu1_a_bg.gif);
background-repeat: no-repeat;
display: block;
}
.block {
display: block;
color: #FF3300;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.unblock {
display: none;
color: #99CC00;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<script language=javascript>
function secBoard(n)
{
for(i=0;i<menu.childNodes.length;i++)
menu.childNodes[i].className="sec1";
menu.childNodes[n].className="sec2";
for(i=0;i<main.childNodes[0].childNodes.length;i++)
main.childNodes[0].childNodes[i].style.display="none";
main.childNodes[0].childNodes[n].style.display="block";
}
</script>
<table id="bk" width="322" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" ......余下全文>>
