Click here and follow my SAP UI5/FIORI snippets and information Page
This is use of flip() method and HTML with SAPUI5,below I have shown application structure,view part,controller part, css part and index part of the application.Go through it and please let me know in case of any issue/doubt.
Application Structure
View Part
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="view.s1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:f="sap.ui.layout.form">
<Page title="Tile" id="pageid">
<content></content>
</Page>
</core:View>
Controller Part
sap.ui.controller("view.s1", {
onInit : function() {
// Adding HTML to SAPUI5
var htML=new sap.ui.core.HTML();
var fulldiv="<html><head></head><body><div id='card'>" +
"<div class='front'><a href='http://www.Google.com' style='text-decoration:none; color:green'>OPEN GOOGLE</a> </div>" +
"<div class='back'><a href='http://www.yahoo.com' style='text-decoration:none; color:green'>OPEN YAHOO </a></div> " +
"</div></body></html>"
htML.setContent(fulldiv);
var page_Id=this.getView().byId("pageid");
page_Id.addContent(htML);
},
// flip method of JQUERY
onAfterRendering:function()
{
$("#card").flip({
axis: "y", // y or x
reverse: false, // true and false
trigger: "hover", // click or hover
speed: 1000
})
}
});
NOTE:
You have to download two plugins of jquery and you have to import in file.
1. flip.js
2. jquery.flip.js
style.css
#card{
width: 200px;
height: 150px;
margin: 20px;
display: inline-block;
}
.front {
background-color: #CAACAC;
padding: 10px;
text-align: center;
border: 1px #333 solid;
}
.back {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
border: 1px #333 solid;
}
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
// importing css file
<link rel="stylesheet" type="text/css" href="css/style.css"></link>
<script>
sap.ui.localResources("view");
var app = new sap.m.App({initialPage:"ids11"});
var page = sap.ui.view({id:"ids11", viewName:"view.s1", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
// importing js file
<script src="view/flip.js"></script>
<script src="view/jquery.flip.js"></script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Result
No comments:
Post a Comment