how to fire progressbar events jquery mobile
if i use this scripts and css files

        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8" />
        <title>progressbar</title> 
        <link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"    /> 
        <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui.min.js")">     </script>
        <script type="text/javascript">
            $(document).ready(function () {
                alert('hi');
                $("#progressbar").progressbar({ value: 70 });
            });
        </script>
    </head>
    <body>
       <div id="progressbar"> 
       </div>
    </body>
    </html>

this is working fine.
but here i am using the other css files as because i am working for the mobiles.
 my project contains this is styles and scripts

   

        <html>
         <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <link href="@Url.Content("~/Content/jquery.mobile-1.0rc2.css")" rel="stylesheet" type="text/css" />  
        <script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script> 
        <script src="@Url.Content("~/Scripts/jquery.mobile-1.0rc2.js")" type="text/javascript"></script> 
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        </script>
        
        <script type="text/javascript">
            $(document).ready(function () {
                alert('hi');
                $("#progressbar").progressbar({ value: 70 });
            });
    </script>
    </head>
    <body>
        <div id="progressbar"> 
         </div>
    </body>
    </html>

I am using ***jquery.mobile-1.0rc2.css*** for styles and ***jquery.mobile-1.0rc2.js*** for jquery.
so i have observed the styles in previous css file as

   

     .ui-widget {
     font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
     font-size: 1.1em/*{fsDefault}*/;
      }
     .ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background:        #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
     .ui-progressbar { height:2em; text-align: left; }
     .ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }

these styles are using for progress bar . so i copied them to ***jquery.mobile-1.0rc2.css***

but some calls are made in ***jquery-ui.min.js*** to apply the progressbar styles.

so how could accomplish this task without adding those files.

any help ?

Thanks in advance.

how to fire progressbar events jquery mobile
===

if i use this scripts and css files

        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8" />
        <title>progressbar</title> 
        <link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"    /> 
        <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui.min.js")">     </script>
        <script type="text/javascript">
            $(document).ready(function () {
                alert('hi');
                $("#progressbar").progressbar({ value: 70 });
            });
        </script>
    </head>
    <body>
       <div id="progressbar"> 
       </div>
    </body>
    </html>

this is working fine.
but here i am using the other css files as because i am working for the mobiles.
 my project contains this is styles and scripts

   

        <html>
         <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <link href="@Url.Content("~/Content/jquery.mobile-1.0rc2.css")" rel="stylesheet" type="text/css" />  
        <script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script> 
        <script src="@Url.Content("~/Scripts/jquery.mobile-1.0rc2.js")" type="text/javascript"></script> 
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        </script>
        
        <script type="text/javascript">
            $(document).ready(function () {
                alert('hi');
                $("#progressbar").progressbar({ value: 70 });
            });
    </script>
    </head>
    <body>
        <div id="progressbar"> 
         </div>
    </body>
    </html>

I am using ***jquery.mobile-1.0rc2.css*** for styles and ***jquery.mobile-1.0rc2.js*** for jquery.
so i have observed the styles in previous css file as

   

     .ui-widget {
     font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
     font-size: 1.1em/*{fsDefault}*/;
      }
     .ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background:        #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
     .ui-progressbar { height:2em; text-align: left; }
     .ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }

these styles are using for progress bar . so i copied them to ***jquery.mobile-1.0rc2.css***

but some calls are made in ***jquery-ui.min.js*** to apply the progressbar styles.

so how could accomplish this task without adding those files.

any help ?

Thanks in advance.
