main.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. //定义弹出层,弹出工作条方法
  2. var commentPopupbox,
  3. commentToolbar;
  4. (function($){
  5. /*测量元素大小,用于定位元素居中*/
  6. var elementSize = function(el){
  7. var _width = el.width(),
  8. _height = el.height();
  9. return {
  10. width : _width,
  11. height : _height
  12. }
  13. }
  14. commentPopupbox = function(str){
  15. var ele = $(str);
  16. var _popupboxOpen = function(){
  17. ele.show();
  18. _popupboxSetPosition(ele);
  19. }
  20. var _popupboxClose = function(){
  21. ele.hide();
  22. }
  23. /*弹出层定位*/
  24. var _popupboxSetPosition = function(element){
  25. var pos = elementSize(element);
  26. element.css({
  27. "margin-left": -pos.width/2,
  28. "margin-top": -pos.height/2
  29. });
  30. }
  31. var _init = function(){
  32. _popupboxSetPosition(ele);
  33. }
  34. _init();
  35. return {
  36. open : _popupboxOpen ,
  37. close : _popupboxClose
  38. }
  39. }
  40. commentToolbar = function(str){
  41. var ele = $(str),
  42. currentTool = "";
  43. var openToolbar = function(el){
  44. el.show();
  45. currentTool = el;
  46. }
  47. var closeToolbar = function(el){
  48. el.hide();
  49. currentTool = "";
  50. }
  51. var _init =function(){
  52. //绑定评论触摸事件
  53. ele.on('click', 'li', function(event) {
  54. var cT = $( event.currentTarget ),
  55. touchPosition = {};
  56. touchPosition = {
  57. top : event.clientY,
  58. left : event.clientX
  59. }
  60. console.log(cT.offset().top);
  61. var sitem = $(this).children(".tooltip-layer");
  62. //检查是否点击当前元素,点击当前打开元素则关闭元素,点击其他元素,关闭当前元素
  63. if( currentTool !== "" )
  64. {
  65. if( currentTool.get(0) == sitem.get(0) )
  66. {
  67. closeToolbar(sitem);
  68. }
  69. else{
  70. closeToolbar(currentTool);
  71. }
  72. }
  73. //
  74. if( !sitem.width())//检查元素是否可见,隐藏元素没有宽高
  75. {
  76. openToolbar(sitem);
  77. sitem.css('margin-left', - elementSize(sitem).width / 2 );//打开元素后,检测元素宽度,定位
  78. }
  79. else{
  80. closeToolbar(sitem);
  81. }
  82. if( cT.offset().top > sitem.height() + 20 && cT.offset().top > 200 )
  83. {
  84. sitem.css('margin-top', - elementSize(sitem).height / 2);
  85. }
  86. else{
  87. sitem.css('margin-top', elementSize(sitem).height / 2 + 20 );
  88. sitem.addClass('tooltip-layer-bottom');
  89. }
  90. console.log(event);
  91. event.preventDefault();
  92. /* Act on the event */
  93. });
  94. //滚动的时候隐藏动作条
  95. ele.get(0).ontouchmove = function(){
  96. if( currentTool ){
  97. currentTool.hide();
  98. }
  99. }
  100. }
  101. _init();
  102. }
  103. })(Zepto)