我正在使用jquery mobile为我的第一个应用程序创建phonegap

时间:2013-03-15 03:21:13

标签: javascript css jquery-mobile

我为我的应用创建了五个索引。第一个索引是欢迎屏幕。第二个索引用于捕获,拍摄pic,可拖动裁剪工具,放大和缩小。我不知道它只适用于某些脚本,但是当我刷新第二个索引时,它可以很好地处理所有功能。

有谁能告诉我这个问题?

我的Html代码在这里:                                 jQuery Moblie测试

<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" src="js/TakePhoto.js"></script>
<script type="text/javascript" src="js/drag.js"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-    1.0a3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-    1.0a3.min.css" />

<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />

<script type='text/javascript' src="js/jquery-ui-1.9.2.custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-    1.9.2.custom.min.css"/>
<script type='text/javascript' src="js/jQuery.ui.touch-punch.js"></script>
</head>
    <body>
        <div data-role="page" id="takephoto" >
        <div data-role="header" class="ui-bar ui-bar-b" data-theme="b">
            <h1>Choose a photo for left Person !</h1>
            <a href="index.html" data-role="button" data-mini="true" data-theme="b"     id="backtochoose">Back</a>
        </div>

        <div data-role="content">
            <h2>Choose a photo for <strong>Left</strong> Person!</h2>
            <a href="#" id="capture" data-role="button" data-ajax="false"     rel="external" data-theme="b">Take a photo</a>
            <a href="#" id="getImg" data-role="button" data-ajax="false" rel="external"     data-theme="b">Choose from library</a>
        </div>
         <div id="image_container" style="display:block;">
            <img style="display:none" id="image" width="300" height="350" src="" />
            <center><canvas id="mystore1" width="200" height="200" style="background-    color:#03F"></canvas></center>
            <div class="frame"  opacity:0.3><img id="face" width="80" height="80"     class="frames" src="img/face.jpg" /></div>
        </div>
        <div data-role="content">
            <a href="#" data-role="button" id="large" data-ajax="false" rel="external"     data-inline="true">Larger</a>
            <a href="#" data-role="button" id="small" data-ajax="false" rel="external"     data-inline="true">Smaller</a>
            <a href="#" data-role="button" id="rotate-left" data-    inline="true">Left</a>
            <a href="#" data-role="button" id="rotate-right" data-    inline="true">Right</a>
        </div>
        <div data-role="content">
            <a href="index2.html" data-role="button" data-iconpos="right" data-    icon="arrow-r" data-theme="b" >Next</a>
        </div> 
    </div>
    </body>

我的脚本在这里:

var pictureSource;   // picture source
    var destinationType; // sets the format of returned value
    // Wait for PhoneGap to connect with the device
    document.addEventListener("deviceready",onDeviceReady,false);
     // Cordova is ready to be used!
    //

    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }
     // Called when a photo is successfully retrieved
    function onPhotoDataSuccess(imageData) {
      // Uncomment to view the base64 encoded image data
      var im=document.getElementById('image');
      im.style.display = 'block';
      im.src="data:img/jpeg;base64," +imageData;

      // console.log(imageData);   
    }
    // Called when a photo is successfully retrieved
    function onPhotoURISuccess(imageURI) {
      // Uncomment to view the image file URI 
      // console.log(imageURI);
        var largeImage = document.getElementById('largeImage');

      // Unhide image elements
      //
        largeImage.style.display = 'block';

      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      largeImage.src = imageURI;
      // Get image handle
      var image = document.getElementById('image');
      var imgCnt = document.getElementById('image_container');

      // Unhide image container
      imgCnt.style.display = 'block';
      // Unhide image elements
      image.style.display = 'block';
      // Show the captured photo
      // The inline CSS rules are used to resize the image
      image.src = imageURI;
    }

    // A button will call this function
    function capturePhoto() {
      // Take picture using device camera and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality:     50,destinationType: destinationType.DATA_URL,
      correctOrientation: true, targetWidth:200, targetHeigth:200 });
    }

    // A button will call this function
    function getImage(source) {
      // Retrieve image file location from specified source
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
        destinationType: destinationType.FILE_URI,
        sourceType: source,correctOrientation: true });
    }

    // Called if something bad happens.
    function onFail(message) {
      alert('Failed because: ' + message);
    }

     // Called when capture operation is finished
    function captureSuccess(mediaFiles) {

    }

    // Called if something bad happens.
    function captureError(error) {
        var msg = 'An error occurred during capture: ' + error.code;
        navigator.notification.alert(msg, null, 'Uh oh!');
    }
         $("#capture").live('click',function(event){
            capturePhoto();
        });
         $("#getImg").live('click',function(event){
            getImage(pictureSource.SAVEDPHOTOALBUM);
        }); 
        $(document).live(function(e) {
            $(".frame").draggable();        
            });
        $("#large").live('click',function(event){
                var wsize=$('img.frames').width();
                var hsize=$('img.frames').height();
                $('img.frames').width(wsize * 1.2);
                $('img.frames').height(hsize * 1.2);
            });

        $("#small").live('click',function(event){
                var wsize=$('img.frames').width();
                var hsize=$('img.frames').height();
                $('img.frames').width(wsize * 0.8);
                $('img.frames').height(hsize * 0.8);
            });

0 个答案:

没有答案