{"id":550,"date":"2012-12-24T10:27:30","date_gmt":"2012-12-24T02:27:30","guid":{"rendered":"http:\/\/www.sunmes.com\/?p=550"},"modified":"2022-12-16T15:56:51","modified_gmt":"2022-12-16T07:56:51","slug":"about-cosmetics-mobile-device-website-the-jquery-mobile-use-adaptive-floating","status":"publish","type":"post","link":"http:\/\/www.sunmes.com\/about-cosmetics-mobile-device-website-the-jquery-mobile-use-adaptive-floating\/","title":{"rendered":"\u5173\u4e8e\u5316\u5986\u54c1\u79fb\u52a8\u8bbe\u5907\u7f51\u7ad9\u5f00\u53d1jquery mobile\u8fd0\u7528–\u81ea\u9002\u5e94\u6d6e\u52a8\uff08\u5b98\u65b9\u9996\u9875\u6548\u679c\u89e3\u6670\uff09"},"content":{"rendered":"

\u79fb\u52a8\u8bbe\u5907\u7f51\u7ad9\u5f00\u53d1\u4e2d\uff0cjquery mobile<\/a>\u662f\u4e00\u6b3e\u4f18\u79c0\u9996\u9009\u7684\u5f00\u53d1\u7a0b\u5e8f\uff0c\u662f\u7531\uff08MT\uff09Media Temple\u8054\u5408\u591a\u5bb6\u79fb\u52a8\u8bbe\u5907\u5382\u5546\u4ee5\u53ca\u8f6f\u4ef6\u4f01\u4e1a\u5171\u540c\u53d1\u8d77\u7684\u7684\u9488\u5bf9\u89e6\u5c4f\u667a\u80fd \u624b\u673a\u4e0e\u5e73\u677f\u7535\u8111\u7684website\u4ee5\u53ca\u5728\u7ebf\u5e94\u7528\u7684\u524d\u7aef\u5f00\u53d1\u6846\u67b6\u3002\u521d\u6b65\u8bd5\u63a2\u4e86\u4e00\u4e0b\uff0c\u517c\u5bb9\u5e02\u9762\u4e0a\u5404\u79cd\u624b\u673a\u548c\u5e73\u677f\u6d4f\u89c8\u5668\uff0c\u66f4\u88ab\u5b98\u65b9\u8bd5\u7528\u7684\u9875\u81ea\u9002\u5e94\u5c4f\u76ee\u6d6e\u52a8\u6548\u679c\u6240\u5438\u5f15\uff0c\u5728\u8981\u6c42\u65f6\u5c1a\u4e0e\u7f8e\u89c2\u7684\u5316\u5986\u54c1\u79fb\u52a8\u8bbe\u5907\u7f51\u7ad9\u8bbe<\/a>\u8ba1\u4e2d\uff0c\u589e\u6dfb\u66f4\u591a\u7684\u8272\u5f69\u4e0e\u559c\u60a6\uff01\u4e0b\u9762\u5217\u51fa\u5173\u952e\u4ee3\u7801<\/p>\n

<divdata-role=”page”id=”jqm-home”class=”type-home”><divdata-role=”content”><divclass=”content-secondary”><\/p>\n

This\u00a0would\u00a0be\u00a0the\u00a0sidebar\/split\u00a0view\u00a0on\u00a0a\u00a0tablet,<\/p>\n

would\u00a0show\u00a0up\u00a0stacked\u00a0on\u00a0a\u00a0mobile\u00a0device<\/p>\n

<\/div><!–\u00a0end\u00a0content-secondary\u00a0–><divclass=”content-primary”><\/p>\n

This\u00a0is\u00a0the\u00a0main\u00a0content.<\/p>\n

 <\/p>\n

If\u00a0Tablet\u00a0device\u00a0this\u00a0would\u00a0be\u00a0to\u00a0the\u00a0right\u00a0of\u00a0the\u00a0above\u00a0content,<\/p>\n

if\u00a0mobile\u00a0this\u00a0would\u00a0be\u00a0below\u00a0the\u00a0above\u00a0content.<\/p>\n

 <\/p>\n

<\/div><!–\u00a0end\u00a0content-primary\u00a0–><\/div><!–\u00a0end\u00a0content\u00a0–><\/div><!–\u00a0end\u00a0page\u00a0–><\/p>\n

\/\/JS<\/p>\n

function\u00a0setPositions(){var\u00a0winwidth\u00a0=\u00a0$(\u00a0window\u00a0).width()if(\u00a0winwidth\u00a0>=750){<\/p>\n

$(‘.content-secondary’).css({‘float’:’left’,’width’:’35%’});<\/p>\n

$(‘.content-primary’).css({‘margin-left’:’36%’});}else{<\/p>\n

$(‘.content-secondary’).css({‘float’:’none’,’width’:’100%’});<\/p>\n

$(‘.content-primary’).css({‘margin-left’:’0px’});}}<\/p>\n

 <\/p>\n

 <\/p>\n

$(function(){<\/p>\n

setDefaultTransition();<\/p>\n

$(\u00a0window\u00a0).bind(“throttledresize”,\u00a0setPositions\u00a0);});<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\/*\u00a0jqm\u00a0docs\u00a0css<\/p>\n

 <\/p>\n

Beware:\u00a0lots\u00a0of\u00a0last-minute\u00a0CSS\u00a0going\u00a0on\u00a0in\u00a0here<\/p>\n

cobblers,\u00a0shoes,<\/p>\n

*\/<\/p>\n

 <\/p>\n

body\u00a0{\u00a0background:\u00a0#dddddd;\u00a0}<\/p>\n

 <\/p>\n

.ui-mobile\u00a0#jqm-home\u00a0{\u00a0\u00a0background:\u00a0#e5e5e5\u00a0url(..\/images\/jqm-sitebg.png)\u00a0top\u00a0center\u00a0repeat-x;\u00a0}<\/p>\n

.ui-mobile\u00a0#jqm-homeheader\u00a0{\u00a0padding:\u00a040px\u00a010px\u00a00;\u00a0text-align:\u00a0center;\u00a0\u00a0margin:\u00a00\u00a0auto;\u00a0}<\/p>\n

.ui-mobile\u00a0#jqm-homeheader\u00a0h1\u00a0{\u00a0margin:\u00a00\u00a00\u00a0;\u00a0}<\/p>\n

.ui-mobile\u00a0#jqm-homeheader\u00a0p\u00a0{\u00a0margin:\u00a0.3em\u00a00\u00a00;\u00a0line-height:\u00a01.3;\u00a0font-size:\u00a0.9em;\u00a0font-weight:\u00a0bold;\u00a0color:\u00a0#666;\u00a0}<\/p>\n

.ui-mobile\u00a0#jqm-version\u00a0{\u00a0text-indent:\u00a0-99999px;\u00a0background:\u00a0url(..\/images\/version.png)\u00a0top\u00a0right\u00a0no-repeat;\u00a0width:\u00a0119px;\u00a0height:\u00a0122px;\u00a0overflow:\u00a0hidden;\u00a0position:\u00a0absolute;\u00a0z-index:\u00a050;\u00a0top:\u00a00;\u00a0right:\u00a00;\u00a0}<\/p>\n

.ui-mobile\u00a0.jqm-themeswitcher\u00a0{\u00a0margin:\u00a010px\u00a025px\u00a010px\u00a010px;\u00a0\u00a0}<\/p>\n

 <\/p>\n

h2\u00a0{\u00a0margin-top:1.5em;\u00a0}<\/p>\n

p\u00a0code\u00a0{\u00a0font-size:1.2em;\u00a0font-weight:bold;\u00a0}<\/p>\n

 <\/p>\n

dt\u00a0{\u00a0font-weight:\u00a0bold;\u00a0margin:\u00a02em\u00a00\u00a0.5em;\u00a0}<\/p>\n

dt\u00a0code,\u00a0dd\u00a0code\u00a0{\u00a0font-size:1.3em;\u00a0line-height:150%;\u00a0}<\/p>\n

pre\u00a0{\u00a0white-space:\u00a0pre;\u00a0white-space:\u00a0pre-wrap;\u00a0word-wrap:\u00a0break-word;\u00a0}<\/p>\n

 <\/p>\n

#jqm-homeheader\u00a0img\u00a0{\u00a0width:\u00a0235px;\u00a0}<\/p>\n

 <\/p>\n

.ui-header\u00a0.jqm-home\u00a0{\u00a0top:0.65em;\u00a0}<\/p>\n

nav\u00a0{\u00a0margin:\u00a00;\u00a0}<\/p>\n

 <\/p>\n

p.intro\u00a0{<\/p>\n

font-size:\u00a0.96em;<\/p>\n

line-height:\u00a01.3;<\/p>\n

border-top:\u00a01px\u00a0solid\u00a0#75ae18;<\/p>\n

border-bottom:\u00a00;<\/p>\n

background:\u00a0none;<\/p>\n

margin:\u00a01.5em\u00a00;<\/p>\n

padding:\u00a01.5em\u00a015px\u00a00;<\/p>\n

 <\/p>\n

}<\/p>\n

p.intro\u00a0strong\u00a0{<\/p>\n

color:\u00a0\u00a0#558e08;<\/p>\n

}<\/p>\n

.footer-docs\u00a0{<\/p>\n

padding:\u00a05px\u00a00;<\/p>\n

}<\/p>\n

.footer-docs\u00a0p\u00a0{<\/p>\n

float:\u00a0left;<\/p>\n

margin-left:15px;<\/p>\n

font-weight:\u00a0normal;<\/p>\n

font-size:\u00a0.9em;<\/p>\n

}<\/p>\n

 <\/p>\n

.type-interior\u00a0.content-secondary\u00a0{<\/p>\n

border-right:\u00a00;<\/p>\n

border-left:\u00a00;<\/p>\n

margin:\u00a010px\u00a0-15px\u00a00;<\/p>\n

background:\u00a0#fff;<\/p>\n

border-top:\u00a01px\u00a0solid\u00a0#ccc;<\/p>\n

}<\/p>\n

.type-home\u00a0.ui-content\u00a0{<\/p>\n

margin-top:\u00a05px;<\/p>\n

}<\/p>\n

.type-interior\u00a0.ui-content\u00a0{<\/p>\n

padding-bottom:\u00a00;<\/p>\n

}<\/p>\n

.content-secondary\u00a0.ui-collapsible-contain\u00a0{<\/p>\n

padding:\u00a010px\u00a015px;<\/p>\n

 <\/p>\n

}<\/p>\n

.content-secondary\u00a0.ui-collapsible-heading\u00a0{<\/p>\n

margin:\u00a00\u00a00\u00a030px;<\/p>\n

}<\/p>\n

.content-secondary\u00a0.ui-collapsible-heading-collapsed,<\/p>\n

.content-secondary\u00a0.ui-collapsible-content\u00a0{<\/p>\n

padding:0;<\/p>\n

margin:\u00a00;<\/p>\n

}<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\/*\u00a0F\u00a0bar\u00a0theme\u00a0–\u00a0just\u00a0for\u00a0the\u00a0docs\u00a0overview\u00a0headers\u00a0*\/<\/p>\n

.ui-bar-f\u00a0{<\/p>\n

border:\u00a01px\u00a0solid\u00a0#56A00E;<\/p>\n

background:\u00a0#74b042;<\/p>\n

color:\u00a0#fff;<\/p>\n

font-weight:\u00a0bold;<\/p>\n

text-shadow:\u00a00\u00a0-1px\u00a01px\u00a0#234403;<\/p>\n

background-image:\u00a0-moz-linear-gradient(top,<\/p>\n

#74b042,<\/p>\n

#56A00E);<\/p>\n

background-image:\u00a0-webkit-gradient(linear,left\u00a0top,left\u00a0bottom,<\/p>\n

color-stop(0,\u00a0#74b042),<\/p>\n

color-stop(1,\u00a0#56A00E));<\/p>\n

-ms-filter:\u00a0“progid:DXImageTransform.Microsoft.gradient(startColorStr=’#81a8ce’,\u00a0EndColorStr=’#5e87b0′)”;<\/p>\n

}<\/p>\n

.ui-bar-f,<\/p>\n

.ui-bar-f\u00a0.ui-link-inherit\u00a0{<\/p>\n

color:\u00a0#fff;<\/p>\n

}<\/p>\n

.ui-bar-f\u00a0.ui-link\u00a0{<\/p>\n

color:\u00a0#fff;<\/p>\n

font-weight:\u00a0bold;<\/p>\n

}<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\/*\u00a0docs\u00a0site\u00a0layout\u00a0*\/<\/p>\n

 <\/p>\n

@media\u00a0all\u00a0and\u00a0(min-width:\u00a0650px){<\/p>\n

 <\/p>\n

.jqm-home\u00a0{<\/p>\n

position:\u00a0absolute;<\/p>\n

left:\u00a010px;<\/p>\n

top:\u00a00;<\/p>\n

}<\/p>\n

.type-home\u00a0.ui-content\u00a0{<\/p>\n

margin-top:\u00a05px;<\/p>\n

}<\/p>\n

.ui-mobile\u00a0#jqm-homeheader\u00a0{<\/p>\n

max-width:\u00a0340px;<\/p>\n

}<\/p>\n

.ui-mobile\u00a0.jqm-themeswitcher\u00a0{<\/p>\n

float:\u00a0right;<\/p>\n

}<\/p>\n

p.intro\u00a0{<\/p>\n

margin:\u00a02em\u00a00;<\/p>\n

}<\/p>\n

.type-home\u00a0.ui-content,<\/p>\n

.type-interior\u00a0.ui-content\u00a0{<\/p>\n

padding:\u00a00;<\/p>\n

background:\u00a0url(..\/images\/px-ccc.gif)\u00a050%\u00a00\u00a0repeat-y;<\/p>\n

}<\/p>\n

.type-interior\u00a0.ui-content\u00a0{<\/p>\n

background-position:\u00a045%;<\/p>\n

overflow:\u00a0hidden;<\/p>\n

}<\/p>\n

.content-secondary\u00a0{<\/p>\n

text-align:\u00a0left;<\/p>\n

float:\u00a0left;<\/p>\n

width:\u00a045%;<\/p>\n

background:\u00a0none;<\/p>\n

border-top:\u00a00;<\/p>\n

}<\/p>\n

.content-secondary,<\/p>\n

.type-interior\u00a0.content-secondary\u00a0{<\/p>\n

margin:\u00a030px\u00a00\u00a020px\u00a02%;<\/p>\n

padding:\u00a020px\u00a04%\u00a00\u00a00;<\/p>\n

background:\u00a0none;<\/p>\n

}<\/p>\n

.type-index\u00a0.content-secondary\u00a0{<\/p>\n

padding:\u00a00;<\/p>\n

}<\/p>\n

.type-index\u00a0.content-secondary\u00a0.ui-listview\u00a0{<\/p>\n

margin:\u00a00;<\/p>\n

}<\/p>\n

 <\/p>\n

.ui-mobile\u00a0#jqm-homeheader\u00a0{<\/p>\n

padding:\u00a00;<\/p>\n

}<\/p>\n

.content-primary\u00a0{<\/p>\n

width:\u00a045%;<\/p>\n

float:\u00a0right;<\/p>\n

margin-top:\u00a030px;<\/p>\n

margin-right:\u00a01%;<\/p>\n

padding-right:\u00a01%;<\/p>\n

}<\/p>\n

.content-primary\u00a0ul:first-child\u00a0{<\/p>\n

margin-top:\u00a00;<\/p>\n

}<\/p>\n

.content-secondary\u00a0h2\u00a0{<\/p>\n

position:\u00a0absolute;<\/p>\n

left:\u00a0-9999px;<\/p>\n

}<\/p>\n

.type-interior\u00a0.content-primary\u00a0{<\/p>\n

padding:\u00a01.5em\u00a06%\u00a03em\u00a00;<\/p>\n

margin:\u00a00;<\/p>\n

}<\/p>\n

\/*\u00a0fix\u00a0up\u00a0the\u00a0collapsibles\u00a0–\u00a0expanded\u00a0on\u00a0desktop\u00a0*\/<\/p>\n

.content-secondary\u00a0.ui-collapsible-heading\u00a0{<\/p>\n

display:\u00a0none;<\/p>\n

}<\/p>\n

.content-secondary\u00a0.ui-collapsible-contain\u00a0{<\/p>\n

margin:0;<\/p>\n

}<\/p>\n

.content-secondary\u00a0.ui-collapsible-content\u00a0{<\/p>\n

display:\u00a0block;<\/p>\n

margin:\u00a00;<\/p>\n

padding:\u00a00;<\/p>\n

}<\/p>\n

.type-interior\u00a0\u00a0.content-secondary\u00a0.ui-li-divider\u00a0{<\/p>\n

padding-top:\u00a01em;<\/p>\n

padding-bottom:\u00a01em;<\/p>\n

}<\/p>\n

.type-interior\u00a0.content-secondary\u00a0{<\/p>\n

margin:\u00a00;<\/p>\n

padding:\u00a00;<\/p>\n

}<\/p>\n

 <\/p>\n

}<\/p>\n

@media\u00a0all\u00a0and\u00a0(min-width:\u00a0750px){<\/p>\n

.type-home\u00a0.ui-content,<\/p>\n

.type-interior\u00a0.ui-content\u00a0{<\/p>\n

background-position:\u00a039%;<\/p>\n

}<\/p>\n

.content-secondary\u00a0{<\/p>\n

width:\u00a034%;<\/p>\n

}<\/p>\n

.content-primary\u00a0{<\/p>\n

width:\u00a056%;<\/p>\n

padding-right:\u00a01%;<\/p>\n

}<\/p>\n

.type-interior\u00a0.ui-content\u00a0{<\/p>\n

background-position:\u00a034%;<\/p>\n

}<\/p>\n

}<\/p>\n

 <\/p>\n

@media\u00a0all\u00a0and\u00a0(min-width:\u00a01200px){<\/p>\n

.type-home\u00a0.ui-content{<\/p>\n

background-position:\u00a038.5%;<\/p>\n

}<\/p>\n

.type-interior\u00a0.ui-content\u00a0{<\/p>\n

background-position:\u00a030%;<\/p>\n

}<\/p>\n

.content-secondary\u00a0{<\/p>\n

width:\u00a030%;<\/p>\n

padding-right:6%;<\/p>\n

margin:\u00a030px\u00a00\u00a020px\u00a05%;<\/p>\n

}<\/p>\n

.type-interior\u00a0.content-secondary\u00a0{<\/p>\n

margin:\u00a00;<\/p>\n

padding:\u00a00;<\/p>\n

}<\/p>\n

.content-primary\u00a0{<\/p>\n

width:\u00a050%;<\/p>\n

margin-right:\u00a05%;<\/p>\n

padding-right:\u00a03%;<\/p>\n

}<\/p>\n

.type-interior\u00a0.content-primary\u00a0{<\/p>\n

width:\u00a060%;<\/p>\n

}<\/p>\n

}<\/p>\n","protected":false},"excerpt":{"rendered":"

\u79fb\u52a8\u8bbe\u5907\u7f51\u7ad9\u5f00\u53d1\u4e2d\uff0cjquery mobile\u662f\u4e00\u6b3e\u4f18\u79c0\u9996\u9009\u7684\u5f00\u53d1\u7a0b\u5e8f\uff0c\u662f\u7531\uff08MT\uff09Media Temple\u8054\u5408\u591a\u5bb6\u79fb\u52a8\u8bbe\u5907\u5382\u5546\u4ee5\u53ca\u8f6f\u4ef6\u4f01\u4e1a…<\/p>\n

Read More…<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,36],"tags":[61,69],"_links":{"self":[{"href":"http:\/\/www.sunmes.com\/wp-json\/wp\/v2\/posts\/550"}],"collection":[{"href":"http:\/\/www.sunmes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.sunmes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.sunmes.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.sunmes.com\/wp-json\/wp\/v2\/comments?post=550"}],"version-history":[{"count":10,"href":"http:\/\/www.sunmes.com\/wp-json\/wp\/v2\/posts\/550\/revisions"}],"predecessor-version":[{"id":3081,"href":"http:\/\/www.sunmes.com\/wp-json\/wp\/v2\/posts\/550\/revisions\/3081"}],"wp:attachment":[{"href":"http:\/\/www.sunmes.com\/wp-json\/wp\/v2\/media?parent=550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.sunmes.com\/wp-json\/wp\/v2\/categories?post=550"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.sunmes.com\/wp-json\/wp\/v2\/tags?post=550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}