Why Juice UI 1.0.1 not work in visual studio 2010

257 views
Skip to first unread message

chen frank

unread,
Oct 10, 2012, 10:22:12 PM10/10/12
to jui...@googlegroups.com
Dear sir

       I install Juice UI 1.0.1 by NuGet. Then add a page in web project name is WebForm1.  
       Put a  'Tabs' control into my page. According to Juice UI web site example to add content. 
       But it not work. I don't how to use it. Can  someone  help me?
       The same procedure in 0.9.2 version is work.

below is my code and result
code:
web.config
<?xml version="1.0" encoding="utf-8"?>
<!--
  如需如何設定 ASP.NET 應用程式的詳細資訊，請造訪
  -->
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
    <pages>
      <controls>
        <add assembly="JuiceUI" namespace="Juice" tagPrefix="juice" />
      </controls>
    </pages>
  </system.web>
</configuration>

WebForm1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication6.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <juice:Tabs ID="_Default" runat="server">
            <juice:TabPage Title="Tab 1" ID="_Tab1" runat="server">
                <TabContent>
                    <p>
                        Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec
                        arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
                        Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
                        leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales
                        tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel
                        pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
                        Nunc tristique tempus lectus.</p>
                </TabContent>
            </juice:TabPage>
            <juice:TabPage Title="Tab 2" ID="_Tab2" runat="server">
                <TabContent>
                    <p>
                        Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra
                        massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget
                        luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
                        aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent
                        in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat
                        nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque
                        convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod
                        felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
                </TabContent>
            </juice:TabPage>
            <juice:TabPage Title="Tab 3" ID="_Tab3" runat="server">
                <TabContent>
                    <p>
                        Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate,
                        pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.
                        Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
                        nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo
                        pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem
                        enim, pretium nec, feugiat nec, luctus a, lacus.</p>
                    <p>
                        Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam
                        ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing
                        velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula
                        faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero
                        sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor
                        ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas
                        commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit
                        hendrerit.</p>
                </TabContent>
            </juice:TabPage>
        </juice:Tabs>
    </div>
    </form>
</body>
</html>

Result:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title><link id="juice_juice-ui" href="/Content/themes/Fresh-Squeezed/jquery-ui-1.8.18.custom.css" type="text/css" rel="stylesheet" /></head>
<body>
<form method="post" action="WebForm1.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDQ4MTY0OTA2D2QWAgIDD2QWAgIDDw9kFgIeDmRhdGEtdWktd2lkZ2V0BQR0YWJzZBgBBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WAQUIX0RlZmF1bHRbus27fDrgrTt5lxmlqtXzc2Kp+GHLotGpUUocy1bL6Q==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=Davp3Od5LDOW0rg-Le3X-xfM8uRax4DTErdIgFWG3hjwUGSuv_xOgcp8p-WLmm2Tmnmgy2NAaqOmugmm9NSr-76thhbb2z2_Fkijd7FaD2o1&amp;t=634844396058307147" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=_rP5DbommMEyqXrivaxaM7Ba3-N5P3kOgzDmUgsp-4Mt-XLaCBCHq_TcdMG3KC_6ljIot-cZT29wIH2-EAAx_PEazRD2ftZWAcioFs65ttvIcK1TSWcVCahrqGimlEoO5e0kj1PJy0up0DBWYBTegQtuV26Wv-9IrOJYF_BKluVbRd3q5TEHkExLC1w7wir50&amp;t=ffffffff940d030f" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax 用戶端架構無法載入。');
//]]>
</script>
<script src="/ScriptResource.axd?d=7HN_TPlZpB4rpSw0xLSa7owPPUQhwo7whHvZUVcKRofkGT3-4kUVdRPoqUr6-kPM2OJFapqnmWqAQrrWNcdvT-06ps1uiZH7Q345YmgKslK-J_cNmQDnJAdndWVP1Lbvx54nklQz5IMFMo8O9NinveaSXbXCRSZEv67Sa9fHqtyfNlECSdAPckiI0b43a50Z0&amp;t=ffffffff940d030f" type="text/javascript"></script>
<script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.23.js" type="text/javascript"></script>
<script src="Scripts/amplify.js" type="text/javascript"></script>
<script src="Scripts/juice.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
// Juice Initialization
(function() {
if(typeof(window.Juice) !== 'undefined' && window.Juice) {
window.Juice.widgets = [{"widgetName":"tabs","id":"_Default","uniqueId":"_Default","options":{},"encodedOptions":["panelTemplate","spinner","tabTemplate"],"events":["create","load","add","remove","enable","select","disable","show"],"postBacks":[]}];
window.Juice.cssUrl = '/Content/themes/Fresh-Squeezed/jquery-ui-1.8.18.custom.css';
}
})();function WebForm_OnSubmit() {
if (typeof(window.Juice) !== 'undefined' && window.Juice) {
window.Juice.onSubmit();
};
return true;
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', 'form1', [], [], [], 90, '');
//]]>
</script>
<div>
<div id="_Default" data-ui-widget="tabs">
<ul><li><a href="#_Tab1">Tab 1</a></li><li><a href="#_Tab2">Tab 2</a></li><li><a href="#_Tab3">Tab 3</a></li></ul><div id="_Tab1">
<p>
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec
arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales
tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel
pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
Nunc tristique tempus lectus.</p>
</div><div id="_Tab2">
<p>
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra
massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget
luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent
in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat
nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque
convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod
felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div><div id="_Tab3">
<p>
Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate,
pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.
Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo
pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem
enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>
Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam
ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing
velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula
faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero
sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor
ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas
commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit
hendrerit.</p>
</div>
</div>
</div>
</form>
</body>
</html>


Reply all
Reply to author
Forward
0 new messages