언어 설정

Menu
Sites
Language
Problem with gestures and dragend.js

Hello! I have tryied to use dragend.js library in my app and now i have a problem with that libary. My slider-carousel dont't have any reaction to touch events.

Please, help!

At first, I load a libraries: jquery, hammer.js, dragend.js.

After that i have a markup in index.html#help (#help is a page)

       

<div id="demo">
    <ul class="demoul">
      <li class="first dragend-page"></li>
      <li class="dragend-page"></li>
      <li class="middle dragend-page"></li>
      <li class="dragend-page"></li>
      <li class="last dragend-page"></li>
    </ul>
</div>

 and in the main.js i have a function

var initHelp = function(){
    
	$("#demo").dragend();
	console.log("add dragend!")
	
};

$(document).delegate("#help", "pageinit", initHelp);

And my app has no reaction. and dragend.js carousel fails.

 

 So what i am doing wrong?

Edited by: Alex Belousov on 23 10월, 2013
목록

Responses

4 댓글
Raghu Kona

Hi Alex,

I tested your code and it works fine. I just added text to the list items and I was able to see the page carousel.

<div id="demo">
    <ul class="demoul">
      <li class="first dragend-page">FIrst</li>
      <li class="dragend-page">Second</li>
      <li class="middle dragend-page">Third</li>
      <li class="dragend-page">Fourth</li>
      <li class="last dragend-page">Fifth</li>
    </ul>
</div>

I can see two rows with 1 - 4 on row one and the 5th list item on second row. Was able to traverse through the carousel.

Can you please check, if you are gettig any errors on your console.

Regards,

Raghu Kona

Alex Belousov

Thanks for help!

I had tryied that code in browser(chrome, had copied url from simulator and paste in the browser) and it works! I am able to see  the page carousel, swipe pages.

but in simulator slider has no reacton yet.

 

Maybe you can share your example project with dragend.js and i will try to test its on my computer?

 

Alex Belousov

P.s There are no errors or warnings in the simulator console, only debug message "add dragend!"

Raghu Kona

Hi Alex,

Please find the below code working on my machine.

​<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="description"
    content="A Tizen Web UI FW single-page template generated by Tizen Web IDE" />
<meta name="viewport" content="width=device-width,user-scalable=no" />

<link rel="stylesheet"
    href="tizen-web-ui-fw/latest/themes/tizen-white/tizen-web-ui-fw-theme.css"
    name="tizen-theme" />
<title>Tizen Web IDE - Template - Tizen - Tizen Web UI Framework
    - Single-Page</title>
<!--NOTE:
        jquery.js and web-ui-fw.js must be included.
        DO NOT REMOVE below code!
    -->
<script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
    data-framework-theme="tizen-white"></script>

<!--NOTE:
        Additional scripts and css files are to be placed here.
        You can use jQuery namespace($) and all functionalities in jQuery
        in your script.  For example:

            <script src="main.js"></script>
            <link rel="stylesheet" href="my.css">
    -->
<script type="text/javascript" src="./js/main.js"></script>
<script type="text/javascript" src="./js/hammer.js"></script>
<script type="text/javascript" src="./js/dragend-0.2.0_rc2.js"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>

<body>
    <div data-role="page">
        <div data-role="header" data-position="fixed">
            <h1>Single-page application</h1>
        </div>
        <!-- /header -->

        <div data-role="content">
            <div id="demo">
                <ul class="demoul">
                    <li class="first dragend-page">One</li>
                    <li class="dragend-page">Two</li>
                    <li class="middle dragend-page">Three</li>
                    <li class="dragend-page">Four</li>
                </ul>
            </div>
        </div>
        <!-- /content -->
    </div>
    <!-- /page -->
</body>
</html>

Regards,

Raghu Kona