Metro Style Softphone[Version 0.0.1] [LomoX Framework,Metro&Design]

Metro Style Softphone[Version 0.0.1] [LomoX Framework,Metro&Design]

bbs:  http://bbs.lomox.hk


After four days of hard work, completed Softphone first edition features. Interface above real cell animationtransitions .Implemented interface switches from right to left, as well as upper and lower translation effects. The demo base on LomoX, and develop for AT&T.

If you want to know how to do by C++ and HTML&CSS&Javascript ,Click me.

Now the demo can call or answer someone.
Some UI layer code: use the HTML&CSS&JavaScript(JQuery)

1. I'm Sorry, my blog can not support HTML keyword that will be resolved by program such as "<" ">"...

UI layer animation used JQuery library:

01. <script type="text/javascript">

02. $('#content>div').mouseenter(function() {

03. $(this).find('div.pic').addClass('ani');

04. }).mouseleave(function() {

05. $(this).find('div.pic').removeClass('ani');

06. });

07. $('#call').click(function() {

08. parent.toFrame(2);

09. });

10. function login() {

11. toFrame(1, 'left');

12. }

13. var currentIndex = 0;

14. function toFrame(idx, dir) {

15. var cur = $('#frame' + currentIndex);

16. var next = $('#frame' + idx);

17. var duration = 200;

18. dir = dir == undefined || dir == 'left';

19. if(dir) {

20. cur.animate({

21. left: '-390px'

22. }, duration, function() {

23. cur.hide();

24. });

25. cur.css('z-index', 1);

26. next.css({'left': '390px', 'z-index': 2}).show();

27. next.animate({

28. left: '0'

29. }, duration);

30. } else {

31. cur.animate({

32. left: '390px'

33. }, duration, function() {

34. cur.hide();

35. });

36. cur.css('z-index', 1);

37. next.css({'left': '-390px', 'z-index': 2}).show();

38. next.animate({

39. left: '0'

40. }, duration);

41. }

42. currentIndex = idx;

43. }

44. </script>

45. ...

The Layout use CSS:

01. html, body { margin: 0; padding: 0; overflow: hidden; font-family: 'Segoe UI'; color:#fff;

02. -webkit-text-size-adjust: none;

03. }

04. h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: normal; }

05. a { text-decoration: none; }

06. #wrapper { position: relative; margin: 10px auto; width: 380px; height: 550px;

07. background-color: #1c1b1b;

08. -webkit-box-shadow: 0px 0px 3px 3px rgba(33, 33, 33, 0.5);

09. }

10. #main { position: relative; height: 470px; background-color: #212121; }

11.  

12. #info { padding: 10px 20px; }

13. #info>div { float: left; height: 35px; }

14. #user a { display: block; width: 38px; height: 35px; background:url('img/User_Normal.png') no-repeat; }

15. #user a:hover { background: url('img/User_Above.png') no-repeat; }

16. #user a:active { background: url('img/User_Down.png') no-repeat; }

17. ....

OK. Let's look the demo:

Tags: ui, HTML, lomox, lomox framework, directui, opensource, qt, c++ call js, callback, animation ui, ui logic