首页 \ 问答 \ 为什么Apple的PackagedDocument MacOS iCloud示例项目找不到URLForUbiquityContainerIdentifier?(Why does Apple's PackagedDocument MacOS iCloud sample project not find URLForUbiquityContainerIdentifier?)

为什么Apple的PackagedDocument MacOS iCloud示例项目找不到URLForUbiquityContainerIdentifier?(Why does Apple's PackagedDocument MacOS iCloud sample project not find URLForUbiquityContainerIdentifier?)

我一直在尝试使用iCloud示例代码和教程,以便在我们的MacOS和iOS产品之间开发一个同步系统。 在iOS方面,我在构建和运行操作iCloud Documents容器中的数据的代码时没有任何问题,但在MacOS方面,使用Apple MacOS PackagedDocument示例项目,我无法在iCloud中成功放置任何数据。 我认为基本问题是我的应用程序的URLForUbiquityContainerIdentifier无法找到,可能是由于iCloud权利规范中的一些错误。 但是,经过大量时间花在开发人员门户和Xcode 6 / PackagedDocument设置上,我一直无法找到问题的根源。

我的iCloud帐户以前是MobileMe帐户,用于在MacOS和iOS设备之间同步Apple应用程序,因此我相信我的iCloud帐户可以正常运行。

在这里,我将说明我指定调用以获取iCloud Documents容器的不同方法。 无论如何指定,获取iCloud容器URL的调用都返回nil:

    // remember our ubiquity container NSURL for later use
    _ubiquityContainer = [[NSFileManager defaultManager] URLForUbiquityContainerIdentifier:@"icloud.com.mycompany.PackagedDocument"];
    _ubiquityContainer = [[NSFileManager defaultManager] URLForUbiquityContainerIdentifier:@"7G3Z4SV5WT.com.mycompany.PackagedDocument"];
    _ubiquityContainer = [[NSFileManager defaultManager] URLForUbiquityContainerIdentifier:nil];

在我的iOS实验中,此URLForUbiquityContainerIdentifier调用始终获取所需的URL。

该应用程序的CFBundleIdentifier是com.mycompany.PackagedDocument

iCloud授权密钥指定如下:

com.apple.application-identifier键值为$(TeamIdentifierPrefix)com.mycompany.PackagedDocument

com.apple.developer.icloud-services键值为CloudDocuments

com.apple.developer.icloud-container-identifiers键值为iCloud。$(CFBundleIdentifier)

com.apple.developer.ubiquity-container-identifiers键值是iCloud。$(CFBundleIdentifier)

我也试过这个视频教程中的代码,但在尝试获取普遍容器时得到相同的nil结果:

    - (IBAction)saveToIcloud:(id)sender {

    NSFileManager *fm = [NSFileManager defaultManager];

    NSURL *directory = [[fm URLForUbiquityContainerIdentifier:@"7G3Z4SV5WT.com.mycompany.PackagedDocument"]
        URLByAppendingPathComponent:@"Documents"];
    directory = [[fm URLForUbiquityContainerIdentifier:@"iCloud.com.mycompany.PackagedDocument"]
                        URLByAppendingPathComponent:@"Documents"];
    directory = [[fm URLForUbiquityContainerIdentifier:nil]
                        URLByAppendingPathComponent:@"Documents"];
    directory = [[fm 

    if (directory) {
        [fm createDirectoryAtURL:directory withIntermediateDirectories:NO attributes:nil error:NULL];

        NSURL *filepath = [NSURL URLWithString:@"/Users/leg/Desktop/myjpeg.jpg"];

        NSURL *destination = [directory URLByAppendingPathComponent:[filepath lastPathComponent]];

        [fm setUbiquitous:YES itemAtURL:filepath destinationURL:destination error:nil];
    }
}

总之,我认为该问题必须与我的iCloud权利规范和/或访问iCloud Document容器所需的其他规范有关。 如果有人对我可能发生的事情有所了解,我将非常感谢他们的反馈。 如果做不到这一点,也许有人可以指出我在使用非iOS ,macos iCloud Documents示例代码。

附加信息

我在控制台日志PackagedDocument启动时看到以下消息:

9/2/15 5:19:11.966 PM taskgated-helper [14145]:不满意的权利com.apple.developer.ubiquity-container-identifiers

9/2/15 5:19:11.966 PM taskgated-helper [14145]:不满意的权利com.apple.developer.icloud-container-identifiers

9/2/15 5:19:11.966 PM taskgated-helper [14145]:不满意的权利com.apple.developer.ubiquity-container-identifiers

9/2/15 5:19:11.966 PM taskgated-helper [14145]:不满意的权利com.apple.developer.icloud-container-identifiers

9/2/15 5:19:11.966 PM taskgated-helper [14145]:不满意的权利com.apple.developer.ubiquity-container-identifiers

9/2/15 5:19:11.966 PM taskgated-helper [14145]:不满意的权利com.apple.developer.icloud-container-identifiers

9/2/15 5:19:11.967 PM taskgated-helper [14145]:由于配置文件,允许pid = 14144的权利

更多信息

我用一个有效的iOS iCloud示例项目进行了实验,以验证PackagedDocument iCloud容器:

我将iOS示例的Capabilites / iCloud设置从“使用默认容器”更改为“指定自定义容器”。 我检查了示例的默认容器并检查了“iCloud.com.mycompany.PackagedDocument”。

然后我更改了URLForUbiquityContainerIdentifier调用:

    from:  NSURL *baseURL = [[NSFileManager defaultManager]URLForUbiquityContainerIdentifier:nil];

    to:    NSURL *baseURL = [[NSFileManager defaultManager] URLForUbiquityContainerIdentifier:@"iCloud.com.mycompany.PackagedDocument"];

现在,当我运行这个iOS应用程序时,它会创建PackagedDocument iCloud容器并将其用于其数据 - 这正是我一直在尝试使用PackagedDocument MacOS示例。

然后我回到MacOS PackagedDocument项目并运行它以查看URLForUbiquityContainerIdentifier调用现在是否会找到容器。 它没有。 即使容器现在肯定存在,Nil仍然返回。

我想这意味着它仍然是某种权利问题。

更多信息

  1. 我进行了另一个实验,我从我的常用开发人员系统(Yosemite 10.10.5)的Xcode 6.4 / Preferences / Actions / Export Accounts ...导出我的开发者身份,然后在Mavericks 10.9.5下重新启动我的MacBook Pro并使用Xcode导入身份6.1 /偏好/行动/进口帐户...... (在我将其升级到Yosemite之前,Mavericks系统磁盘实际上是我的MacBook Pro系统磁盘的Carbon Copy。)现在,当我在Mavericks中构建并运行PackagedDocument时, 一切都运行良好

  2. 然后我重新启动回Yosemite并删除我的身份并使用Xcode 6.1 / Preferences / Actions / Import Accounts ...导入身份。 现在,当我在Yosemite中构建并运行PackagedDocument时,它仍然不起作用 - 找不到iCloud容器

  3. 然后我决定在干净安装的El Capitan(10.11 Beta 5)/ Xcode 6.4中尝试相同的实验。 同样,它仍然无法工作 - 找不到iCloud容器

  4. 最后,我决定再尝试一次。 我决定尝试打开iCloud Drive 。 但是,因为我不想将我工作的iCloud帐户转换为iCloud Drive ,所以我决定为测试创建一个新的iCloud ID,并打开iCloud Drive 。 现在,当我使用iCloud Drive在El Capitan中构建和运行PackagedDocument时, 一切都运行良好


I have been experimenting with iCloud sample code and tutorials in order to develop a syncing system between our MacOS and iOS products. On the iOS side I have had no problem building and running code that manipulates data in an iCloud Documents container, but on the MacOS side, using the Apple MacOS PackagedDocument sample project, I have not been able to successfully place any data in my iCloud. I believe the basic problem is that the URLForUbiquityContainerIdentifier for my app can not be found, probably due to some error in iCloud entitlements specification. But, after much time spent fiddling with the developer portal and Xcode 6/PackagedDocument settings, I have been unable to locate the source of the problem.

My iCloud account was previously a MobileMe account and is used to synchronize the Apple apps between MacOS and iOS devices, so I believe my iCloud account is working without problems.

Here I am illustrating the different ways that I have specified the call to get the iCloud Documents container. The call to get the iCloud container URL returns nil regardless of how it is specified:

    // remember our ubiquity container NSURL for later use
    _ubiquityContainer = [[NSFileManager defaultManager] URLForUbiquityContainerIdentifier:@"icloud.com.mycompany.PackagedDocument"];
    _ubiquityContainer = [[NSFileManager defaultManager] URLForUbiquityContainerIdentifier:@"7G3Z4SV5WT.com.mycompany.PackagedDocument"];
    _ubiquityContainer = [[NSFileManager defaultManager] URLForUbiquityContainerIdentifier:nil];

In my iOS experiments, this URLForUbiquityContainerIdentifier call always gets the desired URL.

The CFBundleIdentifier for the app is com.mycompany.PackagedDocument

The iCloud entitlement keys are specified as follows:

The com.apple.application-identifier key value is $(TeamIdentifierPrefix)com.mycompany.PackagedDocument

The com.apple.developer.icloud-services key value is CloudDocuments

The com.apple.developer.icloud-container-identifiers key value is iCloud.$(CFBundleIdentifier)

and the com.apple.developer.ubiquity-container-identifiers key value is iCloud.$(CFBundleIdentifier)

I also tried code from this video tutorial, but get the same nil result when trying to get the ubiquity container:

    - (IBAction)saveToIcloud:(id)sender {

    NSFileManager *fm = [NSFileManager defaultManager];

    NSURL *directory = [[fm URLForUbiquityContainerIdentifier:@"7G3Z4SV5WT.com.mycompany.PackagedDocument"]
        URLByAppendingPathComponent:@"Documents"];
    directory = [[fm URLForUbiquityContainerIdentifier:@"iCloud.com.mycompany.PackagedDocument"]
                        URLByAppendingPathComponent:@"Documents"];
    directory = [[fm URLForUbiquityContainerIdentifier:nil]
                        URLByAppendingPathComponent:@"Documents"];
    directory = [[fm 

    if (directory) {
        [fm createDirectoryAtURL:directory withIntermediateDirectories:NO attributes:nil error:NULL];

        NSURL *filepath = [NSURL URLWithString:@"/Users/leg/Desktop/myjpeg.jpg"];

        NSURL *destination = [directory URLByAppendingPathComponent:[filepath lastPathComponent]];

        [fm setUbiquitous:YES itemAtURL:filepath destinationURL:destination error:nil];
    }
}

In summary, I believe the problem must have something to do with my specification of iCloud entitlements and/or other specifications necessary to access iCloud Document containers. If anyone has a clue about what may be happening to me, I'd greatly appreciate their feedback. Failing that, maybe someone could point me at working non-iOS, macos iCloud Documents sample code.

Additional Information

I am seeing the following messages in he console log PackagedDocument start-up:

9/2/15 5:19:11.966 PM taskgated-helper[14145]: unsatisfied entitlement com.apple.developer.ubiquity-container-identifiers

9/2/15 5:19:11.966 PM taskgated-helper[14145]: unsatisfied entitlement com.apple.developer.icloud-container-identifiers

9/2/15 5:19:11.966 PM taskgated-helper[14145]: unsatisfied entitlement com.apple.developer.ubiquity-container-identifiers

9/2/15 5:19:11.966 PM taskgated-helper[14145]: unsatisfied entitlement com.apple.developer.icloud-container-identifiers

9/2/15 5:19:11.966 PM taskgated-helper[14145]: unsatisfied entitlement com.apple.developer.ubiquity-container-identifiers

9/2/15 5:19:11.966 PM taskgated-helper[14145]: unsatisfied entitlement com.apple.developer.icloud-container-identifiers

9/2/15 5:19:11.967 PM taskgated-helper[14145]: allowing entitlement(s) for pid=14144 due to provisioning profile

More Information

I performed an experiment with a working iOS iCloud example project to validate the PackagedDocument iCloud container:

I altered the iOS example’s Capabilites/iCloud settings from “Use default container” to “Specify custom containers”. I checked off the example’s default container and checked on “iCloud.com.mycompany.PackagedDocument”.

I then changed the URLForUbiquityContainerIdentifier call:

    from:  NSURL *baseURL = [[NSFileManager defaultManager]URLForUbiquityContainerIdentifier:nil];

    to:    NSURL *baseURL = [[NSFileManager defaultManager] URLForUbiquityContainerIdentifier:@"iCloud.com.mycompany.PackagedDocument"];

Now, when I run this iOS app, it creates the PackagedDocument iCloud container and uses it for its data—-exactly what I’ve been trying to do with the PackagedDocument MacOS sample.

I then went back to the MacOS PackagedDocument project and ran it to see if the URLForUbiquityContainerIdentifier call would now find the container. It did not. Nil is still returned even though the container definitely now exists.

I suppose that this means it is still an entitlements problem of some kind.

Even More Information

  1. I performed another experiment whereby I exported my developer identities from Xcode 6.4/Preferences/Actions/Export Accounts… of my usual developer system (Yosemite 10.10.5,) and then rebooted my MacBook Pro under Mavericks 10.9.5 and imported the identities with Xcode 6.1/Preferences/Actions/ Import Accounts…. (The Mavericks system disk is actually a Carbon Copy of my MacBook Pro system disk before I upgraded it to Yosemite.) Now, when I build and run PackagedDocument in Mavericks, everything works perfectly.

  2. I then rebooted back into Yosemite and removed my identities and imported the identities with Xcode 6.1/Preferences/Actions/ Import Accounts…. Now, when I build and run PackagedDocument in Yosemite, it still does not work--does not find the iCloud container.

  3. I then decided to try the same experiment in a clean install of El Capitan (10.11 Beta 5)/Xcode 6.4. Again, it still does not work--does not find the iCloud container.

  4. And finally, I decided to try one more experiment. I decided to try turning on iCloud Drive. But, because I did not want to convert my working iCloud account to iCloud Drive, I decided to create a new iCloud ID for the test, and to turn on iCloud Drive. Now, when I build and run PackagedDocument in El Capitan with iCloud Drive, everything works perfectly.


原文:https://stackoverflow.com/questions/32342813
更新时间:2024-01-18 07:01

最满意答案

除了给你解决方案更重要的是帮助你实际看到你的元素实际上是集中的

我在调试CSS代码时喜欢使用红色,所以尝试放:

.test-slider {
    border: 1px solid red;
}

现在,您可能会看到.test-slider确实居中,但它的子, .test-slide锚定在其父级的左上角,因为父级的宽度较大,所以它似乎是关闭的。

要解决这个问题,请设置:

.test-slider {
    width: 20.4em; /* Instead of 25em */
}

由于.test-slider是不可见的,只是用来包装.test-slide ,你并不关心它的宽度,所以这个解决方案很好。

另一种方法是设置:

.test-slide {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

由于你使用position: absolute on .test-slide而不是position: relative ,你不会遇到任何问题。 如果以后要将其更改为position: relative ,则可以设置:

.test-slide {
    display: inline-block;
    margin: 0 auto;
}

或者你甚至可以更好地设置:

.test-slider { /* The parent */
    text-align: center;
}

查看以下小提琴以获得更直观的表示:

  • 第一个解决方案→ 在这里
  • 用第二个解决方案→ 这里

片段:

.test-slider {
	width: 20.4em;
	height: 30em;
	overflow: hidden;
	position: relative;
  margin: 0 auto;
}

.test-slide {
	position: absolute;
	animation: 30s slider infinite;
	-webkit-animation: 30s test-slider infinite;
	opacity: 0;
}

@keyframes test-slider {
	10% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

div.test-slide:nth-child(0) {
	animation-delay: 0s;
	-webkit-animation-delay: 0s;
}

div.test-slide:nth-child(1) {
	animation-delay: 15s;
	-webkit-animation-delay: 15s;
}

figure.test {
	font-family: lato !important;
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10% 1%;
	min-width: 15em;
	max-width: 20em;
	width: 100%;
	color: #000000;
	text-align: center;
	font-size: 1em;
	background-color: #2d2d2d;
	padding: 8% 8% 8% 8%;
	background-image: linear-gradient(-25deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 0.3em 0.3em 0.3em 0.3em;
}

figure.test img {
	width: 50%;
	margin-top: 0;
	margin-bottom: 2%;
}

figure.test h2, figure.test h4 {
	font-family: lato;
	text-transform: none;
	margin: 0;
}

figure.test h2 {
	font-weight: bold;
	color: white;
}

figure.test h4 {
	font-weight: normal;
	color: #a6a6a6;
}

figure.test blockquote {
	margin-top: 5%;
	margin-bottom: 0;
	padding: 8%;
	opacity: 1;
	font-style: italic;
	font-size: 1em;
	background-color: white;
	border-radius: 0.3em 0.3em 0.3em 0.3em;
	box-shadow: inset -0.1em -0.1em 0.2em rgba(0, 0, 0, 0.3);
	text-align: left;
	position: relative;
}

.img-border {
	border: 0.5em solid tan;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	box-shadow: 0.4em 0.4em 2em rgba(0, 0, 0, 0.4);
}

.img-circle {
	margin: auto;
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}

blockquote, blockquote:before, blockquote:after, blockquote::before, blockquote::after {
  margin: auto;
	border: none;
	position: initial;
	content: " ";
	quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
	content: open-quote;
}

blockquote::before, blockquote::after {
	display: inline;
}

blockquote:after {
	content: close-quote;
}
<div class="test-slider">
  <div class="test-slide">
    <figure class="test">
      <img class="img-circle img-border" src="http://www.themainconcept.com/wp-content/uploads/2016/04/eric.png" width="40%" />
      <h2>Eric S.</h2>
      <h4>Some Guy</h4>
      <blockquote>Insert cheesy quote here! Lorem ipsum dolor sit amet, at lorem graecis ius, qui at veri vocent.</blockquote>

    </figure>
  </div>
  <div class="test-slide">
    <figure class="test">
      <img class="img-circle img-border" src="http://i1.wp.com/www.visualelegance.ca/wp-content/uploads/2016/07/danielliasquare.png?zoom=2&amp;w=1020" />
      <h2>Daniel &amp; Lia</h2>
      <h4>Couple</h4>
      <blockquote>Words go here from what people have to say.</blockquote>
    </figure>
  </div>
</div>


What's more important than just to give you the solution is to help you actually see that your element in fact is centered.

I like using red when I debug CSS code, so try putting:

.test-slider {
    border: 1px solid red;
}

Now, you probably see for yourself that .test-slider is indeed centered, but its child,.test-slide, is anchored on the top left corner of its parent and since the parent is larger in width, it therefore seems to be off.

To fix that, just set:

.test-slider {
    width: 20.4em; /* Instead of 25em */
}

Since .test-slider is invisible and just serves to wrap .test-slide, you don't really care about its width, so this solution is fine.

Another way to do it is by setting:

.test-slide {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Since you use position: absolute on .test-slide instead of position: relative, you will not face any problems. If later you want to change it to position: relative, you can just set:

.test-slide {
    display: inline-block;
    margin: 0 auto;
}

Or you could even better set:

.test-slider { /* The parent */
    text-align: center;
}

Check out the following fiddles for a more visual representation:

  • With the first solution → here.
  • With the second solution → here.

Snippet:

.test-slider {
	width: 20.4em;
	height: 30em;
	overflow: hidden;
	position: relative;
  margin: 0 auto;
}

.test-slide {
	position: absolute;
	animation: 30s slider infinite;
	-webkit-animation: 30s test-slider infinite;
	opacity: 0;
}

@keyframes test-slider {
	10% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

div.test-slide:nth-child(0) {
	animation-delay: 0s;
	-webkit-animation-delay: 0s;
}

div.test-slide:nth-child(1) {
	animation-delay: 15s;
	-webkit-animation-delay: 15s;
}

figure.test {
	font-family: lato !important;
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10% 1%;
	min-width: 15em;
	max-width: 20em;
	width: 100%;
	color: #000000;
	text-align: center;
	font-size: 1em;
	background-color: #2d2d2d;
	padding: 8% 8% 8% 8%;
	background-image: linear-gradient(-25deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 0.3em 0.3em 0.3em 0.3em;
}

figure.test img {
	width: 50%;
	margin-top: 0;
	margin-bottom: 2%;
}

figure.test h2, figure.test h4 {
	font-family: lato;
	text-transform: none;
	margin: 0;
}

figure.test h2 {
	font-weight: bold;
	color: white;
}

figure.test h4 {
	font-weight: normal;
	color: #a6a6a6;
}

figure.test blockquote {
	margin-top: 5%;
	margin-bottom: 0;
	padding: 8%;
	opacity: 1;
	font-style: italic;
	font-size: 1em;
	background-color: white;
	border-radius: 0.3em 0.3em 0.3em 0.3em;
	box-shadow: inset -0.1em -0.1em 0.2em rgba(0, 0, 0, 0.3);
	text-align: left;
	position: relative;
}

.img-border {
	border: 0.5em solid tan;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	box-shadow: 0.4em 0.4em 2em rgba(0, 0, 0, 0.4);
}

.img-circle {
	margin: auto;
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}

blockquote, blockquote:before, blockquote:after, blockquote::before, blockquote::after {
  margin: auto;
	border: none;
	position: initial;
	content: " ";
	quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
	content: open-quote;
}

blockquote::before, blockquote::after {
	display: inline;
}

blockquote:after {
	content: close-quote;
}
<div class="test-slider">
  <div class="test-slide">
    <figure class="test">
      <img class="img-circle img-border" src="http://www.themainconcept.com/wp-content/uploads/2016/04/eric.png" width="40%" />
      <h2>Eric S.</h2>
      <h4>Some Guy</h4>
      <blockquote>Insert cheesy quote here! Lorem ipsum dolor sit amet, at lorem graecis ius, qui at veri vocent.</blockquote>

    </figure>
  </div>
  <div class="test-slide">
    <figure class="test">
      <img class="img-circle img-border" src="http://i1.wp.com/www.visualelegance.ca/wp-content/uploads/2016/07/danielliasquare.png?zoom=2&amp;w=1020" />
      <h2>Daniel &amp; Lia</h2>
      <h4>Couple</h4>
      <blockquote>Words go here from what people have to say.</blockquote>
    </figure>
  </div>
</div>

相关问答

更多
  • 你可以简单地使用输入事件: 的jsfiddle $('#contrast').on('input', function() { $('#contrastFilter').css('opacity', $(this).val()); }); #contrastFilter { background-color: black; width: 200px; height: 200px; position: absolute; top: 20%; ...
  • 您将jQuery与通用JavaScript相结合。 您需要更改此行: $('.jpegcam_slider').style.opacity = (value*.01); 要从jQuery对象获取本机元素对象(使用[0] ): $('.jpegcam_slider')[0].style.opacity = (value*.01); 或者使用jQuery的内置CSS方法 : $('.jpegcam_slider').css({ opacity: value*.01 }); 请参阅http://try.jq ...
  • 除了给你解决方案更重要的是帮助你实际看到你的元素实际上是集中的 。 我在调试CSS代码时喜欢使用红色,所以尝试放: .test-slider { border: 1px solid red; } 现在,您可能会看到.test-slider确实居中,但它的子, .test-slide锚定在其父级的左上角,因为父级的宽度较大,所以它似乎是关闭的。 要解决这个问题,请设置: .test-slider { width: 20.4em; /* Instead of 25em */ } 由于.tes ...
  • 将.imgP添加到HTML中的.imgP .page-header (或将JavaScript中的page-hader替换page-hader )。 var rangeVal = document.getElementById('rangevalue'); var range = document.getElementById('range'); var updateVal = function(val) { rangeVal.innerHTML = val; rangeVal.style. ...
  • 我会说,为按钮添加两行,类似于: jQuery("#one-row").click(function () { $('.product-list').removeClass('-two-columns'); $('.product-list').addClass('-one-columns'); $("#one-row").css("opacity", "1"); $("#two-rows").css("opacity", "0.3"); }); jQu ...
  • 您可以使用background-color: rgba(0,0,0,0);来代替不透明度background-color: rgba(0,0,0,0); 和background-color: rgba(0,0,0,.3); RGBA代表红绿蓝色的alpha 。 html, body { margin: 0px; padding: 0px; height: 100vh; } #header { position: absolute; width: 100vw; h ...
  • 尝试这样的事情 $("#"+ele).animate( { opacity:1, width:"300", height:"300", },2000); 参考 http://api.jquery.com/animate/ 例 $( "#book" ).animate({ ...
  • 它运行正常,你只需要将你的JS移动到正文的底部,并确保你首先加载jQuery。 您也可以将转换添加到#header而不是#header.scrolled :这样当您向上滚动时它会很好地消失。 看演示: $(document).ready(function() { $(window).scroll(function() { if ($(window).scrollTop() > 10) { $('header').addClass('scrolled'); } ...
  • 您可以在图像上叠加PNG图像以获得所需的效果。 IE无法正确呈现部分透明的PNG图像。 对于此浏览器,您需要一些解决方法,例如IE PNG Fix 。 在这里演示 在现代浏览器中,您可以使用CSS3 box-shadow属性来实现此目的。 这里有CSS3演示 You can overlay a PNG image over your image to get the desired effect. IE does not render partially transparent PNG images pro ...
  • 我讨厌这样说(因为我理解在纯CSS中制作非常棒的东西感觉真棒),但你应该使用JavaScript。 请耐心等待我,如果您认为我不合理,请发表评论: 您只能将单个元素匹配为:target ,因为您只能有一个#标签,因此最多可以一次将一个滑块设置为特定项目(另一个将返回默认值)。 无论你喜欢与否,这都是约束。 另一方面,HTML + CSS + JS是Model-View-Controller模式/模型/概念的一个很好的例子。 HTML是Model因为它包含所有data CSS是View因为它包含所有style ...

相关文章

更多

最新问答

更多
  • 获取MVC 4使用的DisplayMode后缀(Get the DisplayMode Suffix being used by MVC 4)
  • 如何通过引用返回对象?(How is returning an object by reference possible?)
  • 矩阵如何存储在内存中?(How are matrices stored in memory?)
  • 每个请求的Java新会话?(Java New Session For Each Request?)
  • css:浮动div中重叠的标题h1(css: overlapping headlines h1 in floated divs)
  • 无论图像如何,Caffe预测同一类(Caffe predicts same class regardless of image)
  • xcode语法颜色编码解释?(xcode syntax color coding explained?)
  • 在Access 2010 Runtime中使用Office 2000校对工具(Use Office 2000 proofing tools in Access 2010 Runtime)
  • 从单独的Web主机将图像传输到服务器上(Getting images onto server from separate web host)
  • 从旧版本复制文件并保留它们(旧/新版本)(Copy a file from old revision and keep both of them (old / new revision))
  • 西安哪有PLC可控制编程的培训
  • 在Entity Framework中选择基类(Select base class in Entity Framework)
  • 在Android中出现错误“数据集和渲染器应该不为null,并且应该具有相同数量的系列”(Error “Dataset and renderer should be not null and should have the same number of series” in Android)
  • 电脑二级VF有什么用
  • Datamapper Ruby如何添加Hook方法(Datamapper Ruby How to add Hook Method)
  • 金华英语角.
  • 手机软件如何制作
  • 用于Android webview中图像保存的上下文菜单(Context Menu for Image Saving in an Android webview)
  • 注意:未定义的偏移量:PHP(Notice: Undefined offset: PHP)
  • 如何读R中的大数据集[复制](How to read large dataset in R [duplicate])
  • Unity 5 Heighmap与地形宽度/地形长度的分辨率关系?(Unity 5 Heighmap Resolution relationship to terrain width / terrain length?)
  • 如何通知PipedOutputStream线程写入最后一个字节的PipedInputStream线程?(How to notify PipedInputStream thread that PipedOutputStream thread has written last byte?)
  • python的访问器方法有哪些
  • DeviceNetworkInformation:哪个是哪个?(DeviceNetworkInformation: Which is which?)
  • 在Ruby中对组合进行排序(Sorting a combination in Ruby)
  • 网站开发的流程?
  • 使用Zend Framework 2中的JOIN sql检索数据(Retrieve data using JOIN sql in Zend Framework 2)
  • 条带格式类型格式模式编号无法正常工作(Stripes format type format pattern number not working properly)
  • 透明度错误IE11(Transparency bug IE11)
  • linux的基本操作命令。。。